Cascading Style Sheets
The Web has come a long way from its beginning.
At first, we were happy to link documents and add images to them. Then, tables gave us more control. And now we have cascading style sheets and the beginnings of dynamic HTML (DHTML).
Cascading style is one of the latest Web trends toward developing new ways to work with structure and layout of Web pages independently of their content, more interactivity, and better international support. CSS is part of the "official standards" put out by the W3C. Right now a dynamic page designed for IE won't work in Communicator, and vice versa.
Style sheets (also known as cascading style sheets or CSS) are styles groups, which are part of property groups that define how an HTML element appears in a Web browser--for instance, green, italic, and Arial. You can define styles either within an HTML document or in an external file attached to the HTML document. As an external file, a single style sheet can affect multiple pages--even a whole site. This makes page-wide or site-wide changes much easier to implement.
As the term cascading style sheets implies, more than one style sheet can be used on the same document, with different levels of importance. If you define conflicting styles for the same HTML tag, the innermost definition--the one closest to the tag--wins.
So how do style sheets work? Say you want to create a page where each instance of <h3> text is green, italicized, and Arial. Without CSS, you have to write the following HTML every time you used <h3>:
<h3> <em><font face="Arial" color="green">This is a green, italic, Arial H3 header.</font></em></h3>
But CSS lets you specify this style for all <h3> tags in a single step by defining a selector:
h3 { font-family: Arial; font-style: italic; color: green }
The selector (in this case, the <h3> tag) is followed by the style definition, which outlines the style for that selector.
Font-family: Arial has the same effect as <font face="Arial">
font-style: italic has the same effect as <em>; and color:
green has the same effect as <font color="green">
Once the style above is applied to the HTML document (next paragraph), every <h3> tag will come out green, italic, and Arial.
Return to the Top
How Does It Work
There are four ways to combine styles with HTML. The two simplest ways are by defining styles in the head or the body of an HTML document. You can also create a separate style sheet and attach it to the HTML file in two different ways.
-
Defining Styles in the Head of the Document
- easiest for one page
- place the selectors and their style definitions inside comment tags nested within <STYLE> tags:
<html>
<head>
<style type="text/css"> <!--h3 { font-family: arial; font-style: italic; color: green }--></style>
</head>
<body>
<h3>this is a green, italic, arial h3 header.</h3>
<p>
<h3>so is this.</h3>
</body>
</html>
- The type attribute of the <style> tag defines the type of style sheet being used--in this case, CSS. (The only other possibility is "text/javascript" for Netscape's proprietary JavaScript style sheets. In the future, other style sheet languages may be added.)
- The comment tags nested inside the <style> tags ensure that the styles won't cause errors in older browsers. Any browser that doesn't support the <style> tag will simply ignore the information inside.
- Defining Styles In-line
- for one page
- you can also define styles in the body of the document by adding the style attribute to an HTML tag. For instance, the following HTML code makes the first <H3> text (the one with the style attribute) green, italic, and Arial, but not the second:
<html>
<body>
<h3 style="font-family: arial; font-style: italic; color: green">this is a green, italic, arial h3 header.</h3>
<p>
<h3>this is an h3 header, but it's not green, italic, or arial.</h3>
</body>
</html>
- In most cases, this method defeats the purpose of using style sheets as global templates.
- Linking to an External Style Sheet
- for a website
- create a file called basic.css that contains just this text:
h3 { font-family: Arial; font-style: italic; color: green }
Next, start a new HTML document (call it basic.html), and add a
<LINK> tag that calls the style sheet in the document's head:
<html>
<head>
<link rel="stylesheet" type="text/css" href="basic.css" title="style1">
</head>
- The <LINK> tag tells the browser to find an external style sheet, that the style sheet is a CSS file, and that the name of that file is "basic.css". The file basic.css defines the styles in basic.html, so every <H3> tag you use later in the HTML document will have the green, italic, Arial style defined in basic.css:
<body>
<h3>this is a green, italic, arial h3 header.</h3>
<p>
<h3>so is this.</h3>
</body>
</html>
Return to the Top
Combining Styles
Often, a combination of methods is the best way to apply styles. For instance, a linked style sheet can help you maintain a consistent look and feel throughout your Web site. But if you want a certain page to have additional styles, you can also include styles in the head of that particular HTML document. Or if you want just one section of a page to look different, you might use in-line styles with a <DIV> tag.
Return to the Top
Define Styles
Whichever styles you use, you define them similarly. Give each selector a style definition using the following format:
h3 { font-family: Arial }
h3 is the selector (HTML tag)
font-family: Arial is its defined style
The definition is a combination of a property and its value, separated by a colon. Properties are the characteristics an element can have--such as font type, font size, or color--while values are specific traits those properties can have--such as Arial or red.
To include multiple properties in the same definition, simply separate them with semicolons:
h3 { font-family: Arial; font-style: italic; color: green }
To make a style easier to read, you can stack the properties:
h3 { font-family: Arial;
font-style: italic;
color: green }
And to define more than one value for a single property, just add them on, separated by commas:
h3 { font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: green }
The font-family property in the code above offers the browser several values to choose from; the browser will go down the line
until it finds a font face it recognizes.
Any HTML tag can be a selector, but sometimes you want to be more specific in your style definitions. For example, suppose you
have a table with many rows, and you want to format the rows four different ways. Using the <TR> tag as your selector limits you to one style definition, which would make all the rows look alike. This is where classes and IDs come in handy. Once you define a class or ID, you can attach it to any HTML tag within the document
to apply style, without limiting the tag itself to a particular style.
Define a class by giving it a name (always preceded by a period)and adding the standard style definition of properties and values inside curly brackets:
.periwinkle { color: #6699ff }
Once the style sheet containing the class is applied to the webpage, you can use the class within any HTML tag in the page:
<strong class="periwinkle">this is bold, periwinkle text.</strong>
This is much more versatile than using the <STRONG> tag as the selector, which would make every instance of strong text periwinkle.
IDs are used the same way, except they are preceded by a number sign (#) instead of a period:
#bright { font-weight: bolder; color: #00ff00 }
Add it to an HTML tag:
<p id="bright">This text is hard to read.</p>
Using an ID is like giving a selector a unique name, which comes in handy when you start working with scripts. (You'll need to identify
elements individually then.) But if you're sure you'll be sticking with style sheets and not venturing into scripting, the convention is to use
classes instead of IDs as selectors.
Return to the Top
Using Contextual Selectors
Nest elements in a selector to create more specific styles:
strong em { color: red }
This is called a contextual selector, because text coded with the <EM> tag will be colored red only in the context of the <STRONG> tag.
Ex: when nested inside it:
<strong>this is bold text, and <em>this is bold, italic, red</em>.
</strong> <em>this text is just italic.</em>
Grouping Selectors
Group selectors that share styles to reduce the size and redundancy of a style sheet. Separate them with commas:
h1, strong em, td { font-family: Arial;
color: blue; }
Now all the tags (<h1>, <em> text within a <strong> tag, and<td>) will use the same style of formatting (blue, Arial text). Of course, that's in addition to what they retain from their original HTML definition; for example, <h1> retains its size, and <strong> retains its boldness. And text that isn't surrounded by any of these tags is unaffected by the style.
If you want to give one of these selectors additional formatting, define it again:
h1, strong em, td { font-family: Arial;
color: blue }
h1 { font-style: italic }
Here, all these tags will be in blue Arial text, but <H1> will also be italic.
Return to the Top
Coding in Shorthand
You can also use shorthand in the style definition itself; for instance:
em { font: 12pt/14pt bolder Arial, Helvetica }
is shorthand for
em { font-family: Arial, Helvetica;
font-size: 12pt;
line-height: 14pt;
font-weight: bolder }
Note: some of these properties--for example, line-height--are holdovers from print publishing.
Return to the Top
Using <a> Pseudoclasses
Pseudoclasses can extend CSS to include properties of tags that aren't part of the HTML specification but that are supported by the browsers. For instance, the <a> tag does not have link, active, or visited attributes, but the browsers support different colors for links depending on their state. You can define <a> pseudoclasses using the colon character:
a:link { color: red }
a:visited { color: blue }
a:active { color: white }
The colors unvisited links red, visited links blue, and active links white.
Summary Example
h1, h2, h3, h4, h5 { color: red }
body { background-color: #cccccc; font-family: Arial, Helvetica, sans-serif }
p { line-height: 200% }
ul li { font-size: 70% }
.red { color: red }
.green { color: green }
.blue { color: blue }
#big { font-size: 120% }
#upper { text-transform: uppercase }
Code Interpretation
h1, h2, h3, h4, h5 { color: red } makes <h1> through <h5> headers red
body { background-color: #cccccc; font-family: Arial, Helvetica, sans-serif } colors the page's background gray and makes Arial the default font
p { line-height: 200% } defines text coded with the <p> tag as double-spaced (200 percent line-height)
ul li { font-size: 70% } shrinks <li> text within <ul> tags to 70 percent of their normal size
.red { color: red }.green { color: green }.blue { color: blue } create classes: the red class makes elements red…
#big { font-size: 120% }#upper { text-transform: uppercase } create two IDs: the big ID expands text to 120 percent of its normal size, and the upper ID shifts text to uppercase
The next step is to paste the following code into an HTML document and call it doc1.htm:
<html>
<head>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>welcome!</h1>
<h3>here is a list of my favorite colors:</h3>
<ul>
<span class="red"><li>red</span>
<span class="green"><li>green</span>
<span class="blue"><li>blue</span>
</ul>there are many other colors that i like, but these just happen to be some of the coolest.
</body>
</html>
Return to the Top
|
