www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons CSS Basics Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
In this lesson we will learn how to make our first style sheet. We will also get to know about the basic CSS model and it syntax. We will also learn to integrated CSS styles in our HTML web pages.

Many of the properties used in CSS are very similar to those used in HTML.

The syntax of a CSS style

The syntax of a CSS style consists of three parts:

selector,
property and
value :

selector { property: value }

The selector is usually an HTML element(tag) that we wish to define. For example, we can denfine a CSS style for our <p> tag as under:

p { color: orange }

The code above makes the content surrounding the <p> and </p> tags to be displayed in orange color.

How to Apply CSS to an HTML document

There are three ways to applying CSS to an HTML document. These methods are discussed in the following text:

1. In-line

The first method to apply CSS styles to HTML is by using the HTML style attribute.

Here is an example:

<html>
<head>
<title>CSS Tutorial </title>
</head>
<body>
<p style="color:orange">This paragraph is in orange color!</p>
</body>
</html>


Here is the output:

This paragraph is in orange color!

2. By using the <style> tag

The second method of applying CSS styles to an HTML web page is by using the HTML tag <style>.

Here is an example:

<html>
<head>
<title>CSS Tutorial!</title>
<style type="text/css">
p {
color: orange;
}
</style>
</head>
<body>
<p>This paragraph is in orange color!</p>
</body>
</html>

Here is the output:

This paragraph is in orange color!

Note that the output is the same, but there is an important point to remember here. Using the inline style we need to style every <p> element to make it appear in orange color, but in the case of the style tag we need only define it once and it gets applied to every <p> tag.

3. External (by linking to a style sheet .css file)

This is the recommended method and we will be using this method throughout this tutorial. In this method we define all our styles in a stand alone text file and save it with a .css extension. This .css file is then linked to the HTML file using the <link> HTML tag as under:

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

The above line of HTML code links the CSS file named styles.css. Notice that the path to our style sheet is indicated using the attribute href. The path either could be relative or absolute. The <link> tag must be inserted in the header section of the HTML code i.e. between the <head> and </head> tags.

When an HTML document is loaded in a web browser, the <link> tag tells the web browser to load the associated .css file and apply the styles to the HTML document.
The really smart thing is that several HTML documents can be linked to the same style sheet and the changes made to it will be reflected in all of the linked HTML documents.

Here is an example:

example.htm

<html>
<head>
<title>CSS Tutorial! </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>This paragraph is in orange color!</p>
</body>
</html>

style.css

p {
color: orange;
}

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

Open example.htm with your web browser and you will see the following output:

This paragraph is in orange color!

Next >>> Lesson No. 3: CSS Colors and Backgrounds




Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.