Introduction to CSS

CSS (cascading style sheets) is a stylesheet language that is used to define the presentation of a document written in a markup language such as HTML and XHTML, but the language can be applied to any kind of XML document. For example, it can be used to define the colors, fonts and layout of a web page. A cascading style sheet has a file extension of ".css".

The CSS specifications are maintained by the World Wide Cosortium (W3C).

There are 3 ways to apply CSS to HTML

Internal Style Sheets

An internal style sheet is only placed within the web page which they are intended for.

The styles are placed within the openning and closing <head> tags and the openning and closing <style> tags enclose all of the styles for the web page.

The following HTML and CSS code is an example of an internal style sheet that will make the text within the paragraphs on that web page red.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

<style type="text/css">
p
{
color: red;
}
</style>

</head>
<body>
<p>
the text in this paragraph will be red
</p>
<p>
the text in this paragraph is also going to be red
</p>
</body>
</html>

The above HTML and CSS code example will make the following paragraphs.

the text in this paragraph will be red

the text in this paragraph is also going to be red

External Style Sheets

External style sheets are styles that can be applied to as many web pages as you like that are on the same website. With external style sheets there are at least 2 documents: the document that the styles are on and the the web page that the styles apply to (of course you can apply the styles to multiple web pages on the same site).

The web page(s) need to link to the style sheet by using the following code within the openning and closing <head> tags.

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

Now open a new (blank) document and copy and paste below HTML code into the document and save it as "whatever.html".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>

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

</head>
<body>
<p>
the text in this paragraph is red
</p>
<p>
I now know HTML and CSS
</p>
</body>
</html>

After you have saved the above HTML code as "whatever.html", open another new (blank) document and copy and paste the following CSS code.

p
{
color: red;
}

Now upload both files to your website. The web page should have the following 2 paragraphs in it and the color of the text should be red.

note: if you are not connected to the internet, you should link to the style sheet something like: file:///C:/Documents/mystylesheet.css depending on where on your computer the file is located.

the text in this paragraph will be red

I now know HTML and CSS

In-line Styles

To use in-line styles you place the "style" attribute within the relevant HTML tag. The style attribute can contain any CSS property.

An in-line style can apply to a whole HTML element or it can apply to a selected area within that element. For example it can apply to a whole paragraph or it can apply to only a string of text within the paragraph.

The following HTML and CSS code shows you how to apply in-line styles.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>
</head>
<body>
<p style="color: red">
the text in this paragraph is red
</p>
<p>
this is the <span style="color: red">best CSS and HTML tutorial </span> available on the world wide web
</p>
</body>
</html>

The above HTML and CSS code will make a web page with the following 2 paragraphs.

the text in this paragraph is red

this is the best CSS and HTML tutorial available on the world wide web

Free Web Hit Counter By All Free Web Hosting Tools