Web Pages with Style
Rob Wall
Cascading Style Sheets
- Used to control the presentation on a web page
- Rules describe the presentation of a specific element
- Rules can be included within the html file, or in a separate file
- Internal style sheets are usually included within the
head portion of the html file
<style type="text/css">
h1 {font-style: bold;}
</style>
Writing a CSS rule
- All rules are made up of selectors and one or more declarations
<style type="text/css">
h1 {font-style: bold;}
</style>
h1 is the selector
- Any HTML element can be a selector, indicating that the declarations will affect the representation of that element
- In the example above, the declaration will change the presentation of the
h1 elements
font-style: bold; is a declaration
Declarations
- Declarations are made up of pairs of properties and values
<style type="text/css">
h1 {font-style: bold;}
</style>
font-style is a property
bold is a value
Separated with :
Each declaration ends with ;
Multiple Declarations
- A rule can have multiple declarations
<style type="text/css">
h1 {
font-style: bold;
color: red;
}
</style>
Basic Properties
- font-family
- serif, sans-serif
- name of font - arial, helvetica, "Times New Roman"
- font-size
- give font size in pixels (or other units)
- percentage
- font-weight
- normal, lighter, bold, bolder
- text-align
- left, right, center, justify
Text and background colour
- Use color property to change text colour
- Use background-color property to change background colour
- Use colour names or values for the value
- aqua, black, blue, fuchsia, gray, green, lime, maroon, olive, navy, purple, red, silver, teal, white, yellow
- See the HTML Dog Colour Reference for more details
Example
h1 {
color:white;
background-color:navy;
font-family:arial, helvetica, sans-serif;
font-weight:bolder;
font-size:28px;
}
How Many Rules
- As many as you want to within the style sheet
External Stylesheets
- Put this in the
head section of your html page
Practice
- Practice
- Practice more
- Look at other people's style sheets
Steal Imitate all their good ideas