CSS - What is it and Why?

 

What is CSS?

CSS stands for Cascading Style Sheets. As you will soon see, there are other ways besides external style sheets to apply styles. The cascading portion of the name refers to the way that the three types of styles are applied. A style applied to the <P> tag in the HEAD section will apply to all <P> tags in the document. A style applied to a <BODY> tag will affect all tags within the BODY section. And, a style applied to a <TABLE> tag will apply to the <TR> and <TD> tags. In other words, the styles cascade down to the lower level or are inherited by the child level from the parent level. (Parent to child inheritance is a common topic in programming.) Styles can also be applied at the lower levels, and they will override the styles applied at a higher level. For example, if a style element is applied, it will take precedence over an external style sheet. We will learn more about this later.

 

Why do we use CSS?

The main reason that we use CSS is that it makes it really easy to apply the same design principles to every page in a website. With the style element and external style sheets, you can set styles for every instance of a tag. For example, every <h1> tag can be set to a specific font, font size and font color with one line of code. In addition, deprecated HTML tags (<font>, <b>, <i>, etc.) are still widely used in HTML 4.0, but they may not be supported in the next version of HTML. The style attribute replaces the deprecated tags and provides access to even more properties that control how HTML elements appear on a Web page. Styles include margins, text indents, font families, font sizes, font styles, colors, backgrounds, etc. We will learn the syntax (the rules) for applying the styles and three different ways to apply them. The three ways that we will apply styles are:

 

Style Attribute

The style attribute, the lowest-level style, is coded in individual HTML tags and applies only to the contents of the tag. Because the <FONT> tag is deprecated, we have to use other tags to do the work that tag did previously. One tag that you can use is the <SPAN> tag with various styles assigned to it.
For example: <SPAN style="color: purple">text to color</SPAN>.
The syntax for the style attribute is:

<tag style="property: value"> or <tag style="property: value; property: value">
Examples: <P style="font-family: Arial"> or <P style="font-family: Arial; font-size: 12pt">
Note that the property is followed by a colon (:) and multiple styles are separated by a semi-colon(;). The semi-colon can be omitted for the last style applied or when there is only one style being applied.

Here are some of the styles that you can apply:

Property Value Description of Property Examples
margin
margin-left
margin-right
margin-top
margin-bottom		 100px, 0.5in, 40mm, 14cm Specifies the size of the margin(s). The margin property sets all four margins. <P style="margin: 100px">
padding
padding-left
padding-right
padding-top
padding-bottom		 10px, 0.25in, 4mm, 1cm Specifies the space between the margin and the text. The padding property sets all four paddings. <P style="padding: 10px">
text-indent 100px, 0.5in, 40mm, 14cm Specifies the amount to indent the first line of text. <P style="text-indent: 100px">
text-align left, center, right or justify. Specifies the alignment. Replaces the <CENTER> tag and the ALIGN attribute in the <P> tag. <P style="text-align: center">
vertical-align top, middle, bottom, etc. Specifies the vertical alignment. <TD style="vertical-align: top">
position
   top
   bottom
   left
   right
   z-index		 absolute, relative,
a distance, e.g., 25px,
 
 
 
a 3-D position, e.g., 0.		 Positions an object on the screen at a specific place. Can be used to stack objects with z-index: 0 at the bottom layer. <IMG style="position: absolute; bottom: 25px; right: 25px;" SRC="image1.gif">
<IMG style="position: absolute; top: 25px; left: 25px; z-index: 0" SRC="image1.gif">
font-family Verdana, Arial, Helvetica, Geneva, sans-serif, Times New Roman, Georgia, Times, serif, cursive, etc. Specifies which font to apply. It may be specific, e.g., Arial, or generic, e.g., serif, sans-serif, or cursive. Replaces the FACE attribute in the <FONT> tag. <P style="font-family: Arial">
<H1 style="font-family:sans-serif">
font-size 16pt., 300%, 0.5in., 40mm, 14cm, xx-small, x-small, small, medium, large, x-large, xx-large, 3em (3 times the size), 2ex (2 times the height), etc. Specifies font size to apply. Replaces the SIZE attribute in the <FONT> tag. <P style="font-size: 16pt.">
font-weight normal, bold, bolder, lighter, or 100-900 Specifies the font weight to apply. Replaces the <B> tag. <P style="font-weight: bold">
font-style normal, italic (for serif fonts), or oblique (for sans-serif fonts). Specifies the font style to apply. Replaces the <I> tag. <P style="font-style: italic">
text-decoration underline, line-through, overline, or blink. Specifies a special text effect. Replaces the <U> tag, <BLINK> tag, etc. <P style="text-decoration: underline">
text-transform capitalize, uppercase, or lowercase. Transforms text from lowercase to uppercase, etc. <P style="text-transform: uppercase">
color red, green, blue, #FF0000, #00FF00, #0000FF,
rgb(255,0,0), or
rgb(100%, 0%, 0%).		 Assigns a color to text, etc. Replaces the COLOR attribute in the <FONT> tag. <P style="color: #FF0000">
background-color red, green, blue, #FF0000, #00FF00, #0000FF,
rgb(255,0,0), or
rgb(100%, 0%, 0%).		 Assigns a background color. Replaces the BGCOLOR attribute in the <BODY> and <TR>tags. <BODY style="background-color: #FFFFFF">
background-repeat
background-repeat-x
background-repeat-y		 url(images/picture1.gif) Tiles an image in the background. The background-repeat property repeats an image both vertically and horizontally. Repeat-x repeats across the page and repeat-y repeats down the page. Replaces the BACKGROUND attribute in the <BODY> tag. <BODY style="background-repeat: url(images/picture1.gif">
border-style solid, double, dotted, dashed, ridge, groove, outset, or inset. Identifies the type of border to place around an element on the page. <P style="border-style: solid">
border-width 4pt., 0.25in., 4mm, .5cm, etc. Specifies the size of the border to place around an element on the page. <P style="border-width: 4pt">
border-color red, green, blue, #FF0000, #00FF00, #0000FF,
rgb(255,0,0), or
rgb(100%, 0%, 0%).		 Specifies the color of the border to place around an element on the page. Replaces the BORDERCOLOR attribute in the <TABLE> tag. <P style="border-color: #FF0000">
list-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, inside, outside, or url(image1.gif). Creates a list and allows specification of the type of bullet. Not supported in Netscape. The bullet can also be an image. <P style="text-decoration: underline">
Styles can be combined in a single tag. Separate multiple styles within the same tag with a semi-colon (;).
For example: <P style="font-family: Arial; font-size: 12pt">

 

