Layer on layer with z-index (Layers)

CSS operates in three dimensions - height, width and depth. In this lesson, we will learn how to let different elements become layers. In short, this means the order of which the elements overlap one another.

For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number.

Let us say we are playing poker and have a royal flush. Our hand can be presented in a way where each card has got a z-index:

In this case, the numbers follow on another (1-5) but the same result can be obtained by using 5 different numbers. The important thing is the chronological sequence of the numbers (the order).

The code in the card example could look like this:

 
 #ten_of_diamonds {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
 }

 #jack_of_diamonds {
  position: absolute;
  left: 115px;
  top: 115px;
  z-index: 2;
 }

 #queen_of_diamonds {
  position: absolute;
  left: 130px;
  top: 130px;
  z-index: 3;
 }

 #king_of_diamonds {
  position: absolute;
  left: 145px;
  top: 145px;
  z-index: 4;
 }

 #ace_of_diamonds {
  position: absolute;
  left: 160px;
  top: 160px;
  z-index: 5;
 }
 
 

Read More

Positioning of elements

With CSS positioning, you can place an element exactly where you want it on your page. Together with floats, positioning gives you many possibilities to create an advanced and precise layout.

The following will be discussed in this lesson:

• The principle behind CSS positioning
• Absolute positioning
• Relative positioning

The principle behind CSS positioning

Imagine a browser window as a system of coordinates:

The principle behind CSS positioning is that you can position any box anywhere in the system of coordinates.

Let's say we want to position a headline. By using the box model the headline will appear as follows:

If we want this headline positioned 100px from the top of the document and 200px from the left of the document, we could type the following in our CSS:

 
 h1 {
  position:absolute;
  top: 100px;
  left: 200px;
 }
 
 

The result will be as follows:

As you can see, positioning with CSS is a very precise technique to place elements. It is much easier than trying to use tables, transparent images or anything else.

Absolute positioning

An element which is positioned absolute does not obtain any space in the document. This means that it does not leave an empty space after being positioned.

To position an element absolutely, the position property is set as absolute. You can subsequently use the properties left, right, top, and bottom to place the box.

As an example of absolute positioning, we choose to place 4 boxes in each corner of the document:

 
 #box1 {
  position:absolute;
  top: 50px;
  left: 50px;
 }

 #box2 {
  position:absolute;
  top: 50px;
  right: 50px;
 }

 #box3 {
  position:absolute;
  bottom: 50px;
  right: 50px;
 }

 #box4 {
  position:absolute;
  bottom: 50px;
  left: 50px;
 }
 
 

Relative positioning

To position an element relatively, the property position is set as relative. The difference between absolute and relative positioning is how the position is being calculated.

The position for an element which is relatively positioned is calculated from the original position in the document. That means that you move the element to the right, to the left, up or down. This way, the element still obtains a space in the document after it is positioned.

As an example of relative positioning, we can try to position three pictures relatively to their original position on the page. Notice how the pictures leave empty spaces at their original positions in the document:

 
 #dog1 {
  position:relative;
  left: 350px;
  bottom: 150px;
 }
 #dog2 {
  position:relative;
  left: 150px;
  bottom: 500px;
 }

 #dog3 {
  position:relative;
  left: 50px;
  bottom: 700px;
 }
 
 

Read More

CSS Borders

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.

• border-width
• border-color
• border-style
• border

The width of borders [border-width]

The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels. The figure below illustrates the system:

The color of borders [border-color]

The property border-color defines which color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow" .

Types of borders [border-style]

There are different types of borders to choose from. Below are shown 8 different types of borders as Internet Explorer 5.5 interprets them. All examples are shown with the color "gold" and the thickness "thick" but can naturally be shown in other colors and thicknesses.

The values none or hidden can be used if you do not want any border.

Examples of defining borders

