April 2

CSS

If you read Chapter 7 in you text book you will a detailed explanation of CSS

Cascading Style Sheets.

The newest standards require html to be the code for the content and CSS will take on the responsibility or decorating your page. Coding for CSS can be within the html body but most often is in the head section of your page.
You can also write individual css files when you want your styles to apply to several webpages in one site

CSS Order

A browser style sheet….all browsers have default style sheets. These are common to all white background, black text in Times New Roman, blue links and purple visited links.

A user style sheet ….a view of the a website has the ability to change the settings on the browser of their computer. You can change your browser’s default text font and size and even color

Author style sheets the person who develops the webpage controls the look of the page using < style> </style> tags

Html….if you code design information into your webpage …this will dominate all of the above.

CCS….1.html
2 author creating style
3 user style settings in browser-
4 default settings in browser.


Why use CSS?

Author created style sheets
Are easy to maintain, one change can change several areas of your site or even several pages
Take less code so the file size is smaller
Work better with other media such as cell phones and web page readers for the blind
When used properly advanced CSS with give you more control over the design of the page




You first need a selector . The selector selects the elements in html that will be affected by the rule set. This is everything up to but not including the {


h1
h2
p

are examples of selectors....look familiar? These are also the opening tags in your html coded pages

Next you need the declaration block
h1{…}
h2{…}
p{…}

are examples of selectors with declaration blocks

Next you will need declarations in the declaration blocks
h1{ text-align: center;}
h2{ font-style: italic; }
p{color: maroon; }

Please be very careful with the placement of the colon and the semi-colon




Go to http://www.w3schools.com/css/css_examples.asp
And then to Text “select the color of text”
You can practice the text CSS styles



Assignment
Create a basic web page following the requirements below.
Do not format the text, alignment or color.

Your page should have the following elements:

• Document Declaration for transitional above the opening html
• html,head,title, body tags
• A level one heading that includes your name.
• A short paragraph describing something interesting about yourself
• A level two heading saying something like "My Favorite Places on the Internet"
• A paragraph describing the things you like to do on the Internet
• Save it as me.htm in new folder called csslessons

Now create css and locate it between <style> </style> which are located in the head tags
Create css for the selectors h1, h2 and p.
h1 should be centered h2 italicized and p maroon colored text

Use the tutorial at http://www.w3schools.com/css/css_examples.asp to help you.

You can have multiple declarations for a selector

h1{text-align: center; font-style: italic; color: maroon;} Give it a try!

save this page as aboutme.htm in your csslessons folder