Introduction to Cascading Style Sheets

Definitions

Linked - a stylesheet that is a SEPARATE file, named with a .css extension, that you create a link to in the HEAD of the HTML file that you want it to apply to.

Embedded - a stylesheet that has its declarations in the HEAD of the HTML file. Those styles only apply to the HTML file in which it is contained.

Inline - style that is declared in the element where it occurs, within the HTML file.

Element - in HTML. An element is comprised of an open tag, the stuff between the open tag and the close tag, and then the close tag. For example, an H3 element looks like this

<h3>This is a heading</h3>

Attribute - in HTML. An attribute is a special command contained within the open tag of an element, that helps to define or qualify the element. For example,

<img src="picture.jpg" border="1" alt="pretty picture">

is an IMG element with an SRC attribute, a border attribute, and an alt attribute. The VALUES of those attributes are contained within quotation marks.

Selector - in CSS. The selector is the name of the element(s) that you want to apply a style to.

Declaration - in CSS. The stuff between the braces, which explains what styles should be applied.

Property - in CSS. The property that you want to assign a value to…e.g. you want to change the color, the font-style, etc.

Value - in CSS. What you want to change the property to…e.g. green, italic, Arial, etc.

What is a stylesheet?

A stylesheet is a group of declarations (written in plain text) that allow you to change the presentation of particular features of an HTML file, without having to change the structure by using things like font tags and tables.

What do stylesheets do for me, and why should I use them?

They allow you to make changes to the look of your web pages, without changing the structure, or messing up the code. They also allow you to make global style changes easily, in one place, rather than having to touch multiple pages.

What are the three main ways to implement styles, and when do you use them?

Linked, embedded, and inline (see Definitions)

What are the parts of a style declaration?

Selector (element name), declaration (contains property and value), property (what you want to change, like font-style), and value (what you want to change it to).

So, for a declaration that looks like this:

h3 { color : green ; }

h3 = selector
{ color : green ; } = declaration
color = property
green = value

What is the syntax, and what’s with all the punctuation?

The syntax is as follows (see below for a more detailed explanation): Selector, then a space, then an open brace. Some people will go down to the next line to start with the declaration, to make the stylesheet easier to read. This is not required, but it may help to make your stylesheet easier to read. Then you type the name of the property, a space, a colon, a space, and the name of the value, followed by a space and then a semicolon. Follow that all up with a close braces.

What are some techniques to use to get into compliance with the new way styles are used?

Replace things like FONT tags with styles. Use close tags for all elements, and put elements in lower case. Read up on the XHTML 1.0 spec. Consider using DIVs instead of tables.

What are the DIV and SPAN elements in HTML, and how can they help me?

DIV and SPAN are elements that allow you to apply styles in a simple fashion. It's basically an identifier that creates an element as a container to hold style declarations. DIV creates a logical section that can contain other tags, while SPAN works inline that flows in with surrounding content.

What are the caveats I should know about different browsers and operating systems? Are there standards?

The W3C (World Wide Web consortium) has set standards for CSS. The two major browser players, NS and MS, have adopted these standards in varying ways. The good news is, with the new versions of their browsers, both companies have said they will conform to the W3C's standard. Until that point, using JavaScript or even trying to do positioning isn't all that feasible. You would have to write different stylesheet commands for the different browsers, operating systems, and versions. Remember, if your message doesn't come through with your content, you may want to rethink your publishing strategy.

How can I create my own style identifiers? (class and ID)

See the section "Creating your own styles" below.

Where can I get answers to other CSS questions?

http://www.hwg.org/resources/faqs/cssFAQ.html

Where do all the CSS people hang out, so I can learn more?

http://css.nu
news://comp.infosystems.www.authoring.stylesheets

Three kinds of styles/stylesheets:

Creating your own styles:

Perhaps you want to make just some of the instances of an element take particular styles, but not others. There are a few different ways to create your own styles. We will discuss ID and class, which are similar to one another. Perhaps you want to make the text on some parts of your site a different color and font, such as red and Arial. You can create a class selector or an ID selector to make this easier. Use class when you want to use the style more than once. Use ID when you want to identify data only one time, making a unique element. (e.g. ID would be used when you’re defining a style for the first H3 on a page, or the last one, or the most important one, but if you wanted more than one H3 to take on the style, you’d use a class)

Class:

To use a class selector, you will need to define the style in your linked or embedded stylesheet. The declaration for a class will look like this:

.cooltext {

font-family : Arial ;

color : red ;

}

Notice the period before the new selector. That means that it’s a class declaration. Then, when you want to make some element take on these attributes, it’s simple to add the class to the element, like this:

<H3 class="cooltext">This is going to show up Arial and red, even though the rest of the H3s will be normal.</H3>

(Note that the period is eliminated when calling the class…the period is only used in the declaration.)

 

 

ID:

To use an ID selector, you will need to define the style in your linked or embedded stylesheet. The declaration for an ID will look like this:

#mostimportant {

font-family : Arial ;

color : red ;

}

Notice the hash mark before the new selector. That means that it’s an ID declaration. Then, when you want to make some element take on these attributes, it’s simple to add the ID to the element, like this:

<H3 ID="mostimportant">This is going to show up Arial and red, even though the rest of the H3s will be normal.</H3>

(Note that the hash mark is eliminated when calling the ID…the hash mark is only used in the declaration.)

Style Reference

A terrific reference on styles and how they are used is available at:

http://www.westciv.com/style_master/academy/css_tutorial/properties.html

Elements That Can Be Assigned Styles

A, ABBR, ACRONYM, ADDRESS, APPLET, B, BASEFONT, BDO, BIG, BLOCKQUOTE, BR, BUTTON, CENTER, CITE, CODE, DFN, DIR, DIV, DL, EM, FIELDSET, FONT, FORM, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, ISINDEX, KBD, LABEL, MAP, MENU, NOFRAMES, NOSCRIPT, OBJECT, OL, P, PRE, Q, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR.

Text styles:

Background styles:

Border styles:

Margin styles:

Padding styles:

Element type styles:

 

User interface:

Layout styles:

(we won't discuss these advanced layout topics in detail; see http://www.westciv.com/style_master/academy/positioning_tutorial/index.html)