The three properties described above can be put together by each element and thereby produce different borders. To illustrate this, we will take a look at a document where we define different borders for <h1>, <h2>, <ul> and <p>. The result may not be that pretty but it illustrates some of the many possibilities:

 
 h1 {
  border-width: thick;
  border-style: dotted;
  border-color: gold;
 }

 h2 {
  border-width: 20px;
  border-style: outset;
  border-color: red;
 }

 p {
  border-width: 1px;
  border-style: dashed;
  border-color: blue;
 }

 ul {
  border-width: thin;
  border-style: solid;
  border-color: orange;
 }
 
 

It is also possible to state special properties for top-, bottom-, right- or left borders. The following example shows you how:

 
 h1 {
  border-top-width: thick;
  border-top-style: solid;
  border-top-color: red;

  border-bottom-width: thick;
  border-bottom-style: solid;
  border-bottom-color: blue;

  border-right-width: thick;
  border-right-style: solid;
  border-right-color: green;

  border-left-width: thick;
  border-left-style: solid;
  border-left-color: orange;
 }
 
 

Compilation [border]

As it is also the case for many other properties, you can compile many properties into one using border. Let us take a look at an example:

 
 p {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
 }
 
 

Can be compiled into:

 
 p {
  border: 1px solid blue;
 }
 
 

Read More

Margin and padding

Set the margin in an element

An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document).

As the first example, we will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.

The CSS code for this would look as follow:

 
 body {
  margin-top: 100px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 70px;
 }
 
 

Or you could choose a more elegant compilation:

 
 body {
  margin: 100px 40px 10px 70px;
 }
 
 

You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:

 
 body {
  margin: 100px 40px 10px 70px;
 }

 p {
  margin: 5px 50px 5px 50px;
 }
 
 

Set padding in an element

Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where all headlines have background colors:

 
 h1 {
  background: yellow;
 }

 h2 {
  background: orange;
 }
 
 

By defining padding for the headlines, you change how much filling there will be around the text in each headline:

 
 h1 {
  background: yellow;
  padding: 20px 20px 20px 80px;
 }

 h2 {
  background: orange;
  padding-left:120px;
 }
 
 

Read More

The Box Model

The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed:

The box model in CSS

The illustration above might seem pretty theoretical to look at, so let's try to use the model in an actual case with a headline and some text. The HTML for our example is (from the Universal Declaration of Human Rights):

 
 <h1>Article 1:</h1>

 <p>All human beings are born free
 and equal in dignity and rights.
 They are endowed with reason and conscience
 and should act towards one another in a
 spirit of brotherhood</p>
 
 

By adding some color and font-information the example could be presented as follows:

The example contains two elements: <h1> and <p>. The box model for the two elements can be illustrated as follows:

Even though it may look a bit complicated, the illustration shows how each HTML-element is surrounded by boxes. Boxes which we can adjust using CSS.

The properties which regulate the different boxes are: padding, margin and border.

Read More

CSS Links & Pseudo Classes

What is a pseudo-class?

A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag.

Let's look at an example. As you know, links are specified in HTML with <a> tags. We can therefore use a as a selector in CSS:

 
 a {
  color: blue;
 }
 
 

A link can have different states. For example, it can be visited or not visited. You can use pseudo-classes to assign different styles to visited and unvisited links.

 
 a:link {
  color: blue;
 }

 a:visited {
  color: red;
 }
 
 

Use a:link and a:visited for unvisited and visited links respectively. Links that are active have the pseudo-class a:active and a:hover is when the cursor is on the link.

We will now go through each of the four pseudo-classes with examples and further explanation.

Pseudo-class: link

The pseudo-class :link is used for links leading to pages that the user has not visited.

In the code example below, unvisited links will be light blue.

 
 a:link {
  color: #6699CC;
 }
 
 

Pseudo-class: visited

The pseudo-class :visited is used for links leading to pages that the user has visited. For example, the code below would make all visited links dark purple:

 
 a:visited {
  color: #660099;
 }
 
 

Pseudo-class: active

The pseudo-class :active is used for links that are active.

