Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for...
20
Web Design (12) CSS Introduction
-
Upload
brett-hood -
Category
Documents
-
view
212 -
download
0
Transcript of Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for...
Web Design (12)
CSS Introduction
Cascading Style Sheets - Defined
CSS is the W3C standard for defining the presentation of documents written in HTML.
By editing one style sheet, the appearance of the entire web site can be changed.
Cascading Style Sheets - Method
1. Produce the HTML page (‘structural layer’)
2. Write the style rules for how you wish certain elements to look (‘presentation layer’)
3. Attach the style rules to the document
Examples of CSS Rules
h1 { color: green;} Selector Declaration Value
p {font-size: 16px; font-family:sans-serif; }Selector Declaration Value Declaration Value
Exercise(1)
1. Create a new web site folder ‘cssintro’
2. Place in it a blank.html and a small image
3. Enter 3 paragraphs of text on your home page, incorporating the image within the text.
4. Apply several h1, h2 and p tags to parts of your text
5. Look at your page in live preview
Exercise (2)
6. In the head area of the home page ( after the title element) enter the following code:
<style type=“text/css”> h1 { color: green;} p {font-size: 16px; font-family:sans-serif; } </style>
7. Look at your page in live preview – what do you notice?
Exercise (3)8. Change the h1 color to ‘gray’ – check in live
preview
9. Now change the h1 color to ‘red’ and again, check in live preview
10. Add a new CSS Rule that makes h2 elements red as well. <style type=“text/css”>
h1 { color: red;} h2 { color: red;} p {font-size: 16px; font-family:sans-serif; } </style>
Exercise (4)
11. Add a 100 pixel left margin to the p element using this declaration:
margin-left : 100px;
- look at the result in live preview
12. Add a 100 pixel left margin to the h2 headings also. Again, check live preview.
<style type=“text/css”>
h1 { color: red;}
h2 { color: red; margin-left: 100px;}
p {font-size: 16px; font-family:sans-serif; margin-left: 100px;}
</style>
Exercise (5)
13. Add a red 1 pixel border to the bottom of the h1 element using this declaration:
border-bottom : 1px solid red;
Check out the result in live preview.<style type=“text/css”>
h1 { color: red; border-bottom:1px solid red;}
h2 { color: red; margin-left: 100px;}
p {font-size: 16px; font-family:sans-serif; margin-left: 100px;}
</style>
Exercise (6)
14. Move the image to the right margin and allow the text to flow around it with the float property, using this declaration:
img { float: right; margin: 0 12px;}(Note: The pixel values after ‘margin’: the first relates to the
space on the top and bottom of the image; the second to the space on the left and right of the image.)
Check with Live Preview<style type=“text/css”> h1 { color: red; border-bottom:1px solid red;} h2 { color: red; margin-left: 100px;} p {font-size: 16px; font-family:sans-serif; margin-left: 100px;} img {float:right; margin: 0 12px;}</style>
And two more things ……
(1) Comments in Style Sheets:
/* comment goes here */
(2) If you need to apply the same properties to a number of elements:
h1, h2, p, img {border: 1px solid blue:}
Three ways of applying CSS (1)
1. Embedded Style Sheets ( in the head)
Applies only to the page on which it appears.
<head>
<title> </title>
<style type= text/css”>
/*style rules go here*/
</style>
</head>
Three ways of applying CSS (2)
2. Inline Styles (in the body)
These apply only to the particular element in which they appear
<h1 style= “color: blue”>Introduction</h1>
Add this to your index page – and check the result
Three ways of applying CSS (3)
3. External Style Sheets
(separate sheet from html page)
Can apply to many pages in your web site
More about these later ……..
Style Sheet Hierarchy
What if contradicting styles appear in these 3 ways of applying CSS to HTML? Which takes priority?
Answer: Inline, Embedded, External
Note: This order can be changed by adding:
!important
to a style rule.
Four CSS Styles (1) Tag Style
Used to change the appearance of an existing HTML tag.
h1 {font-family: Arial; font-size: large;}
Four CSS Styles (2) ID Style
Used mainly as building blocks in page layout. Well suited in formatting <div> tags. Can only be used once per page.
#wrapper {background-color: green; width: 950px; height: auto;}
(Note the hash symbol before the ID style)
On the HTML page, the ID Style appears (within body) as:
<div id=“wrapper”> ………………………….. </div>
Four CSS Styles (3) Class Style
Can be used more than once per page. e.g.to create a caption under each photo on a page:
.caption {font-family: Arial; color: red} (Note the dot before the class style)
On the HTML page, class styles must be applied to an element such as p
<p class=“caption”>Family Photo</p>
Four CSS Styles (4) Compound Style
Created by combining ID, Class or Tag Styles.
For example,
to define a tag style within a particular element:
#banner h1 A combination of id style and tag style
So here, within the banner, all text is to be h1
Four CSS Styles
A lot to take in, so put Class and Compound Styles to one side for the moment.
You have already used Tag Styles. Next time we will be using Tag and ID Styles and will be considering External Style Sheets ….
