CSS Basics w3c
intro | media-types | reset/setup
RULES: css | cascading | @rules
SELECTORS: selectors | properties/values
Selectors - Corresponding HTML
Each style rule includes a selector that relates to an element on the web page. For example the selector can refer to:
a tag
<h1>
Any tag can be used as a selector.
or
an id :
<section id="name">
or
a class :
<section class="name">
or
an attribute
<section class="name" title="attribute">
<img src="" class="name" alt="attribute">
Selectors w3c
Type
h2{
declaration
}
Affects specific elements, (tags)
_________________
Universal
* {
declaration
}
Affects all elements.
_________________
Class
.name {
declaration
}
Affects the element with the named class
_________________
ID
#name {
declaration
}
Affects the element with the named id
_________________
Attribute
[attribute] {
declaration
}
Affects an attribute such as a title, href etc.
_________________
Descendant
Child
section>em
section>em{
color: blue; }
Affects the em that is the direct child of the section:
<h1>Heading <em>text</em></h1>
<section>
This is some
<em>This will be affected</em>
<p>This is a paragraph of
<em >This will not be affected<em><p>
</section>
_________________
All Decendents
ul li {
declaration
}
Allows you to affect all <li>, decendents of the <ul> regardless of how deep they are for example every list <li> element will be affected:
<ul>
<li>info</li>
<li>info</li>
</ul>
Adjacent Siblings
em + strong {
declaration
}
This will affect all adjacent siblings which are elements that are nested within the same element.
<p>Nam in neque mauris. Suspendisse neque tortor
<em><strong>affected</strong></em>
suscipit at rutrum eu, scelerisque at erat.
<strong>affective</strong>
suscipit at rutrum eu, scelerisque at erat.
</p>
<em>not affected</em>
Grandchild
section * em{
declaration
}
In the example the paragraph, <p> is the direct decendent and the emphasis element is the grandchild.
<section><p><em>will affect this</em></p>
<em>will not affect this</em>
</section>