- How do you set the background colour of your website?
- How do you set a background image and repeat it horizontally?
- How do you set the font size of all paragraphs to be 14px?
- How do you underline text?
- What is a pseudo-class?
- How do you set the colour of all links on your website to be red?
- How do you set the roll-over colour of all links to be orange?
- What is the Box Model?
- What are the two ways we can increase space around content?
- What is the purpose of a 'div' tag?
- When is a 'class' more appropriate to use than an 'id'?
- 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
Example
This is a red page
* Method 2: Internal
Example
body {background-color: #FF0000;}
This is a red page
* Method 3: External
href="style/style.css" />
My document
...
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;
A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag.
}
5.
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 {
and
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
10. The purpose of a "div' tag is:
*are used to group and structure a document
and will often be used together with the attributes class and id.
*Whereasis 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.