CSS

CSS stands for Cascading Style Sheets. Styling a Web page means controling how it looks: color of text and backgrounds, type of font, size of the font, its alignment and much more. Cascading means that the styling that applies to an element will also apply to all the elements (unless overriden) that it contains.

There are three types of CSS.
- Inline CSS:The styling goes into the HTML element:
```
  <h1 style="background-color:cyan;">HELLO </h1>
```
  We have already done some inline styling. Each HTML element must be styled separately,.
- Internal CSS: A <style> element is put into the <head> section of the Web page.
  Now the same styling can apply to multiple HTML elements in the page.
- External CSS: A <link> element specifies an external file that contains styling information.
  The styling in the external file applies to any Web page that links to it.
Internal CSS. Let's look at a sample <style> element.
```
<style>
body { background-color : cyan;
       color : blue;
     }

h1 { background-color : pink;}

</style>
```
The <style> element contains rules. Each rule starts with a selector that says where the rule applies, then styling contained in braces. The selectors we are using now are HTML tag names. So the second rule above applies to ALL h1 headers. We will talk about other selectors later.

Make the Web page pg10.html. As always it should be in your public_html directory.

<!DOCTYPE html>
<html>
<head>

<style>
body { background-color : cyan;
       color : blue;
     }

h1 { background-color : pink;}

</style>

</head>

<body>
<h1>HELLO</h1>

<p> This is a small test.  </p>

</body>
</html>

Analysis: Both rules apply to the h1 element. The first rule applies because the h1 element is contained in the body element. The second rule applies since the h1 element is an h1 element. The background-color of the header is pink, because the second rule is more specific than the first rule. It applies only to h1 header elements. We say the second rule overrides the first rule. Finally, the color of the text in the header is blue because rule 1 applies and rule 2 does not specify a color for the text! For the paragraph element, only rule 1 applies because it is contained in the body element.
Make the Web page pg11.html.
It is exactly like pg10.html, but with one additional rule in the <style> element:
```
  p  {color : yellow; font-size : 200%;}
```
What do you expect about its appearence? Display it in the browser and check.