For more thorough information here’s the official CSS reference.

I like this one too because it lets you play with values and see how they affect things.

Deploying CSS

You can do things like this where ever a bit of CSS is needed:

<p style="font-size:20px;">Text in a font size of 20 pixels.</p>

Or you can make a style section in the <head> like this:

<html>
<head>
<title>Chris X Edwards - xed.ch</title>
<style type="text/css">
.css-class{ color:red; }
#css-id{ color:blue; }
</style>
</head>
<body>
<p class="css-class">Tomato</p>
<p id="css-id">Blueberry</p>
</body>
</html>

See the section on "ID Selectors" for a discussion of when to use class selectors and when to use IDs.

Note
In general it’s polite XML syntax to put quotes around all attribute values. This is not the case in CSS. If you put things like blue in quotes like .css-class{ color:"blue" } then this style will most likely not work!

To save space in your document and to standardize and centralize your style definitions it’s usually not a bad idea to put the style sheet information in its own file and source it from your HTML like this:

<link rel="stylesheet" href="http://xed.ch/xed.css" type="text/css">

CSS Syntax Structure

First interesting thing to note is that comments are done with the old C syntax and look like this:

/* This is a comment. */

Besides comments, CSS is formed by "rules" which have the format:

Selector{Declaration_1;...;Declaration_N;}

Note that the final semi-colon is optional but it seems to be regarded as good form.

"Selector" is usually the HTML tag to apply this rule to but it can be other things as shown below.

