Logo - Ockfen.net
Spearheading Effective Designs

CSS: The Basics

CSS Tutorial

CSS: An Intro
CSS: The Basics
CSS: Class, ID, Span, and Div
CSS: Positioning

THIS SECTION COVERS:


Basic CSS Rules

CSS defined simply, is a collection of rules that tell a Web browser how an HTML tag should look. The rule consists of the SELECTOR followed by a DECLARATIONthat is enclosed with curly braces, { }. The declaration is made up of a PROPERTY with a VALUE, separated by a colon.

SELECTOR {Property:value; property:value;}
          or it can be thought of as:
HTML TAG {Attribute:value; attribute:value;}

Confused? Here's an example of a rule:

H1 {font-family:verdana,arial,sans-serif; color:#CCCCCC; font-weight:bold;}

This tells us:


This means:

For all H1 headings, the computer will select the first font it recognizes from the list (verdana, arial, sans-serif). If it doesn't recognize any of the specific fonts, it will use a default font in the sans-serif category. Font color will be #CCCCCC - gray, and the gray should be bolded.

TIPS:

More than one PROPERTY/VALUE can be listed in a rule:

H1 {text-align:center; font-family:arial,helvetica,sans-serif; font-size:30px; color:#009966;}

Including a semi-colon after the last value makes it easier to add more properties/values later.

If a font family name is two words, add a hyphen.

H4 {font-family: arial,helvetica,sans-serif;}

If it is more than 2 words, enclose with quote marks.

H4 {font-family: times,"times new roman",serif;}

To put breaks in rules for ease of reading, break after a semi-colon.

H1 {font-family:verdana,arial,sans-serif; color:#CCCCCC;
font-style:bold;}


Kinds of Style Sheets/Where Does This Information Go?

There are three kinds of CSS's:


EXTERNAL STYLE SHEET example:

body {background color:gray; margin:50px;}
H1 {text-align:left; font-family:arial,helvetica,sans-serif; font-size:30px; color:#CCCCCC; font-weight:bold;}
H2 {text-align:left; font-family:arial,helvetica,sans-serif; font-size:25px; color:#CCCCCC; font-weight:bold;}
P {text-align:left; font-family:arial,helvetica,sans-serif; font-size:12px; color:#CCCCCC;}

Reference an external style sheet between the opening HEAD and closing HEAD section of the HTML document using the following form where "stylesheet.css" is the name you've given to the style sheet and enclosing this rule with brackets:

LINK REL=stylesheet TYPE="text/css" HREF="stylesheet.css"

TIP:

Upload External Style sheets in ASCII, not binary, to a server.



INTERNAL/EMBEDDED STYLE SHEET example:

<html>
<head>
<title>Internal Style Sheet Example</title>
<style>>
<!--
<H1 {text-align:left; font-family:arial,helvetica,sans-serif; font-size:30px
color:#CCCCCC; text-weight:bold;}
P {text-align:left; font-family:arial,helvetica,sans-serif; font-size:12px;
color:#CCCCCC;}
-->
</style>
</head>

<body></body>
</html>



TIPS:

Adding a comment tag at the beginning of the style rules and the closing tag at the end hides styles from browsers that don't yet understand them.

GENERAL STYLE SHEET COMMENT TIPS:

/* opens a comment area within a style sheet, close the comment with a */. If the comment is only one line, start the comment line by typing two slashes, // and then type your comments.


INLINE/LOCAL rule:

Use an inline rule when only a small area needs to be changed or if you just want to experiment with CSS. Apply the rule in front of the element to be changed. Be sure to close the HTML tag.

<html>
<head>
<title>Inline/Embedded/Global/Local Rule </title>
</head>

<body bgcolor="gray">

<H1 STYLE="text-align:left; font-family:arial,helvetica,sans-serif; font-size:30px;
font-color:#CCCCCC; font-weight:bold;">Inline/Embedded/Local Style Rule</H1>

<P STYLE="text-align:left; font-family:arial,helvetica,sans-serif; font-size:12px;
font-color:#CCCCCC:">

This is an example of how you would use an inline/embedded/local style rule.
</P>

</body>
</html>



Rule Conflicts

If there are rule conflicts in style sheets, the following applies:


SELECTOR {Property:value !important;}


The Beauty of CSS

As the name Cascading Style Sheets implies, more than one style sheet can be used for the same document, which is a very powerful feature of CSS. Various audience needs can be met by adding a personal style sheet or editing the current one. Page appearance can be adjusted for human or technological handicaps, such as larger type for site-impaired individuals, or simply adjusting a font-style to someone's preference.

Understanding basic concepts of CSS is the beginning of having control over web page style not offered through conventional HTML. With CSS, changes can be made quickly and easily by editing the style sheet rather than page by page. This provides consistency throughout, one of the goals of a good web site.

These are among the things that make CSS a great tool for web authors. Once demystified, you'll love it!