Inline Styling (Inline CSS)
Inline styling is used to apply a unique style to a single
HTML element. Inline styling uses the style attribute.
This example changes the text
color of the <h1> element to blue:
<h1 style="color:blue;">This is a
Blue Heading</h1>
Note: In previous topics we have used inline styles
Internal styling (Internal CSS)
Internal styling (Internal CSS)
Internal styling is used to
define a style for one HTML page.
Internal
styling is
defined in the <head> section of an HTML page, within a <style> element:
Sample 01
<html>
<head>
<style>
body {background-color:lightyellow;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<head>
<style>
body {background-color:lightyellow;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Sample 02:
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The CSS color property defines the text color to be used for the HTML element.
The CSS font-family property defines the font to be used for the HTML element.
The CSS font-size property defines the text size to be used for the HTML element.
Check Output
An
external style sheet is used to define the style for many pages. With an external
style sheet, you can change the look of an entire web site by
changing one file.
An external style sheet can be written
in any text editor. The file should not contain any html tags. The style sheet
file must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}
To use an external
style sheet, add a link to it in the <head> section of the HTML page
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Check Output
No comments:
Post a Comment