CSS stands for Cascading Style Sheets.
CSS describes how the HTML elements are displayed on screen, paper, or in other media.
CSS saves a lot of work It can also control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
- Inline - by using the style attribute in HTML elements
- Internal - by using a <style> element in the <head> section
- External - by using an external CSS file
An inline CSS is used to implement a unique style for an HTML element.
An inline CSS uses the style attribute of an HTML element
This example sets the text color of the <h1> element in blue:
Example -
<p style="color:blue;">This is a Blue Heading</p>
Internal CSS
An internal CSS is used to define the style for an HTML page.
An internal CSS is defined in the <head> section of an HTML page within a <style> element:
Example -
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define style for many HTML pages.With an external style sheet, you can change the look of a whole web site, by changing a file!
To use the external style sheet, add a link to the <head> section of the HTML page:
Example -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
style.css
body {
background-color: powderblue;}
h1 {
color: blue;}
p {
color: red;}
0 comments:
Post a Comment