Cascading style sheets

You can learn Css only 2 Lessons.

lesson1 lesson2

Css Introduction

CSS stands for Cascading Style Sheets. It is a language

designed to specify the overall appearance of webpages

as well as the appearance and structure of the text and

elements such as images and buttons on webpages and

their layout. Styles can be specified with CSS using

internal style sheet definitions which are placed right

into HTML/XHTML code or in external files.

Inline

In-line styles are plonked straight into the HTML tags using the style attribute.

They look something like this:

Example:

<p style="color:sienna;margin-left:20px">This is a Asad
website.</p>

This will make that specific paragraph blue.

But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so

in-line styles should be avoided wherever possible.

Internal

Embedded, or internal, styles are used for the whole page. Inside the head element, the style tags surround all of the styles for

the page.

Example:

Asad website

<head>
<style>

hr {color:sienna;}

p {margin-Right:30px;}

body {background-image:url("images/back50.grf");}
</style>

</head>

This will make all of the paragraphs in the page blue and all of the links red.

Although preferable to soiling our HTML with inline presentation, it is similarly usually preferable to keep the HTML and the CSS files separate, and so we are left with our savior.Example

<html>
<head>
<style type="text/css">
p {color: red}
</style>
</head>
<body>
<p>
The text in this paragraph will be green.
</p>
</body>
</html>

Run . . . .

External

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:

Example:

p {

color: blue;

}

a {

color: red;

}

2nd Example

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

If this file is saved as “style.css” in the same directory as your HTML page then it can be linked to in the HTML like this:

Example:

Asad website

<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
<p>
The text in this paragraph will be blue.
</p>

</body>
</html> . . . .

My web page

stylesheet code

The code from style1.css:
p {color:blue}

Next >>>