Skip navigation

Tag Archives: css

Type selectors:

em {color: blue;}

This rule will select any <em> element on the page and color it blue anywhere in the document

Class selectors:
if you have:

<p class="big">This is some <em>text</em></p>

then the rule:

.big { font-size: 110%; font-weight: bold; }

will select that line because it selects every class=”big”.

To be more specific we can combine class and type selectors:

div.big { color: blue;}

this would select only class big objects with type <div>

You can also assign and element multiple classes:
<p class="big indent">
.big { font-weight: bold; }
.indent { padding-left: 2em; }

both these rules apply to the html line above.

Try to style all elements in a <div> the same way instead of abusing the class selector

ID selectors:
You can also select html objects by ID, eg:

<p id="navigation"> navigation stuff </p>
#navigation { width: 12em; color: #333; }

Descendant selectors:

p em {color: blue; }

this would select all em elements that are descendent’s of p even if they are grandchildren of p and not direct descendants.

Child selectors:

div.em { color: blue; }

only select the children of div that are em…

Universal selectors:

* {color: blue;}

these select all elements regaurdless of their position in the document tree

Adjacent siblings selectors:

These have applications if you have a series of headers that you want to use multiple times together. If you have <h2> and <h3> elements in the same section then you create a style using:

h2 + h3 {margin: 1em;}

This targets any h3 that follows and h2.

Attribute selectors:

img[src="icon.gif"] { border: 1px solid #000; }

Targets all images with the source “icon.gif”.