Associating style sheets

There are three ways to associate style sheet with HTML document. The most commonly used methods are inline css and external css.

Embedded style sheet

Embedded style sheet are placed within the HTML document by defining it between … tags by using

Example of embed a style sheet
<!doctype html>
<html>
<head>
<title> embed css</title>
<style>
p {
color: green;
letter-spacing: 1em;
test-align: center;
height: 10px;
width: 50px;
font-size: 5px;
font-family: times, serif;
background-color: red;
}
</style>
</head>
<body>
<p> Example of embed css</p>
</body>
<html>
Inline stylesheet

Apply properties and values to a single element by using the style attribute in the element.

Syntax of inline stylesheet
element style atterbute = "property: value" 

element style attribute = "property: value; property: value" 
Example of inline stylesheet
<!doctype>
<html>
<head>
<title> inline css</title>
</head>
<body>
<p style="color: red">
The style attribute is used for inline style definitions. All stylesheet definitions are enclosed in quote marks. Semicolons separate the style definitions.
A colon and its value follow each style definition.
</p>
</body>
</html>

To add multiple properties, separate with semicolon.

<!doctype>
<html>
<head>
<title> multiple properties </title>
</head>
<body>
<p style ="color: red; margin:2em">
The style attribute is used for inline style definitions. All stylesheet definitions are enclosed in quote marks. Semicolons separate the style definitions.
A colon and its value follow each style definition.

</p>
</body>
</html>

Inline style definitions can be applied to any of the tag within and including tag.

Leave a Reply