Top | Style Attribute | Style Element | External Style Sheets | Week 15

 

Style Element

The style element must be coded in the HEAD section of the Web page. When you apply a style in the style element, it applies to every instance of the tag in the document - it cascades throughout the document. It can be overridden with the use of the style attribute at the tag level.
The syntax for the style element is:

SELECTOR {property: value;} or SELECTOR {property: value; property: value; property: value;}
Note the use of the semi-colon (;) at the end of the style and the curly braces ({ }) surrounding the style. The braces are the same as those used to surround JavaScript functions, which are also coded in the HEAD section. The comment codes (<!-- and -->) are included in the code to hide it from older browsers that do not support styles.

An example of how to code the selector in the HEAD section using the <STYLE> tag:
<STYLE TYPE=text/css>
<!- -
H1 {font-family: Arial; font-size: 18pt;}
H2 {font-family: Arial; font-size: 16pt;}
- ->
</STYLE>

In addition to the tag selector shown above, there are Class Selectors, ID Selectors and Pseudo-Classes.
Class selectors begin with a period (.) and are coded in the HEAD section and applied in the BODY section:
HEAD section: .large {font-size: 48pt;}
BODY section: <P CLASS=large>.

ID selectors are a unique name for an element. The name must begin with a pound sign (#), be in uppercase or lowercase letter, be alphanumeric, and can only identify one element.
Example:
HEAD section: #small {font-size: 6pt;}
BODY section: <P ID=small>.

Pseudo-classes use a selector followed by a colon (:) and a pre-determined pseudo-class name. They are case-sensitive. Examples are shown below.

Pseudo-Class What it does Examples to code in the HEAD section
:hover Changes the element when the mouse is over it. A:hover {color: #0000FF;}
:active Changes the element when the mouse is clicked. A:active {color: #FF0000;}
:focus Changes the element when the element is ready for keyboard input. A:focus {color: #000000;}
:link Changes the appearance of a link. A:link {color: #0000FF;}
:visited Changes the appearance of a visited link. A:visited {color: #FF0000;}

 

Top | Style Attribute | Style Element | External Style Sheets | Week 15

 

External Style Sheets

An external style sheet is coded much like the style element, but it doesn't use the <STYLE> tag, and it is saved in a separate document with a .CSS extension. Note: there is no HEAD or BODY section and no <HTML> tags.
An example of how to code an external style sheet:

/* STYLESHEET.CSS */
H1 {font-family: Arial; font-size: 18pt;}
H2 {font-family: Arial; font-size: 16pt;}

The syntax (except for the <STYLE> tags, which are not coded) is the same as for the style element. So, why have external style sheets? To save time. External style sheets can be applied to multiple documents, enabling you to use the same fonts and margins on all of your web pages. To use the external style sheet on a Web page, you must link to it or import it. Because the import rule is not supported by Netscape Navigator, it is best to use the <LINK> tag.

The <LINK> tag is coded in the HEAD section. You may apply multiple external style sheets. If two or more external style sheets contain the same property, the last external style sheet applied will have precedence.
An example of a <LINK> tag:

<LINK HREF=stylesheet.css TYPE=text/css REL=stylesheet>

To use the import rule in the HEAD section:

<STYLE TYPE=text/css>
<!- -
@import url(stylesheet.css)
- ->
</STYLE>

 

Good resources for CSS: HTML Goodies and CSS Pointers Group

Top | Style Attribute | Style Element | External Style Sheets | Week 15