This example gives active links a yellow background color:

 
 a:active {
  background-color: #FFFF00;
 }
 
 

Pseudo-class: hover

The pseudo-class :hover is used when the mouse pointer hovers over a link.

This can be used to create interesting effects. For example, if we want our links to be orange and be italicized when the cursor is pointed at them, our CSS should look like this:

 
 a:hover {
  color: orange;
  font-style: italic;
 }
 
 

Example 1: Effect when the cursor is over a link

It is particular popular to create different effects when the cursor is over a link. We will therefore look at a few extra examples related to the pseudo-class:hover.

Example 1a: Spacing between letters

As you will remember, the spacing between letters can be adjusted using the property letter-spacing. This can be applied to links for a special effect:

 
 a:hover {
  letter-spacing: 10px;
  font-weight:bold;
  color:red;
 }
 
 

Example 1b: UPPERCASE and lowercase

In property text-transform, which can switch between upper- and lowercase letters. This can also be used to create an effect for links:

 
 a:hover {
  text-transform: uppercase;
  font-weight:bold;
  color:blue;
  background-color:yellow;
 }
 
 

The two examples gives you an idea about the almost endless possibilities for combining different properties. You can create your own effects - give it a try!

Example 2: Remove underline of links

A frequently asked question is how to remove the underlining of links?

You should consider carefully whether it is necessary to remove the underlining as it might decrease usability of your website significantly. People are used to blue underlined links on web pages and know that they can click on them. Even my mum knows that! If you change the underlining and color of links there is a good chance that users will get confused and therefore not get the full benefit of the content on your website.

That said, it is very simple to remove the underlining of links. the property text-decoration can be used to determine whether text is underlined or not. To remove underlining, simply set the value of text-decoration to none.

 
 a {
  text-decoration:none;
 }
 
 

Alternatively, you can set text-decoration along with other properties for all four pseudo-classes.

 
 a:link {
  color: blue;
  text-decoration:none;
 }

 a:visited {
  color: purple;
  text-decoration:none;
 }

 a:active {
  background-color: yellow;
  text-decoration:none;
 }

 a:hover {
  color:red;
  text-decoration:none;
 }
 
 

Read More

CSS Text Property

Formatting and adding style to text is a key issue for any web designer. In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text. The following properties will be described:

• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform

Text indention [text-indent]

The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 30px is applied to all text paragraphs marked with <p>:

 
 p {
  text-indent: 30px;
 }
 
 

Text alignment [text-align]

The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right orcentred. In addition to this, the value justify will stretch each line so that both the right and left margins are straight. You know this layout from for example newspapers and magazines.

In the example below the text in table headings <th> is aligned to the right while the table data <td> are centred. In addition, normal text paragraphs are justified:

 
 th {
  text-align: right;
 }

 td {
  text-align: center;
 }

 p {
  text-align: justify;
 }
 
 

Text decoration [text-decoration]

The property text-decoration makes it is possible to add different "decorations" or "effects" to text. For example, you can underline the text, have a line through or above the text, etc. In the following example, <h1> are underlined headlines, <h2> are headlines with a line above the text and <h3> are headlines with a line though the text.

 
 h1 {
  text-decoration: underline;
 }

 h2 {
  text-decoration: overline;
 }

 h3 {
  text-decoration: line-through;
 }
 
 

Letter space [letter-spacing]

The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width. For example, if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used.

 
 h1 {
  letter-spacing: 6px;
 }

 p {
  letter-spacing: 3px;
 }
 
 

Text transformation [text-transform]

The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code.

An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". There are four possible values for text-transform:

capitalize

Capitalizes the first letter of each word. For example: "john doe" will be "John Doe".

uppercase

Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE".

lowercase

Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe".

none

No transformations - the text is presented as it appears in the HTML code.

As an example, we will use a list of names. The names are all marked with <li> (list-item). Let's say that we want names to be capitalized and headlines to be presented in uppercase letters.

Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase.

 
 h1 {
  text-transform: uppercase;
 }

 li {
  text-transform: capitalize;
 }
 
 

