CSS (Cascading Style Sheets) for Beginners

**rameshxavier** · 11-26-2008, 09:33 AM

This is tutorial/guide mainly for people who have minimal experience with CSS (Cascading Style Sheets) and want to learn a bit out about it. CSS is a stylesheet language that formats the presentation of a document written in a markup language (e.g. HTML, XHTML, XML). CSS has a number of advantages one of the main ones being the presentation of websites can be held in one place, therefore making it really simple to update webpages. Style sheets make sites load faster and doesn't use require much bandwith. CSS specifications are maintained by W3C (World Wide Web Consortium).

Adding stylesheets within the HTML file:

<html>
<head>
<title></title>
<style type="text/css">
body {
color: white;
background-color: #000000;
}
</style>
</head>

<body>
[etc...]
</html>
Style sheets in CSS is made up of rules, and each of these rules has three parts to it.

- the Selector (example: 'body') : specifies which part of the document will be affected by the rule

- the Property (example: 'color' and 'background-color') : specifies what aspect of the layout is being set

- the Value (example: 'white' and '#000000'): gives the value for the property

Note: color values can be defined using hexadecimal notation to learn more about this go to this website - HTML Colors

Grouping selectors and rules:

Instead of having this:

body {color: white}
body {background-color: #000000}
We can have this:

body { color: white;
background-color: #000000 }
Just by using ';' to separate the properties.

OR

Instead of having this:

H1 { font-style: bold }
H2 { font-style: bold }
H3 { font-style: bold }
We can have this:

H1, H2, H3 { font-style: bold }

Inserting a Style Sheet

There are a number of ways you can apply style sheets to a web page.

Inline styles:

To use inline styles you place a 'style' attribute in a HTML tag. The 'style' attribute can state any CSS information. Here is an example:

<p style=”color: blue; font-sizer: 12pt”>
What a nice sentence this is</p>
You can see how inside the 'style' attribute the style sheet language format is similar to the examples above. You still need a ';' to seprate the properties.

Internal Style Sheets:

Usually internal style sheets are placed in between the head tags in a HTML document. With the use of <style> tags CSS can be applied. An example on an internal style sheet:

<head>
<style type=”text/css”>
body {background-color: #900000;
text-family: arial;
text-size: 12pt}
</style>
</head>
Internal style sheets are usually used when the web master wants to give a certain look for a certain web page that differentiates from others in a web site.

External Style Sheets:

Probably the most popular way of applying style sheets, with external style sheets you create a separate document that contains all the CSS information. While in the HTML document <link> tags need to be placed so the browser can read the information from the style sheet document. The <link> tags need to placed in between the <head> tags.

Example:

<head>
<link rel= ”stylesheet” type=”text/css” href=”funkstyle.css” />
</head>
In the 'href' attribute you insert the name of your style sheet file and the browser will read the information in that file and format accordingly. Your style sheet file needs to be saved with the .css extension. The style sheet document doesn't need any <style> tags because it has already been saved as a CSS extension. A simple example of what a style sheet file can look like:

body {background-image: url(“image/discostu.jpg”);
font-family: arial;
font-size: 12pt}
p {color: blue;
font-family: aria}
h1 {font-size: 14pt}

Background Properties

In CSS background properties lets you set the background color for a web page and an image for the background. With the image background you are able to position the image, and also repeat the image horizontally or vertically.

Examples

Background Color:

body {background-color: blue} -> Color Name Value

body {background-color: #0000FF} -> Hexadecimal Values

body {background-color: rgb(0,0,255)} -> RGB Values
All of these properties do the same thing, they set the background color of the web page to blue. People have a choice of how they assign their value.

Note: A link to CSS Color Values

Background Image:

<style type="text/css">
body {background-image: url('waterbg.jpg')}
</style>
This basically assigns the image from the given URL, the URL is placed between brackets after the text 'url' as shown in the example.

Repeating a Background Image:

<style type="text/css">
body {background-image: url('waterbg.jpg');
background-repeat: repeat-x}
</style>

This background image is repeated horizontally, to repeat the image vertically simply replace repeat-x with repeat-y.

<style type="text/css">
body {background-image: url('waterbg.jpg');
background-repeat: repeat}
</style>
This repeats the image horizontally and also vertically.

Background Position:

The property for positioning images on backgrounds is; background-position. The values for background-position can be in the form of percentages (e.g. background-position: 100% 50%), length (e.g. background-position: 0px 30px), and keywords (e.g. background-position: right center). In all cases the horizontal position is specified first and the vertical position second. So for example the values 100% 0% will be positioned on the top right corner of the page.

Single Image on a Background:

<style type="text/css">
body { background-image: url('circle.gif');
background-repeat: no-repeat;
background-position: center; }
</style>
With this a single image, in this case a little circle would appear in the center of the page.

To have the image fixed at a certain point so it will not scroll with the rest of the page, just add this property to the body selector; background-attachment: fixed.

This link directs to a table that contains most background properties and values: CSS Background Properties Table

Import Style Sheets

This is another way of applying a style sheets to a web page, very similar to external style sheets. You need to have a separate CSS file that contains all the the CSS information.

<style type="text/css" media="all">
@import url("mystyle.css");
p {background-color: blue;}
</style>

**Perfection** · 12-12-2008, 09:33 AM

The program changes the background colour of a link when mouse is over the link. Tested in Internet Explorer browser.

<html>
<head>
<title>Changing background on hover using CSS Classes</title>
<style type="text/css">
.hlink {
display block;
width:150px;
height:20px;
background-color:white;
text-align:center;
text-decoration:none;
}
.hlink:hover {
color:white;
background-color:blue;
}
</style>

<html>
<body>

<a class="hlink" href="http://www.bizhat.com"><B><CENTER>Welcome to Bizhat</CENTER></B></a>

</body>
</html>

**Perfection** · 12-18-2008, 02:38 PM

border-width: 10px;
border-style: solid;
border-color: #333333;

And in shorthand:

Code:

border: 10px solid #333;

**delpi** · 12-21-2008, 09:53 AM

great tutorial, and helpful. thanx!

**Perfection** · 01-02-2009, 06:36 AM

The 'id' is used when the style to be applied is unique, .i.e., occurs once in the whole of the program code.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Learning CSS : id</TITLE>
  <link rel="stylesheet" href="css/style.css" 
type="text/css" media="screen,projection">
 </HEAD>

 <BODY>
  
<div id="footer">
    Copyright  &copy;  2009 BizHat.com. All Rights Reserved<BR>
    Designed and Hosted by 
    <a href="http://www.flashwebhost.com" target="blank">
    FlashWebHost.com</A>
</div>

 </BODY>
</HTML>

The above code occurs only once in the site code, So we use 'id' named 'footer'. The style will be defined in a file named style.css and stored in css directory at the root. Here 'a' defines the link text colour.

css/style.css

Code:

a
{
    color:#FFFFFF;
}

#footer 
{
    font-family: verdana;
    font-size:10pt;
    width:850px;
    margin:0 0 0 0;
    background:#3366CC;
    color:#FFFFFF;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
}

**ninjakatz** · 01-05-2009, 09:45 AM

thanks for the tips.

**rameshxavier** · 01-23-2009, 04:49 AM

Linking Style Sheets to HTML

There are many ways to link style sheets to HTML, each carrying its own advantages and disadvantages. New HTML elements and attributes have been introduced to allow easy incorporation of style sheets into HTML documents.

Linking to an External Style Sheet
Embedding a Style Sheet
Importing a Style Sheet
Inlining Style
The CLASS Attribute
The ID Attribute

Linking to an External Style Sheet

An external style sheet may be linked to an HTML document through HTML's LINK element:

Code: HTML

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>

The <LINK> tag is placed in the document HEAD. The optional TYPE attribute is used to specify a media type--text/css for a Cascading Style Sheet--allowing browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is also a good idea.

External style sheets should not contain any HTML tags like <HEAD> or <STYLE>. The style sheet should consist merely of style rules or statements. A file consisting solely of

Code: CSS

P { margin: 2em }

could be used as an external style sheet.

The <LINK> tag also takes an optional MEDIA attribute, which specifies the medium or media to which the style sheet should be applied. Possible values are

screen (the default value), for presentation on non-paged computer screens;
print, for output to a printer;
projection, for projected presentations;
aural, for speech synthesizers;
braille, for presentation on braille tactile feedback devices;
tty, for character cell displays (using a fixed-pitch font);
tv, for televisions;
all, for all output devices.

Multiple media are specified through a comma-separated list or the value all.

Netscape Navigator 4.x incorrectly ignores any linked or embedded style sheets declared with MEDIA values other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all.

The REL attribute is used to define the relationship between the linked file and the HTML document. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute, as in the first <LINK> tag in the example, defines a persistent style.

A preferred style is one that is automatically applied, such as in the second <LINK> tag in the example. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.

An alternate style is indicated by REL="Alternate StyleSheet". The third <LINK> tag in the example defines an alternate style, which the user could choose to replace the preferred style sheet.

Note that current browsers generally lack the ability to choose alternate styles.

A single style may also be given through multiple style sheets:

Code: HTML

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">

In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, one must use the same TITLE with each style sheet.

An external style sheet is ideal when the style is applied to numerous pages. With an external style sheet, an author could change the look of an entire site by simply changing one file. As well, most browsers will cache an external style sheet, thus avoiding a delay in page presentation once the style sheet is cached.

Microsoft Internet Explorer 3 for Windows 95/NT4 does not support BODY background images or colors from linked style sheets. Given this bug, authors may wish to provide another mechanism for including a background image or color, such as embedding or inlining the style, or by using the BACKGROUND attribute of the BODY element.

Embedding a Style Sheet

A style sheet may be embedded in a document with the STYLE element:

Code: HTML

<STYLE TYPE="text/css" MEDIA=screen>

</STYLE>

The STYLE element is placed in the document HEAD. The required TYPE attribute is used to specify a media type, as is its function with the LINK element. Similarly, the TITLE and MEDIA attributes may also be specified with STYLE.

Older browsers, unaware of the STYLE element, would normally show its contents as if they were part of the BODY, thus making the style sheet visible to the user. To prevent this, the contents of the STYLE element should be contained within an SGML comment (), as in the preceding example.

An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.

**rameshxavier** · 01-23-2009, 04:49 AM

Importing a Style Sheet

A style sheet may be imported with CSS's @import statement. This statement may be used in a CSS file or inside the STYLE element:

Note that other CSS rules may still be included in the STYLE element, but that all @import statements must occur at the start of the style sheet. Any rules specified in the style sheet itself override conflicting rules in the imported style sheets. For example, even if one of the imported style sheets contained DT {background: aqua}, definition terms would still have a yellow background.

The order in which the style sheets are imported is important in determining how they cascade. In the above example, if the style.css imported style sheet specified that STRONG elements be shown in red and the punk.css style sheet specified that STRONG elements be shown in yellow, then the latter rule would win out, and STRONG elements would be in yellow.

Imported style sheets are useful for purposes of modularity. For example, a site may separate different style sheets by the selectors used. There may be a simple.css style sheet that gives rules for common elements such as BODY, P, H1, and H2. In addition, there may be an extra.css style sheet that gives rules for less common elements such as CODE, BLOCKQUOTE, and DFN. A tables.css style sheet may be used to define rules for table elements. These three style sheets could be included in HTML documents, as needed, with the @import statement. The three style sheets could also be combined via the LINK element.

Inlining Style

Style may be inlined using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself) except for BASEFONT, PARAM, and SCRIPT. The attribute takes as its value any number of CSS declarations, where each declaration is separated by a semicolon. An example follows:

Code: HTML

<P STYLE="color: red; font-family: 'Courier New', serif"> This paragraph is styled in red with the Courier New font, if available.</P>

Note that Courier New is contained within single quotes in the STYLE attribute since double quotes are used to contain the style declarations.

Inlining style is far more inflexible than the other methods. To use inline style, one must declare a single style sheet language for the entire document using the Content-Style-Type HTTP header extension. With inlined CSS, an author must send text/css as the Content-Style-Type HTTP header or include the following tag in the HEAD:

Code: HTML

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Inlining style loses many of the advantages of style sheets by mixing content with presentation. As well, inlined styles implicitly apply to all media, since there is no mechanism for specifying the intended medium for an inlined style. This method should be used sparingly, such as when a style is to be applied on all media to a single occurrence of an element. If the style should be applied to a single element instance but only with certain media, use the ID attribute instead of the STYLE attribute.

The CLASS Attribute

The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:

Code: CSS

.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

These classes could be referenced in HTML with the CLASS attribute:

Code: HTML

<H1 CLASS=punk>Proprietary Extensions</H1>
<P CLASS=warning>Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers...

In this example, the punk class may be applied to any BODY element since it does not have an HTML element associated with it in the style sheet. Using the example's style sheet, the warning class may only be applied to the P element.

A good practice is to name classes according to their function rather than their appearance. The warning class in the previous example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color, or if the author wished to define an aural style for those using speech synthesizers.

Classes can be a very effective method of applying different styles to structurally identical sections of an HTML document. For example, this page uses classes to give a different style to CSS code and HTML code.

The ID Attribute

The ID attribute is used to define a unique style for an element. A CSS rule such as

Code: CSS

#wdg97 { font-size: larger }

may be applied in HTML through the ID attribute:

Code: HTML

<P ID=wdg97>Welcome to the Web Design Group!</P>

Each ID attribute must have a unique value over the document. The value must be an initial letter followed by letters, digits, or hyphens. The letters are restricted to A-Z and a-z.

Note that HTML 4.0 allows periods in ID attribute values, but CSS1 does not allow periods in ID selectors. Also note that CSS1 allows the Unicode characters 161-255 as well as escaped Unicode characters as a numeric code, but HTML 4.0 does not allow these characters in an ID attribute value.

The use of ID is appropriate when a style only needs to be applied once in any document. ID contrasts with the STYLE attribute in that the former allows medium-specific styles and can also be applied to multiple documents (though only once in each document).

**ngoccuong** · 04-02-2010, 02:23 AM

Thanks for all.

**chummi** · 07-17-2010, 02:38 PM

highly informative.. need to make sometime and go through all of this.. it could be of much more use if you could provide more code snippets that we can copy paste into a html editor and see for ourselves how things work.. :)