CSS stands for Cascading Style Sheet. It sets the style of a document. The body of an HTML document contains the text, images, and links. The head of the document contains style information that tells the web browser about the appearance of each element.
HTML uses angle brackets < > to surround tags. In CSS you use curly brackets { } to surround tags.
To set the style of an element you write the tag name, opening curly bracket, attribute, colon, value, semi colon. Once all the attributes are listed, you add a closing curly bracket.
It looks like this: tag { attribute: value; attribute: value; }
or p { font-family: georgia; color: blue; }
You can set the color of the background or text. You can use a color name such as red, blue, white, or green. To find a color name visit HTML Color Names
The CSS code to set the background color of the web page look like this: body { background-color: aliceblue; }
The CSS code to set the font color of a paragraph look like this: p { color: navy; }
| dodgerblue | aliceblue | darkviolet | lavender | magenta |
| pink | lime | palegreen | orangered | peachpuff |
If you want to use shades of colors you need to type in a special code called a hex code. It looks like this #A60000. Every color has a code. To find the hex code for a color visit the Color Scheme Designer.
The CSS code to set the background color of the web page look like this: body { background-color: #FDE1DD; }
The CSS code to set the font color of a paragraph look like this: p { color: #FDE1DD; }
| #FFAD00 | #FFD273 | #A67000 | #A6A600 | #FFFF00 | #FFFF73 |
| #870047 | #E768AB | #D0006E | #DDFB3F | #CFF700 | #87A000 |
| #A101A6 | #CF5FD3 | #68006C | #0A64A4 | #65A5D1 | #03406A |
You can set the width of an element. Width can be measured in pixels (px). A pixel is a dot on your screen. The average computer screen is about 1024 pixels wide or 1024px. However, you might want to make your web page a bit narrower, for those people using tablets, notebooks, or other devices with smaller screens. The CSS code looks like this: body { width: 800px; }
You need to set the font you want to use for your text. If you do not set a font, the web browser will use a default font. This is often Times New Roman.
Unlike a word processing program, you cannot pick from hundreds of fonts. Instead, you must pick web safe fonts. Some examples are Arial, Helvetica, Courier New, Georgia, Book Antiqua, Impact, Palatino linotype, Garamond, Goudy Old Style, Comic Sans ms, Rockwell, and Lucida Console.
The CSS code looks like this: p { font-family: Arial; }
There are several values you can use to set the font size. This can make things confusing. You can use percent (%), points (pt), pixels (px), and ems (em).
In this assignment, you are going to use percent to set the size of text. 100% is the default text size. A number below 100%, such as 80% is going to be smaller. A number larger than 100% , such as 150% is going to be taller.
The CSS code looks like this: h1 { font-size: 200%; } h2 { font-size: 150%; } p { font-size: 100%; }
Line height sets the space between each line of text. Similar to font size, 100% is the default line spacing. To increase the white space between each line, set the line height to a number greater than 100%, such as 125%. The CSS code looks like this: p { line-height: 125%; }
You can align text and images. Text can be aligned to the left, center, and right. The CSS code used to align text is text-align. For example: h1 { text-align: center; }
One way to align images is to use float. Float is similar to text wrapping in a word processing program. You can float an image to the left and right. For example: img { float: right; }
Padding is the amount of white space around text or an image. Padding makes the content on a web page easier to read. Padding is measured in pixels (px). The CSS code looks like this: img { padding: 5px; }