CSS introduction #Part 1
CSS is stand Cascading Style Sheets. CSS is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.
Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
Inline CSS
An inline CSS uses the style attribute of an HTML element.
Example
<h1 style="color:blue;">A Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
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>
An external style sheet is used to define the style for many HTML pages.
Example
HTML Code
To use an external style sheet, add a link to it in the <head> section of each HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Code
Here is what the "styles.css" file looks like:
body {
babody {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}ckground-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}