Building Web Sites All-in-One For Dummies® (29 page)

•
Embedded in the head of the HTML document:
These styles offer more flexibility because they can be applied to many elements, such as all the paragraphs, in the document. These styles will not, however, affect parts of other documents.

•
External:
To have styles that affect all the pages of a site, you need to create an external CSS file and create a link to that file in the head section of your HTML documents. This third way enables you to take advantage of the quick site-wide layout control discussed earlier in this chapter.

Note:
These methods can be used alone or in combination with each other. If you do use more than one method, you must know about the Cascade.
The Cascade
refers to the fact that the style that is closest to an element is the one that takes precedence. For example, say you have styles set up for paragraphs in your external CSS file, and you decide that you need a special treatment for paragraphs on one page of your site. You can set up those styles in the header. The CSS in the header will take precedence over the CSS in the external CSS file because it's closer to the paragraphs of that page. If you then decide that one paragraph in that same document needs a third treatment, you apply inline CSS to just that paragraph. That paragraph — and only that one — will be styled by the inline style.

Inline styles

Inline styles
are coded directly into the body of your document. For example, take a look at the following HTML for a paragraph:

This would be black text

Although inline styles are pretty quick to add on the fly, we don't recommend this technique. In essence, you're trading an old style of coding that created hard-to-maintain sites for a new flavor of the same thing. For example, in the code that follows, you can see that this style is applied directly within the

tag and will affect only this one instance of a paragraph. No other paragraphs will take on the attributes unless you apply the same style attributes to them.

This would be black text

The problem with coding this way is that if you decide you want to change the color of your text on your site — or anything else coded with inline styles — you have to find
all
the places that you used these inline styling techniques and change them. It also makes for a lot of clutter that isn't necessary.

Styles embedded in the head of the document

When you
embed styles,
you create your CSS styles in the head portion of your HTML document and refer to them in the HTML, like this:

This text would be purple

The advantage to using this technique is that you can have some specialized styles embedded in just one HTML document. This can come in handy if you want a special page for an event or some other reason.

Use this technique to implement styles for that HTML document only. The other pages of your site aren't affected by styles that are embedded this way or created inline. If you're creating styles that you intend to use throughout your site (which is most often the case), don't use this technique. You'll end up with a site that's a pain in the neck to update because you'll have to open each document and edit each embedded style individually — unless you feel brave and want to use the Find and Replace feature of your software.

External style sheets

Using an external style sheet is generally the preferred method, especially if you want to implement your styles across the whole site. All the CSS style information is created in an external file, or files if you have a more complex site. The files are linked to the HTML document in the head portion of the HTML, like this:

This code links the CSS file to the HTML document. Notice that the external style sheet's file extension is
.css
. When a visitor goes to your site, the CSS is loaded along with the HTML, and the page looks great. The major advantage to this technique is that if you decide you want to change anything about your design or layout, you can make a site-wide change simply by changing the styles in the CSS file. You don't need to open the HTML files to edit them. Of course, you'll want to preview your pages before publishing them, but that's the rule for all Web pages.

You can also create multiple style sheets and link them to the same HTML document, like this:

The benefits of this technique are that your site can have a unified look and feel, and you can also implement some specialized styles throughout just one section. For instance, you can implement a color-coding scheme.

The Cascade (again, how the priority of styles work together) is a strange but useful friend. The most basic explanation of how it works is that whichever style declaration is closest to an element is the one that will take effect. However, that's sort of how it works. In some cases, styles interact in unexpected ways. Be on the lookout for multiple styles applied to the same type of element or styles that will affect positioning of elements in relation to each other, such as margins and paddings. If you place a margin on a paragraph and a padding on a table, the two will interact when you put a paragraph in a table. You might need to adjust your styles when things don't look how you expect. Don't get discouraged, though; the best way to master CSS is to get in there and work with it.

Commenting your code

