Previous || Beginning of Primer || Next
In this second session of the Primer, you will learn how to construct a CSS statement and how to analyze an existing statement so that you can bend it to your will.
CSS is easy
An E2 Zen CSS is just a list of declarative statements that have the simple two-part form shown below. A complete stylesheet begins with a few lines of special information, but E2 Zen takes care of that for you. A general CSS statement is simple and looks like this:
Selector {: value; ... }
The first part is the 'selector'; it specifies some unit of a page composition to position or to style. The second part is the `declaration block'; it declares the specific position or style.
Actual example:
body {background-color: pink;}
The selector (`body') tells your browser that you are talking about the part of the HTML page description that comes between the and tags. The declaration (`{background-color: red;}') tells the browser to display that part against a red background.
CSS is hard.
The only thing that makes CSS hard is the surfeit of choices it gives you. It's a hell of details.
To start with the selector can be a lot of different things and you have to know what they are. The selector can specify one or many 'elements' of different kinds in an HTML description. Some of them correspond directly to the standard elements of HTML itself (the tags), like `p'and `body'. To know the standard HTML elements, you need to know HTML or have a good HTML tag reference handy. Selectors can also be non-standard elements that are specific to particular designs or particular pages. To identify these elements, you have to study the HTML source or get a list from the person who wrote the HTML. Selectors can also be combined in complex ways.
The other hard part is that each element that a selector specifies can have many different properties, and those properties can have various units. A unit of text, for example can have, color, style, justification, font, position, and much more. There are a lot of possibilities, and you have to know what they all are if you want all possible control.
Don't fret if that isn't at all clear yet. This Primer will help you overcome both of the difficulties.
Real Examples
Let's look at some more real examples in greater detail now. If you have gone through the previous parts of the CSS Primer for the E2 Zen Theme and followed the instructions to create your own nascent stylesheet, go to the catwalk in a separate window and open your stylesheet now. You don't have to switch to the Zen theme to do this, but it will be easier if you do switch.
We'll start with the simplest of the declarations we already have. In your stylesheet look for this statement (if it's not there, copy this one and add it to your sheet):
body {background-color: pink;}
Here, 'body' is the selector; it tells your browser to pay attention to the HTML body element, which is everything between the body and /body tags. The declaration part, {background-color: pink;}, tells the browser to color the background of the body element pink. You can specify a color in any of four different ways, and that's whole a lesson in itself. We won't get into that here, but if you want to play around with this a little now, try replacing the 'pink' in the declaration in your stylesheet with `white', and '#00FF00' (those are zeros, not letter 'o's), and 'rgb(0,0,255)' and `rgb(0%,0%,100%)'. To see the effect of a change you make, click on the 'Preview This Style' button below the edit window after each change.
OK, now go back and study the format of the above CSS statement. The selector is simply the name of the HTML element, `body' in this case. The declaration begins with a left curly bracket followed by a property name, 'background-color', followed by a colon. Next comes the property value, `pink', followed by a semicolon, and then comes a closing right curly bracket. That's the basic structure of all CSS statements, although there are a lot of variations and shortcuts.
By changing the selector, you can change the background color of a different part of the page. Try adding this statement anywhere in your stylesheet:
#header {background-color: red;}
Use the `Preview This Style' button to see the result. (You might have to poke the button more than once, as it is a lazy button.) If you are in the Zen theme, you can click on the `Submit `button instead.
Now that you've seen the result (the background of the top-most part of the page should have turned red), delete that statement. Then look for the existing #header statement near the top of your stylesheet. It should look like this:
#header {position: absolute; top: 0; left: 0; right: 0;
}
Now add
background-color: red;
at the end of the line that ends with `100%;'. This has the same effect as the separate statement you used just a minute ago, and illustrates how you can put multiple property:value pairs in a single statement for the same selector. To make a long declaration block easier to read, you can break the line after each property:value pair (after the semicolon) and indent each pair on a new line. It looks like this:
#header {position: absolute;
top: 0;
left: 0;
right: 0;
background-color: red;
}
As long as you have the colons and the semicolons in the right places, it will work regardless of the white space.
In this statement, the selector `#header' begins with a hash sign (#) because it points to an element that is defined especially for the E2 pages. In the E2 HTML, this element is defined by a division tag and an `id' property as you see below.
Everything between that tag and its closing tag () will be displayed with the properties defined in the declaration. This is one of several ways the HTML author can divide the page up into blocks for positioning and styling.
Look again at the stylesheet you are building. You can now understand that it defines the position and a few other properties of three major blocks of the E2 page, #header, #wrapper, and #footer. Think of each of these elements as boxes that can hold other boxes, each of which can contain still other boxes or different kinds of elements like paragraphs, lists, or pictures.
In this session, we've learned the general format for writing CSS statements and that stylesheets are just lists of these statements. We've learned a little about selectors by looking at `body' as `#header' as examples and analyzed the properties and values of a few example statements.
What you've learned here should allow you to look at CSS and understand what the different statements do, especially if the stylesheet is properly organized and commented. You should now also be ready to quickly learn more specific selectors and their possible property:value pairs. With a good CSS reference table, you can probably begin to flesh out your own E2 style on your own. You can also continue with this Primer for some more specific help.
In the next session, we will take focus on the #header division and explore in depth what we can do with different kinds of elements.
Previous || Beginning of Primer || Next