css selectors
TRANSCRIPT
CSS Selectors
By Jonathan N. Lontabo
Review on CSS Rule Set
• A rule or "rule set" is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block.
Selector
• "selects" the elements on an HTML page that are affected by the rule set.
• consists of everything up to (but not including) the first left curly bracket.
h1{ color: blue; margin-top: 1em; }
p{ padding: 5px; }
td{ background-color: #ddd; }
Declaration Block
• a container that consists of anything between (and including) the curly brackets. Whitespace inside a declaration block is ignored.
h1{ color: blue; }
Or
h1{ color: blue;
}
Declaration
• tells a browser how to draw any element on a page that is selected.
• consists of a property and a value, separated by a colon ":".
h1{ color: blue; }
Property
• the aspect of that element that you are choosing to style. There can only be one property within each declaration.
h1{ color: blue; }
Value
• the exact style you wish to set for the property.
h1{ color: blue; }
Grouping Declarations
• You can use more than one declaration within a declaration block. Each declaration must be separated with a semicolon ";".
p { padding: 5px; margin: 1px; }
p { padding: 5px; margin: 1px;
}
Grouping Selectors
• Selectors are used to "select" the elements on an HTML page that are affected by rules. When several selectors share the same declarations, they may be grouped together to save writing the same rule more than once. Each selector must be separated by a comma.
h1, h2, h3, h4 { padding: 1em; }.highlight p, .highlight ul{ margin-left: .5em; }
#main p, #main ul{ padding-top: 1em; }
Common Mistakes
• Forgetting to write each selector in full
#maincontent p, #maincontent ul{ border-top: 1px solid #ddd;
}
#maincontent p, ul{ border-top: 1px solid #ddd;
}
WRONG
CORRECT
Common Mistakes
• Ending the grouping with a comma
.highlight p, .highlight ul { margin-left: .5em;
}
.highlight p, .highlight ul, { margin-left: .5em;
}
WRONG
CORRECT
Shorthand properties
• Some properties are able to be written in shorthand, so that the values of several properties can be specified with a single property
h2{font-style: italic;font-variant: small-caps;font-weight: bold;font-size: 80%;line-height: 120%;font-family: arial, helvetica, sans-serif;
}
h2 { font: italic small-caps bold 80%/120%
arial, helvetica, sans-serif; }
Shorthand for padding and margin
• Values are applied in the following order:
top, right, bottom and left -clockwise, starting at the top.
p { padding: 1em 1em 1em 1em; }
p { padding: 1em; }
p { padding: 1em 2em 1em 2em; }
p { padding: 1em 2em; }
p { padding: 1em 2em 3em 2em; }
p { padding: 1em 2em 3em; }
CSS Comments
• used to explain the code. Like HTML comments, CSS comments will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/".
/* Comment here */p {margin: 1em; /* Comment here */
padding: 2em;/* color: white; */background-color: blue;}
/*multi-linecomment here*/
The Document Tree
<body><div id="content"><h1>Heading here</h1><p>Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor <em>sit</em>amet.</p><hr></div><div id="nav"><ul>
<li>item 1</li><li>item 2</li><li>item 3</li>
</ul></div></body>
ANCESTOR
DESCENDANT
PARENT
CHILD
SIBLING
MULTIPLE DESCRIPTION