The Declaration is a "Property:Value" pair. This makes the CSS a list of rules that looks like these examples:

    a{text-decoration:underline;color:#006ac8;}
    p{margin:0 0 1.5em;}
    h1,h2{font-weight:normal;color:#cecece;}

It’s normal to define properties for styling various normal HTML tags, but it is also common to want to differentiate between two different types, from your perspective, of the same tag. For example, perhaps you sometimes want paragraphs to have a gray background and sometimes you want them to have a white background. To the HTML they are both paragraphs with the <p> tag but you know there is something else that should be specified. Here is how to do that:

    <style>
        p.red{background-color:#ff0000;}
        p.gray{background-color:#cecece;}
         .blue{background-color:#0000ff;}
    </style>

    <p class="red">This is a paragraph with a white background.</p>
    <p class="gray">This is a paragraph with a gray background.</p>
    <b class="blue">This bold sentence will be blue.</b>

As you can see with the blue example, any tag can pick up the properties of a selector that starts with just a dot.

ID Selectors

It is also possible to use the id attribute of tags to specify CSS rules. For example:

<style>
    #specialoffer{color:red;}
</style>

<p id="specialoffer">This should be red!</p>

Generally the idea is that if the style is to be applied to one specific element then it should get an id but if there are many such elements, it should get a class. ID selectors should be reserved for things like serial numbers which are absolutely unique. A good thing to keep in mind about id attributes is that browsers will search pages for them if given a URL that looks for them. For example http://xed.ch/help/gentoo.html#2 looks for the section (defined in the table of contents) labeled with the ID "2" in this document. Use ID selectors in those kinds of situations.

<div> Tags

Sometimes you want to style a portion of the document but it has no specific classic HTML tags associated with it. Using paragraph tags is common but if your styled section does not resemble a paragraph and conflicts with a paragraph’s natural rendering, you can use basically a "do nothing" tag. This is <div>Does nothing special.</div>.

Links have some special properties which can be styled. The syntax looks like this:

a:visited{underline;color:#0000c8;}
a:hover{color:#cc0000;}
a:active{color:#cccc00;}

Nested Selectors

Sometimes you’ll come across (or require) a syntax like this:

a img{border:none;} /* Images which are links. */

The following example explains how this works:

p{color:black;}
.edited{color:red}
.edited p{color:yellow}

The idea here is that while you may have a generally applicable style for <p> tags, you might want another style rule to take precedence. Here the edited class is applied first and if the tag is edited it is checked to see if it is a <p> tag and colored yellow. If it was a <p> tag without the edited class, then it would be colored black.

Media Types

Media queries are a mechanism which allows the web page (sort of) to "ask" the impending browser what sort of thing it is. It’s like a musician who has been requested to play a gig asking the requester, Ok, so what kind of venue is it? This allows the musician to make special accommodations which may be appropriate for a small club or a giant arena. The way it works in real life is that you set up different CSS effects in different categories depending on what sort of display facilities are available.

Media queries can check the width and height of the browser or device allowing correct layout for portrait or landscape; phones are constantly switching and apparently good implementations constantly adjust to match the correct media query section. Also the resolution can be queried presumably allowing somewhat accurate length scaling.

Although you might find a lot of chatter about how media types help with braille and other technologies for the blind, I couldn’t find any examples of it in use for that purpose. The real use which is massively deployed is to allow tablets and "smart" "phones" to receive optimized rendering instructions. This is often called "responsive web design" or "fluid layout".

Media query syntax uses @media and looks like this:

@media screen and (max-width: 1200px) {
    body{width:1000px; margin:0 auto;}
    #someid{width:700px;}
    .someclass{width:280px;}
}

Other media types (than the typical screen) include 3d-glasses, print (a printer), aural, handheld, projection, tty, and the all-encompassing all.

Some other conditions include:

(height:480dpi)
(min-resolution:90dpi)
(min-width:500px)
(device-width:600px) /* Could, but doesn't necessarily, have. */
(orientation:portrait)
(monochrome)
(min-color:8) /* 8 bit color device (or more) */
(device-aspect-ratio: 1280/720)

You can also bring in CSS from somewhere else depending on the media queries. This syntax starts with a @import.

You can also just embed the media queries and import the correct CSS:

<link rel="stylesheet" media="screen and (color)"
      rel="stylesheet" href="example.css" />

Here’s a full example.

A Media Query Sample With Left Side Menu
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">
        li.xedmenu{color:#ce0000;font-size:.75em}
        body {padding-left:0em}
        ul.xedmenu{background-color:#cecece;
                   position:relative;
                   top:0em;width:12em;
                   padding-top:1em;
                   padding-bottom:1.5em;
                   margin-top:0em
        }
        @media screen and (min-width:600px) {
            body{padding-left:16em}
            ul.xedmenu{background-color:#cecece;
                       position:absolute;
                       top:2em;left:1em;
                       width:12em;
                       padding-top:1em;
                       padding-bottom:1.5em;
                       margin-top:5em
            }
        }
    </style>

</head>
    <body>
        <ul class="xedmenu">
            <li>Item #1</li>
            <li>Item #2</li>
            <li>Item #3</li>
        </ul>
        <h1>Menu With Media Query Example</h1>
        <p>
            This test shows media queries being used in a simple but
            effective way. There is a simple menu on the left of the page
            if the display is larger than 600 pixels wide. If not, the
            display is placed at the top of the page.
        </p>
    </body>
</html>

Responsive Images

Here’s an article on responsive images and the tricky things about them. This basically has to do with selecting the optimal sized image to give the user as much information as they might wish but minimize upload times.

Attribute Selectors

You can also style things based on their attributes. The syntax uses brackets.

[src=xedlogo.png]{border:1;}

Here’s an example:

<style>
    [src="http://xed.ch/xedlogo.gif"]{border:10px solid blue}
</style>
<img src="http://xed.ch/xedlogo.gif"/>

In theory, any tag with an attribute that defines src as this gif will get a blue border.

Useful Properties

background-color

Values can be in hex #cecece, a name blue, or RGB decimal rgb(206,206,206).

background-image

Value can be url(http://xed.ch/cssnotes/exaple.jpg).

background-repeat

If none then don’t tile background images.

border

Describes the border of an element that can have them. Values are something like 5px dashed #cecece or 1em solid blue.

border-width

Same as border but individually.

border-style

Same as border but individually.

border-color

Same as border but individually.

clear

Clear sides of an element of floating elements. An example of floating is when text wraps around an image. Can be used to turn off floating elements completely. Values can be both, left, or right.

color

Main color of elements. For example font colors. Values can be in hex #cecece, a name blue, or RGB decimal rgb(206,206,206).

display

A value of none hides the item. A value of inline puts the item in with no line breaks, for example, an emoticon image in some text. A value of block puts line breaks before and after the item.

font-family

Main category of font. The five CSS generic fonts are serif, sans-serif, monospace, cursive and fantasy.

font-weight

Basically normal or bold. Anything else will probably not work for many people.

font-size

Values can be things like 24px, 50%, or 1.5em.

font-style

Basically italic or oblique or normal.

font-variant

Basically smallcaps or normal.

float

Causes element to float left or right. Or none to prevent floating.

height

Height of an element firmly set at a value. Can be auto (the default), a value in px, cm, em, etc, a percent 50%, or inherit to use an inherited value.

max-height

Constrain an element to be no higher than this value.

min-height

Constrain an element to be no shorter than this value.

letter-spacing

Puts the specified amount of space (.2em, 3px) between each l e t t e r. Looks quite silly usually.

line-height

A value of 100% is normal line spacing where 200% is double spaced and 50% is an unreadable compressed mess.

margin

How close the text is to other elements or borders it is adjacent to. Can be in px, em etc. Note that margin-right, margin-left, margin-top, margin-bottom set just that margin. And you can set all four of those with a margin value of something like 10px 20px 30px 40px which will give the top, right, bottom, left 10, 20, 30, 40 pixels of margin respectively.

padding

Just like margin with all its variants. It is specifying distance from the text to the edge of the text’s element. Margin is concerned more with this element’s position relative to the next element.

position

Values can be relative or absolute. Then use the attributes, top, bottom, left, and right. This allows an element to be placed very specifically in a certain spot. Better be sure the user has a pixel in the specified place!

text-align

Values are left, center, right, and (full) justify and orient text blocks accordingly.

text-decoration

Values can be none, underline, overline, line-through, blink, or inherit.

width

Same as height. Also there is max-width and min-width.

word-spacing

Space between words. Like letter-spacing but less silly.

z-index

A quasi layer concept. With this value, you can prioritize which elements are drawn and which are obscured when they occupy the same space. A value of 1 will be under an element with a value of 2.