An Overview of Cascading Style Sheets in HTML

/ Uncategorized / By

CSS or Cascading Style Sheets in HTML help ensure consistent standards across multiple pages of content on a website.

Cascading Style Sheets

A CSS (cascading style sheet) file allows you to separate your web sites HTML content from it’s style. As always you use your HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS.

At this point you have some choices of how to use the CSS, either internally or externally.

Internal Stylesheet

First we will explore the internal method. This way you are simply placing the CSS code within the <head></head> tags of each HTML file you want to style with the CSS. The format for this is shown in the example below.

<head>

<title><title>

<style type=”text/css”>

CSS Content Goes Here

</style>

</head>

<body>

With this method each HTML file contains the CSS code needed to style the page. Meaning that any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles.

External Stylesheet

Next we will explore the external method. An external CSS file can be created with any text or HTML .A CSS file contains no HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following links in the head section of every HTML file you want to style with the CSS file.

<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />

This is achieved by placing it in the head section as shown in example below.

<head>

<title><title>

<link rel=”stylesheet” type=”text/css”href=”style.css” />

</head>

<body>

By using an external style sheet, all of your HTML files link to one CSS file in order to style the pages. This means, that if you need to alter the design of all your pages, you only need to edit one .css file to make global changes to your entire website.

Here are a few reasons this is better.

  • Easier Maintenance
  • Reduced File Size
  • Reduced Bandwidth
  • Improved Flexibility

CSS Syntax

The syntax for CSS is different than that of HTML markup. Though it is not too confusing, once you take a look at it. It consists of only 3 parts.

selector { property: value }

The selector is the HTML element that you want to style. The property is the actual property title, and the value is the style you apply to that property.

Each selector can have multiple properties, and each property within that selector can have independent values. The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are separated by commas, and if an individual value contains more than one word you surround it with quotation marks. As shown below.

body {

background: #eeeeee;

font-family: “Trebuchet MS”, Verdana, Arial, serif;

}

CSS Classes

The class selector allows you to style items within the same HTML element differently. Similar to what I mentioned in the introduction about inline styles. Except with classes the style can be overwritten by changing out stylesheets. You can use the same class selector again and again within an HTML file.

To put it more simply, this sentence you are reading is defined in my CSS file with the following.

p {

font-size: small;

color: #333333

}

CSS Text Properties

Color

You can set the color of text with the following:

color: value;

Possible values are

color name – example:(red, black…)

hexadecimal number – example:(#ff0000, #000000)

RGB color code – example:(rgb(255, 0, 0), rgb(0, 0, 0))

Text Align

You can align text with the following:

text-align: value;

Possible values are

Left, right, center, justify

Examples:

This text is aligned left.

This text is aligned in the center.

This text is aligned right.

Text Decoration

You can decorate text with the following:

text-decoration: value;

Possible values are

none, underline, overline, line through, blink

Examples:

This text is underlined.

________________________

This text is overlined.

This text has a line through it.

Text Indent

You can indent the first line of text in an HTML element with the following:

text-indent: value;

Possible values are

Length, percentage

Examples:

This text is indented 10px pixels.

Text Transform

You can control the size of letters in an HTML element with the following:

text-transform: value;

Possible values are

none, capitalize, lowercase, uppercase

Examples:

This First Letter In Each Word Is Capitalized, Though It Is Not In My File.

THIS TEXT IS ALL UPPERCASE, THOUGH IT IS ALL LOWERCASE IN MY FILE.

this text is all lowercase. though it is all uppercase in my file.

CSS Fonts

Font-Family

You can set what font will be displayed in an element with the font-family property.

There are 2 choices for values:

family-name, generic family

If you set a family name it is best to also add the generic family at the end. As this is a priortized list. So if the user does not have the specified font name it will use the same generic family. (see below)

font-family: Verdana, sans-serif;

Font Size

You can set the size of the text used in an element by using the font-size property.

font-size: value;

There are a lot of choices for values:

xx-large, x-large, larger, large, medium, small, smaller, x-small, xx-small, length, % (percent)

Font Style

You can set the style of text in a element with the font-style property

font-style: value;

Possible values are

Normal, italic, oblique

Font Weight

You can control the weight of text in an element with the font-weight property:

font-weight: value;

Possible values are

Lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder

CSS Links

Below are the various ways you can use CSS to style links.

a:link {color: #009900;}

a:visited {color: #999999;}

a:hover {color: #333333;}

a:focus {color: #333333;}

a:active {color: #009900;}

Now lets take a look at what each one of the above link styles actually does.

a:link {color: #009900;}

The first on the list sets the color of a link when no event is occuring

a:visited {color: #999999;}

The second sets the color a link changes to, when the user has already visited that url

a:hover {color: #333333;}

The third sets the color a link changes to as the user places their mouse pointer over the link

a:focus {color: #333333;}

The fourth is primarilly for the same purpose as the last one, but this one is for users that are not using a mouse and are tabbing through the links via there keyboards tab key, it sets the color a link changes to as the user tabs through the links

a:active {color: #009900;}

The fifth on the list sets the color a link changes to as it is pressed.

Lets look at an example: Google

If your last visit to Google is not stored in your cache than the above link to google is blue, if you have already been to google then the link should be grey. if you mouseover or tab through the links, the link will change to dark grey, and last but not least if you click and hold the link without releasing it you will see it return back to the original blue color.

You must declare the a:link and a:visited before you declare a:hover. Furthermore, you must declare a:hover before you can declare a:active.

Using the above code will style all links on your web page, unless you declare a seperate set of link styles for a certain area of your webpage.

CSS Backgrounds

Background

You can style the background of an element in one declaration with the background property.

background: #ffffff url(path_to_image) top left no-repeat fixed;

Values:

Attachment, color, image, position, repeat

Background Attachment

If you are using an image as a background. You can set whether the background scrolls with the page or is fixed when the user scrolls down the page with the background-attachment property

background-attachment: value;

Values:

Fixed, scroll

Background Color

You can specifically declare a color for the background of an element using the background-color property.

background-color: value;

Values:

color name, hexadecimal number, RGB color code, transparent

Background Image

You can set an image for the background of an element using the background-image property.

background-image: url(path_to_image);

Values:

url, none

Background Position

You can position an image used for the background of an element using the background-position property.

background-position: value;

Values:

top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos

Background Repeat

You can set if an image set as a background of an element is to repeat (across=x   and/or   down=y) the screen using the background-repeat property.

background-repeat: value;

Values:

no-repeat, repeat, repeat-x, repeat-y

Further Reading

A good site for learning CSS is http://www.w3schools.com/css/css_intro.asp