Read More

CSS Fonts

In this lesson you will learn about fonts and how they are applied using CSS. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be described:

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

Font family [font-family]

The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found.

There are two types of names used to categorize fonts: family-names and generic families. The two terms are explained below.

Family-name

Examples of a family-name (often known as "font") can e.g. be "Arial", "Times New Roman" or "Tahoma".

Generic family

Generic families can best be described as groups of family-names with uniformed appearances. An example is sans-serif, which is a collection of fonts without "feet".

The difference can also be illustrated like this:

When you list fonts for your web site, you naturally start with the most preferred font followed by some alternative fonts. It is recommended to complete the list with a generic font family. That way at least the page will be shown using a font of the same family if none of the specified fonts are available.

An example of a prioritized list of fonts could look like this:

 
 h1 {font-family: arial, verdana, sans-serif;}
 h2 {font-family: "Times New Roman", serif;}
 
 

Headlines marked with <h1> will be displayed using the font "Arial". If this font is not installed on the user's computer, "Verdana" will be used instead. If both these fonts are unavailable, a font from the sans-serif family will be used to show the headlines.

Notice how the font name "Times New Roman" contains spaces and therefore is listed using quotation marks.

Font style [font-style]

The property font-style defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h2> will be shown in italics.

 
 h1 {font-family: arial, verdana, sans-serif;}
 h2 {font-family: "Times New Roman", serif; font-style: italic;}
 
 

Font variant [font-variant]

The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters. Confused? Take a look at these examples:

If font-variant is set to small-caps and no small-caps font is available the browser will most likely show the text in uppercase instead.

 
 h1 {font-variant: small-caps;}
 h2 {font-variant: normal;}
 
 

Font weight [font-weight]

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font.

 
 p {font-family: arial, verdana, sans-serif;}
 td {font-family: arial, verdana, sans-serif; font-weight: bold;}
 
 

Font size [font-size]

The size of a font is set by the property font-size.

There are many different units (e.g. pixels and percentages) to choose from to describe font sizes. In this tutorial we will focus on the most common and appropriate units. Examples include:

 
 h1 {font-size: 30px;}
 h2 {font-size: 12pt;}
 h3 {font-size: 120%;}
 p {font-size: 1em;}
 
 

There is one key difference between the four units above. The units 'px' and 'pt' make the font size absolute, while '%' and 'em' allow the user to adjust the font size as he/she see fit. Many users are disabled, elderly or simply suffer from poor vision or a monitor of bad quality. To make your website accessible for everybody, you should use adjustable units such as '%' or 'em'.

Below you can see an illustration of how to adjust the text size in Mozilla Firefox and Internet Explorer. Try it yourself - neat feature, don't you think?

Compiling [font]

Using the font short hand property it is possible to cover all the different font properties in one single property.

For example, imagine these four lines of code used to describe font-properties for <p>:

 
 p {
  font-style: italic;
  font-weight: bold;
  font-size: 30px;
  font-family: arial, sans-serif;
 }
 
 

Using the short hand property, the code can be simplified:

 
 p {
  font: italic bold 30px arial, sans-serif;
 }
 
 

The order of values for font is:

font-style | font-variant | font-weight | font-size | font-family

Read More

CSS Colors and backgrounds

In this lesson you will learn how to apply colors and background colors to your websites. We will also look at advanced methods to position and control background images. The following CSS properties will be explained:

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

Foreground color: the 'color' property

The color property describes the foreground color of an element.

For example, imagine that we want all headlines in a document to be dark red. The headlines are all marked with the HTML element <h1>. The code below sets the color of <h1> elements to red.

 h1 {
  color: #ff0000;
 }
 
 

Colors can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colors ("red") or rgb-values (rgb(255,0,0)).

The 'background-color' property

The background-color property describes the background color of elements.

The element <body> contains all the content of an HTML document. Thus, to change the background color of an entire page, the background-color property should be applied to the <body> element.

