Welcome to the third part of HTML class.

In this part, you will learn more about styling.
In fact, you will learn CSS, Cascading Style Sheets. 

This is an important way to style your HTML files quickly and is used by many Website-Programmers.



This is a regular HTML file that prints 'Hello World':






1
2
3
4
5
6
7
8
9
10
11
12
13





<html>

<head>
<style>

<style>
</head>

<body>
<h1>Hello World</h1>
</body>

</html>









Above the body on line 3 and 7 is a tag, that you have not used before, the HEAD tag.

In this tag you can see the STYLE tag, it is on lines 4 and 6.
This STYLE is used for CSS styling. 









1
2
3
4
5
6
7
8
9
10
11
12
13
14
15





<html>

<head>
<style>
H1 {
  color: red;
}
<style>
</head>

<body>
<h1>Hello World</h1>
</body>

</html>







Now I have added some content to the STYLE tag.


In the block below you can see the DECLARATION, this is the way a style is defined.

On the first line is the SELECTOR. You can choose any one of your tags, to add some styling.

On the second line is a curly bracket {. This starts the DECLARATION.
On the third line is now the style I want to change.

The first word is the PROPERTY.
The PROPERTY is like the keyword you used in the tags, before.
Like width or height.

After the PROPERTY always follows a double-point.

After the double-point you write the VALUE. At the end of the VALUE there is always a semi-colon ;.






1
2
3
4





H1
{
  color: red;
}







Styles can be done for all tags. Here it is done for the h1 title.



Exercise 1




Exercise 2




Exercise 3




Exercise 4

Here is a list of different PROPERTIES and a selection of possible VALUES.






Exercise 5




Exercise 6




Exercise 7

Copy the following code into your file (you don't need to copy the line numbers, just the text):






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15





<h1>CSS Pocket Reference</h1>
<p> When you're working with <em>CSS</em> and need a quick answer, <em>CSS Pocket Reference</em> delivers.
This handy, concise book provides all of the essential information you need to implement <em>CSS</em> on the fly.
Ideal for intermediate to advanced web designers and developers, the fourth edition is revised and updated vor <em>CSS3</em>, the latest version of the <em>Cascading Style Sheet</em> application.
Along with a complete alphabetical reference to <em>CSS3</em> selectors and properties you'll also find a short introduction to the key concepts of <em>CSS</em>.<br/><br/>
Based on <em>Cascading Style Sheet: The Definitive Guide</em>, this reference is an easy-to use cheat sheet of the <em>CSS</em> specifications you need for any task at hand.
</p>
<h2>This book helps you:</h2>
<ul>
<li>Quickly find and adapt the style elements you need </li>
<li>Learn how <em>CSS3</em> features complement and extend your <em>CSS</em> practices</li>
<li>Discover new value types and new <em>CSS</em> selectors</li>
<li>Implement drop shadows, multiple backgrounds, rounded corners, and border images</li>
<li>Get new information about transforms and transitions</li>
</ul>









Here are some different PROPERTIES and again a selection of possible VALUES.

Remember, if you have more than one curly bracket with values, this means that you can pick one VALUE from each curly bracket.


You have to stye now this text that you have copied into your file by changing the declarations of the tags.
You should do:

    

  1.  Underline the H1 tag and align it in the center

  2.  Make the H1 and the H2 title uppercase

  3.  Make the background color of the paragraph yellow

  4.  Make a solid 3px border only at the bottom and at the top of the paragraph

  5.  The text (font-style) in the paragraph should be italic

  6.  Underline all emphasized text (tag: <em>)

  7.  The word spacing of the list items should be 0.8em

  8.  The text in the paragraph should be aligned to the right


Try to find out, which of the PROPERTIES you have to use and play a bit around with them.
See the different effects of the VALUES.


Summary

Congratulation, you have now finished the third part of the HTML class.
Here is again a short summary of all the PROPERTIES and VALUES that you should know now.
But keep in mind, that there exist many more.






 color {red, green, blue, yellow, ...} 


 background-color {red, green, yellow, magenta, blue, ...} 


 border {1px, 2px, 3px, ...} {none, dotted, dashed, solid, double, inset, outset} {red, green, yellow, blue,...} 


 border-bottom {same as for border} 


 border-top {same as for border} 


 border-left {same as for border} 


 border-right {same as for border} 


 width {50px, 100px, 50%, 100%, ... } 


 height {50px, 100px, 50%, 100%, ... } 


  text-align {left, center, right, start, end} 


  text-decoration {none, underline, overline, line-through, blink} 


  text-transform {uppercase, lowercase, capitalise, none} 


  word-spacing {normal, 1px, 2px, 3px, ...} 


  font-weight {normal, bold, bolder, lighter, 100, 200, 300, ..., 900} 


  font-style {normal, italic, oblique} 


  font-size {xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, 5px, 10px, ...} 





Some of the PROPERTIES are followed by more than one curly bracket.
This means, that you can choose one VALUE from every bracked. For example:






1
2
3
4





H1
{
  border: 3px dashed green;
}