Pseudo-classesCascading Style Sheets can contain what are called pseudo-classes. Pseudo-classes are not really fake, they're just called that to allow you to use pseudo-class elements. These allow you to change an element based on something happening.
The main use is to affect link colors depending on whether or not it's been clicked on, being clicked on or has been clicked on. a is the element, then you place a colon, then the pseudo-class element.
For example:
a:active {color: red;}
a:link {color: blue;}
a:visited {color: purple;}
This assures that unvisited links are the standard blue, links being clicked on right now are red, links already clicked on are purple.
Pseudo-elementsCascading Style Sheets has pseudo-elements. You can use CSS on them, but they're not real HTML elements. They are: ":first-line" and ":first-letter."
Say you want the first line of a paragraph to appear as green, but only the first line. You put in your stylesheet:
p:first-line {color: green;}
And the first line of every paragraph will appear as green.
The :first-line pseudo-element is useful if you wish to create the drop cap effect, where the first letter is of much larger than normal text.
Adding EmphasisWhat if you want emphasized text to be red when it's in a major headline, but for emphasized text to remain black when it's in ordinary text? And you want unemphasized text in the headline to remain black.
You simply use what's called a contextual selector.
That's an HTML element (h1) plus an element which appears within the first element (strong):
h1 {color: black;}
h1 strong {color: red;}
If you want it to apply to all headlines, just add the other headline tags:
h1 h2 h3 h4 h5 h6 {color: black;}
h1 h2 h3 h4 h5 h6 strong {color: red;}
Whenever a
<strong> appears between
<h> tags it will appear as red, but the rest of the headline text will remain black. So will emphasized text appearing within other elements.
Element GroupsCascading Style Sheets categorizes HTML elements into three groups:
1. Elements displayed on a line by themselves: paragraphs, tables, headings, lists,
<body>,
<div> and sometimes images and forms. These are called block-level elements.
2. Elements within block level elements that do not start a new line:
<a>,
<strong>,
<span>,
<em> and usually images and forms. These are called inline elements.
3. Elements with lists -- mainly the
<li> tags. These are called list-item elements.
Fortunately, using these three groups is intuitive unless you're doing complex web design.
Color Specification By NameUsing Cascading Style Sheets you can specify colors the same way as with HTML.
You can name the VGA 16 colors originally used by Windows: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow.
Color Specification By RGBWeb designers who want more, and more subtle, color choices can use percentages with Cascading Style Sheets.
The standard order for specifying colors is RGB (Red Green Blue). You write "rgb" and within paranthesis assign a percentage to each color, separated by commas. So to set H1 as red you write:
h1 (color: rgb(100%,0%,0%);}
That's red set to 100% and green and blue to 0%.
Color Specification By HexadecimalThe most common way for web designers to specify colors is using the RGB hexadecimal system. This looks harder than it is once you get used to it. It scales the primary colors of Red Green Blue (in that order) from 0 to 255. Hexadecimal means it uses a base 16 numeric system instead of base 10. Since our number system is based on 10, we don't have numerals for the additional numbers, so we use the letters A thru F.
So the amount of Red, Green and Blue can each range from 00 to FF. Then they're placed together, so online colors can range from 000000 (the absence of all color, which is pure black) to FFFFFF (all colors together, which is pure white). And you must place a pound sign in front -- so pure red is "#FF0000" for example.
So to set h1 as red you can write:
h1 {color: #FF0000;}
You can find a color chart displaying the standard colors and
hex codes here.
Expanding 'Web Safe' ColorsYears ago computer monitors were normally limited in the amount of colors they could display. Also, there were differences in how colors appeared to Windows users and Mac users. This led to the concept of using "browser safe" colors on web sites. The color charts you find on the Internet show only these. However, today's computer monitors are generally sophisticated enough to display a tremendous variety and range of hues.
Therefore, you don't have to confine your color selection to the those shown by the online and book charts. You can specify any shade in between, but you'll have to experiment to see what colors you prefer.
Hex NumbersCascading Style Sheets will also recognize the numbers from 0 to 255 that correspond to each hex code. So you can also specify that headlines be displayed as red by the following:
h1 {color: rgb(255,0,0);}
If you use only the hex values where the two numerals for each color section are the same (00,33,66,99,CC,FF), you can reduce your typing by using shorthand hex notation. You just show the numeral once: 0 for 00, 3 for 33, C for CC and so on.
Thus, a red headline can also be specified by writing:
h1 {color: #F00;}
CommentingSoftware developers have long known that placing comments inside their programs is a good practice. In the dubugging process it helps them and others to understand why they wrote the code they did. Employers often require this documation. Therefore, all computer languages contain special codes for placing comments so that they can be read but the computer won't try to process them.
In Cascading Style Sheets you write comments in this format:
/* This is my comment. */