You can also apply background colors to other elements including headlines and text. In the example below, different background colors are applied to<body> and <h1> elements.

 body {
  background-color: #FFCC66;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 
 

Notice that we applied two properties to <h1> by dividing them by a semicolon.

Background images [background-image]

The CSS property background-image is used to insert a background image.

As an example of a background image, we use the butterfly below. You can download the image so you can use it on your own computer (right click the image and choose "save image as"), or you can use another image as you see fit.

To insert the image of the butterfly as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 
 

NB: Notice how we specified the location of the image as url("butterfly.gif"). This means that the image is located in the same folder as the style sheet. You can also refer to images in other folders using url("../images/butterfly.gif") or even on the Internet indicating the full address of the file:url("http://www.html.net/butterfly.gif").

Repeat background image [background-repeat]

In the example above, did you notice that by default the butterfly was repeated both horizontally and vertically to cover the entire screen? The propertybackground-repeat controls this behaviour.

The table below outlines the four different values for background-repeat.

Value	Description
background-repeat: repeat-x	The image is repeated horizontally
background-repeat: repeat-y	The image is repeated vertically
background-repeat: repeat	The image is repeated both horizontally and vertically
background-repeat: no-repeat	The image is not repeated

For example, to avoid repetition of a background image the code should look like this:

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 
 

Lock background image [background-attachment]

The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element.

A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page.

The table below outlines the two different values for background-attachment. Click on the examples to see the difference between scroll and fixed.

Value	Description
Background-attachment: scroll	The image scrolls with the page - unlocked
Background-attachment: fixed	The image is locked

For example, the code below will fix the background image.

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 
 

Place background image [background-position]

By default, a background image will be positioned in the top left corner of the screen. The property background-position allows you to change this default and position the background image anywhere you like on the screen.

There are numerous ways to set the values of background-position. However, all of them are formatted as a set of coordinates. For example, the value '100px 200px' positions the background image 100px from the left side and 200px from the top of the browser window.

The coordinates can be indicated as percentages of the browser window, fixed units (pixels, centimetres, etc.) or you can use the words top, bottom, center, left and right. The model below illustrates the system:

The table below gives some examples.

Value	Description
background-position: 2cm 2cm	The image is positioned 2 cm from the left and 2 cm down the page
background-position: 50% 25%	The image is centrally positioned and one fourth down the page
background-position: top right	The image is positioned in the top-right corner of the page

The code example below positions the background image in the bottom right corner:

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

Compiling [background]

The property background is a short hand for all the background properties listed in this lesson.

With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read.

For example, look at these five lines:

 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
 
 

Using background the same result can be achieved in just one line of code:

 background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
 
 

The list of order is as follows:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

If a property is left out, it will automatically be set to its default value. For example, if background-attachment and background-position are taken out of the example:

 background: #FFCC66 url("butterfly.gif") no-repeat;
 
 

These two properties that are not specified would merely be set to their default values which as you know are scroll and top left.

Read More

How does CSS work?

In this lesson you will learn how to make your first style sheet. You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document.

Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes. Let us look at a concrete example.

The basic CSS syntax

Let's say we want a nice red color as the background of a webpage:

Using HTML we could have done it like this:

 
 <body bgcolor="#FF0000">
 
 

With CSS the same result can be achieved like this:

 
 body {background-color: #FF0000;}
 
 

As you will note, the codes are more or less identical for HTML and CSS. The above example also shows you the fundamental CSS model:

But where do you put the CSS code? This is exactly what we will go over now.

Applying CSS to an HTML document

There are three ways you can apply CSS to an HTML document. These methods are all outlined below. We recommend that you focus on the third method i.e. external.

Method 1: In-line (the attribute style)

One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the red background color, it can be applied like this:

 <html>
   <head>
  <title>Example</title>
   </head>
   <body style="background-color: #FF0000;">
  <p>This is a red page</p>
   </body>
 </html>
 

Method 2: Internal (the tag style)

Another way is to include the CSS codes using the HTML tag <style>. For example like this:

 <html>
   <head>
  <title>Example</title>
  <style type="text/css">
    body {background-color: #FF0000;}
  </style>
   </head>
   <body>
  <p>This is a red page</p>
   </body>
 </html>
 

Method 3: External (link to a style sheet)

The recommended method is to link to a so-called external style sheet. Throughout this tutorial we will use this method in all our examples.

An external style sheet is simply a text file with the extension .css. Like any other file, you can place the style sheet on your web server or hard disk.

For example, let's say that your style sheet is named style.css and is located in a folder named style. The situation can be illustrated like this:

The trick is to create a link from the HTML document (default.htm) to the style sheet (style.css). Such link can be created with one line of HTML code:

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

Notice how the path to our style sheet is indicated using the attribute href.

The line of code must be inserted in the header section of the HTML code i.e. between the <head> and </head> tags. Like this:

 <html>
   <head>
  <title>My document</title>
  <link rel="stylesheet" type="text/css" href="style/style.css" />
   </head>
   <body>
   ...
 

This link tells the browser that it should use the layout from the CSS file when displaying the HTML file.
The really smart thing is that several HTML documents can be linked to the same style sheet. In other words, one CSS file can be used to control the layout of many HTML documents.

This technique can save you a lot of work. If you, for example, would like to change the background color of a website with 100 pages, a style sheet can save you from having to manually change all 100 HTML documents. Using CSS, the change can be made in a few seconds just by changing one code in the central style sheet.

Let's put what we just learned into practice.

Try it yourself

Open Notepad (or whatever text editor you use) and create two files - an HTML file and a CSS file - with the following contents:

default.htm

 <html>
   <head>
  <title>My document</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
  <h1>My first stylesheet</h1>
   </body>
 </html>
 

style.css

 body {
   background-color: #FF0000;
 }
 

Now place the two files in the same folder. Remember to save the files with the right extensions (respectively ".htm" and ".css")

Open default.htm with your browser and see how the page has a red background. Congratulations! You have made your first style sheet!

Read More

Types of CSS

Chapter 1 : Introduction to CSS

A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. As always you use your (X)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 (X)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 (X)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 editor such as “Notepad” or “Dreamweaver”. A CSS file contains no (X)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 (X)HTML file you want to style with the CSS file.

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

Or you can also use the @import method as shown below

<style type=”text/css”>@import url(Path To stylesheet.css)</style>

Either of these methods are achieved by placing one or the other in the head section as shown in example below.

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

or

<head>
<title><title>
<style type=”text/css”> @import url(Path To stylesheet.css)</style>
</head>
<body>

By using an external style sheet, all of your (X)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

Cascading Order

In the previous paragraphs, I have explained how to link to a css file either internally or externally. If you understood, than I am doing a good job. If not don’t fret, there is a long way to go before we are finished. Assuming you have caught on already, you are probably asking, well can I do both? The answer is yes. You can have both internal, external, and now wait a minute a third way? Yes inline styles also.

Inline Styles

I have not mentioned them until now because in a way they defeat the purpose of using CSS in the first place. Inline styles are defined right in the (X)HTML file along side the element you want to style. See example below.

<p style=”color: #ff0000;”>Some red text</p>

Some red text

Inline styles will NOT allow the user to change styles of elements or text formatted this way

So, which is better?

So with all these various ways of inserting CSS into your (X)HTML files, you may now be asking well which is better, and if I use more than one method, in what order do these different ways load into my browser?

All the various methods will cascade into a new “pseudo” stylesheet in the following order:

1. Inline Style (inside (X)HTML element)
2. Internal Style Sheet (inside the <head> tag)
3. External Style Sheet

As far as which way is better, it depends on what you want to do. If you have only one file to style then placing it within the <head></head> tags (internal) will work fine. Though if you are planning on styling multiple files then the external file method is the way to go.

Read More