WEB DESIGN TUTORIAL HTML THE OF PART-023 FULL WEB DESIGN HTML

At first, Thank for my all Post Readers. Today HTML Full parts 22 post.( Full Web design tutorial To Html ) This is Full HTML Web Page in the Tutorial. you can learn a full HTML web design it. I hope so. Let's start...

Today's Subject is HTML Stylesheet

HTML Stylesheet

Cascading Style Sheets (CSS) describe how documents are presented on

screens, in print, or perhaps how they are pronounced. W3C has actively

promoted the use of style sheets on the Web since the Consortium was

founded in 1994.

Cascading Style Sheets (CSS) provide easy and effective alternatives to specify

various attributes for the HTML tags. Using CSS, you can specify a number

of style properties for a given HTML element. Each property has a name and

a value, separated by a colon (:). Each property declaration is separated by a

semi-colon (;).

Example

First let's consider an example of HTML document which makes use of

tag and associated attributes to specify text color and font size:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
Hello, World!
</body>
</html>

We can re-write above example with the help of Style Sheet as follows:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
Hello, World!
</body>
</html>

This will produce following result:

Hello, World!

You can use CSS in three ways in your HTML document:

 External Style Sheet - Define style sheet rules in a separate .css file

and then include that file in your HTML document using HTML

<link> tag.

 Internal Style Sheet - Define style sheet rules in header section of

the HTML document using <style> tag.

 Inline Style Sheet - Define style sheet rules directly along with the

HTML elements using style attribute.

Let's see all the three cases one by one with the help of suitable examples.

External Style Sheet

If you need to use your style sheet to various pages, then it’s always

recommended to define a common style sheet in a separate file. A cascading

style sheet file will have extension as .css and it will be included in HTML files

using <link> tag.

Example

Consider we define a style sheet file style.css which has following rules:

.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}

Here we defined three CSS rules which will be applicable to three different

classes defined for the HTML tags. I suggest you should not bother about how

these rules are being defined because you will learn them while studying CSS.

Now let's make use of the above external CSS file in our following HTML

document:

<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
This is red
This is thick
This is green
This is thick and green
</body>
</html>

This will produce following result:

This is red

This is thick

This is green

This is thick and green

Internal Style Sheet

If you want to apply Style Sheet rules to a single document only then you can

include those rules in header section of the HTML document using <style>

tag.

Rules defined in internal style sheet overrides the rules defined in an external

CSS file.

Example

Let's re-write above example once again, but here we will write style sheet

rules in the same HTML document using <style> tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
</style>
</head>
<body>
This is red
This is thick
This is green
This is thick and green
</body>
</html>

This will produce following result:

This is red

This is thick

This is green

This is thick and green

Inline Style Sheet

You can apply style sheet rules directly to any HTML element

using style attribute of the relevant tag. This should be done only when you

are interested to make a particular change in any HTML element only.

Rules defined inline with the element overrides the rules defined in an

external CSS file as well as the rules defined in <style> element.

Example

Let's re-write above example once again, but here we will write style sheet

rules along with the HTML elements using style attribute of those elements.

<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
This is red
This is thick
This is green
This is thick and green
</body>
</html>

This will produce following result:

This is red

This is thick

This is green

This is thick and green

Featured post

How to get 1000 up Visitor per video on your Youtube channel Make Money part 2