Each type of coding has its own language style or
syntax
(like grammar for computers). You must use proper syntax when creating any code. If you don't, the code won't work, or it might do unexpected things. Even comments have proper markup and/or syntax. If you don't create code comments correctly, the browser might see them as content or code and treat them as such instead of keeping them hidden, the way it should. (See Book III, Chapter 2 for information about using comments in general.) In CSS, comments look like this:

/*Banner and header styles - creates background color and places images – this is a CSS Comment*/

#banner{width: 100%; background-color: #000;}

#banner p{color: #fff;}

#header{border-bottom: 1px #333 solid;}

/*End banner and header styles – this is also a CSS Comment*/

Note how the comments are between a
/*
and
*/
, which signals to the browser that the information contained is a comment and is to be ignored.

Keep your style sheet clean and easy to understand by:

•
Grouping styles that work together:
In the previous example, the
#banner
style establishes the width and background color of the banner area, and the
#banner p
style specifies that paragraphs within the banner area will be white. Grouping styles that work together this way in your CSS file is a good thing; that way, seeing all the pieces is easier.

•
Placing a comment at the beginning of a group of styles stating what the styles are affecting and what they're doing:
Keep it short, but make sure it's informative enough so that others (or yourself in six months) will understand it.

•
Including a comment at the end of the group.
By doing this, you keep the styles organized and reduce confusion about where one set begins and one ends.

Creating a CSS Document

It's time to start creating your first CSS document. A
CSS document
is the file where the styles you create are kept. The term
CSS
can refer to this file or to the actual styles. That can be confusing, but as you get more comfortable with the way everything works, you'll also get used to the lingo of Web design. For the sake of simplicity, we work with the HTML that we create in Book III, Chapter 2 to create a simple design that helps you get your footing as you set off into the Web design wilderness. Although the actual styles work as inline, embedded, or external style sheets (which we explain in the preceding section), the examples given here refer to styles that are external.

CSS styles are made up of three parts:

•
Selector:
Specifies what the style will affect

•
Property:
Indicates what exactly will be affected (font, color, background, and so on)

•
Value of the property:
Indicates how the property will be affected (fonts will be black and bold, for instance)

The other thing to notice is the different types of selectors, or ways of attaching styles to parts of your HTML content. Some affect HTML tags (

,

Setting default selectors

As you get started, you want to create styles for some common elements to ensure a unified site style. Default paragraph, link, and heading styles are examples. These are all styles that will affect HTML tags directly; they are your most general default values for things like colors and fonts. Those types of styles are important, and we explore those in the next section.

Start your CSS document by listing the default selectors you want to create. This helps you get started and ensures that you won't forget something very basic as you get into developing your CSS file:

These are some, although not all, of the basic elements you want to make sure you create styles for.

At this point, it's easy to begin to write your
base styles,
which are the styles for paragraphs, links, tables, headings, and other common elements that will appear on your site. These serve as the basic default values for each element although they can be changed by creating custom styles. We cover this in more depth later in this chapter. For now, we focus on the basic parts of a CSS style. The
syntax
(or grammar) for writing CSS is

selector {property: value;

property: value;

property: value;}

A style can have several
property: value
pairs, or just one. A style can also have several selectors. For example, the style that follows has four selectors, all of which happen to be headers:

h1, h2, h3, h4 {font-weight: bold; color: #990000;}

So, here's an example of a style with one selector and five
property: value
pairs:

body{

font-family: Verdana,Arial,sans-serif;

color: #000000;

margin: 0px;

padding: 0px;

background-color:#ffffff; }

The preceding example does the following:

• Uses the Verdana as a default font, with Arial the next choice if Verdana is not available, or then a sans serif font if Arial is not available.

• Specifies that the default color of text is black (
#000000
).

• Specifies that the HTML document should entirely fill the browser window with no margin (
0px
) or
padding
(
0px
) — spacing — between the edge of the browser window and the content of the page. When creating styles, px refers to pixels. So in this example, the margin and padding are set to 0 pixels.