CSS Tutorials

1. How do you set the background colour of your website?
   
2. How do you set a background image and repeat it horizontally?
3. How do you set the font size of all paragraphs to be 14px?
4. How do you underline text?
5. What is a pseudo-class?
6. How do you set the colour of all links on your website to be red?
7. How do you set the roll-over colour of all links to be orange?
8. What is the Box Model?
9. What are the two ways we can increase space around content?
10. What is the purpose of a 'div' tag?
11. When is a 'class' more appropriate to use than an 'id'?
12. What is a floating element and when is it useful?

Answers:

1. simply the background colour can be achieved by:

body {background-color: #FF0000;}



There are 3 methods of apply CSS code to a HTML document, they are:



* Method 1: In-line



	  

		

	  

	  

		
This is a red page

	  

	



* Method 2: Internal





	  

		

		

	  

	  

		
This is a red page

	  

	



* Method 3: External



href="style/style.css" />

	



	  

		

		

	  

	  

	  ...



2. background-repeat: repeat-x

The image is repeated horizontally



3.

p {font-size: 1em;}

There is one key difference between the four units above. The units 'px' and 'pt' make the font size absolute, while '%' and 'em'

allow the user to adjust the font size as he/she see fit. Many users

are disabled, elderly or simply suffer from poor vision or a monitor of

bad quality. To make your website accessible for everybody, you should use adjustable units such as '%' or 'em'. 	





4.

h1 {

		text-decoration: underline;

	}



5. A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag.



6.

a {

		color: red;

	}



7.





8. The box model in CSS describes the boxes which are being generated for

HTML-elements. The box model also contains detailed options regarding

adjusting margin, border, padding and content for each element. The

diagram below shows how the box model is constructed:















9. increase the margins of the webpage around the content. Example is:





body {

		margin-top: 100px;

		margin-right: 40px;

		margin-bottom: 10px;

		margin-left: 70px;

	}



10. The purpose of a "div' tag is:

*  and 
 are used to group and structure a document

and will often be used together with the attributes class and id.

*Whereas  is used within a block-level element as seen in the previous example,

 
 is used to group one or more block-level elements.



11. Class is more than appropriate to use than ID when, you want to divide the groups and assign a class to each link. Which then after we can define the special properties for links for example changing the individual background colours.



12. A floating element would be useful when you want the text wrap to go around a picture and the picture either floats to the left or right. They can also be used for columns in a document, when creating columns and there is more than one floating the columns makes it neat when dealing with large amounts of text.