CSS Mastery and Web Tricks

CSS Mastery Markups

Common selectors

p {color: black;}
a {text-decoration: underline;}
h1 {font-weight: bold;}

Descendant selectors

li a {text-decoration: none;}

ID selectors

#intro {font-weight: bold;}

example: <p id="intro">Some Text</p>

Class selectors

.datePosted {color: green;}

example: <p class="datePosted">24/3/2006</p>

combination of type, descendant, ID, and/or class selectors

example: #mainContent h1 {font-size: 1.8em;}
#secondaryContent h1 {font-size: 1.2em;}
<div id="mainContent">
<h1>Welcome to my site</h1>
...
</div>
<div id="secondaryContent">
<h1>Latest news</h1>
...
</div>

pseudo-class selector

:link and :visited are known as link pseudo-classes and can only be applied to anchor
elements. :hover, :active, and :focus are known as dynamic pseudo-classes and can
theoretically be applied to any element.

example: /* makes all unvisited links blue */
a:link {color:blue;}

/* makes all visited links green */
a:visited {color:green;}

/* makes links red when hovered or activated */
a:hover, a:active {color:red;}

/* makes table rows red when hovered over */
tr:hover {background-color: red;}

/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}

The universal selector

example: * { padding: 0; margin: 0; }

Advanced selectors

Child selectors

example: #nav > li {font-weight: bold;}
#nav li * {font-weight: normal;}

<ul id="nav">
<li>Home</li>
<li>Services
<ul>
<li>Design</li>
<li>Development</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact Us </li>
</ul>

sibling selector

example: h1 + p {font-weight: bold;}
<h1>Main Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>

abbreviations:

<abbr title="Cascading Style Sheets">CSS</abbr>

abbr[title] {border-bottom: 1px dotted #999;}
abbr[title]:hover {cursor: help;}

using a rel attribute of nofollow gain no added ranking benefit from Google.

example: a[rel="nofollow"] {
background-image: url(nofollow.gif);
padding-right: 20px;
}

.intro {border-style: solid;}
[class="intro"] {border-style: dotted;}

a[rel~="friend"] {background-image: url(friend.gif);}
<a href="http://www.joemadesign.com/" rel="friend met colleague" >
Joema Design
</a>

1. Prev
2. 1
3. 2
4. 3
5. 4
6. 5
7. Next