How to use CSS?

More options for you.


General KnowledgeEnglish GrammarMathScienceIQ-TestQuiz-Test

CSS can be inserted into three locations.

Ways to embed CSS to HTML.

There are three ways to embed CSS to HTML document.
(i) Inline
(ii) Internal
(iii) External

Inline styles

To place a style attribute directly in an HTML element is call inline style.
an inline style has no any selector because it is embeded to HTML with the style attribute.
An inline style can not be reused.

Example of inline style.

HTML Editor

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center; color:red;"> This heading is styled. </h1>
<p style="font-size:20px; color:green;"> This paragraph is styled as font-size 20px, color green.</p>
</body>
</html>

Web Browser

This heading is styled.

This paragraph is styled as font-size 20px and color green.

Internal styles.

Internal style allow you to define a unique style for a single HTML page.
you can embed internal style rules in the header section of HTML document within <style> tag.

Example of internal style.

HTML Editor

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:red;
}
p {
font-size:20px;
color:green;
}
</style>
</head>
<body>
<h1> This heading is styled. </h1>
<p> This paragraph is styled as font-size 20px, color green.</p>
</body>
</html>

Web Browser

This heading is styled.

This paragraph is styled as font-size 20px and color green.

External style sheets.

An external style sheet is a separate file at where you can declare all the styles.
You can write an external style sheet in a text editor.
An external file must be saved with a .css extension.
Each page must make a reference to your external file inside the <link> tag.
Put the <link> element in <head> section of an HTML page.

Let's see how to set up an external style sheet inside the <link> tag.

Example

<head>
<link href="style.css" rel="stylesheet">
</head>



The way of the example below teach you how to write "style.css" file in a text editor.

Example

<style>
h1 {
text-align:center;
color:red;
}


p {
font-size:20px;
color:green;
}
</style>
HTML Editor

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1> This heading is styled. </h1>
<p> This paragraph is styled as font-size 20px, color green.</p>
</body>
</html>

Web Browser

This heading is styled.

This paragraph is styled as font-size 20px and color green.

More options for you.


General KnowledgeEnglish GrammarMathScienceIQ-TestQuiz-Test