1. Cascading Style Sheets

2. CSS
CSS stands for Cascading Style Sheet. Typical CSS file is a text file with an extention.css and contains a series of commands or rules. These rules tell the HTML how to display.
*To create a style sheet, create a file using Notepad save it as a .css document and start writing the CSS code.
/* Styles for sitename.com*/
body { font-family:Arial; background: #000; }
#container { text-align:left; width:1020px; }
#header { height:232px; }
#footer { width: 100%; padding: 0 10px; margin-bottom: 10px;
And so on….

3. Why use it? Used to control formatting Compatible with HTML and XHTML
Change text properties
Control the spacing between elements on your page
Draw borders
Add images
Etc.
Compatible with HTML and XHTML

4. Benefits to Using CSS Separates structure from presentation
Provides advanced control of presentation
Easy maintenance of multiple pages
Faster page loading
Better accessibility for disabled users
Easy to learn
Only downside…
CSS does not work exactly the same way in all browsers.
You should be able to ensure that your site is still accessible, useable, and attractive in any browser.

5. Without using CSS
“HTML without CSS is like a piece of candy without a pretty wrapper.”
Without CSS, HTML elements typically flow from top to bottom of the page and position themselves to the left by default.
With CSS help, we can create containers or DIVs to better organize content and make a Web page visually appealing.

6. Box Model
CSS works on the box model. A typical Web page consists of many boxes joined together from top to bottom. These boxes can be stacked, nested, and can float.
Header Navigation Content Footer

7. HTML & CSS
HTML and CSS work together to produce beautiful and functional Web sites
HTML = structure
CSS = style
We have not given up HTML, we are only adding to it!

8. CSS Rule Structure declaration selector {property: value;}
A CSS RULE is made up of a selector and a declaration. A declaration consists of property and value.
selector {property: value;}
declaration

9. Selectors
The name of the desired type of element, without any attributes.
body { property: value; }
h1 { property: value; }
em { property: value; }
p { property: value; }

10. Properties and Values
body {background: purple;} h1 {color: green; } h2 {font-size: large;} p {color: #ff0000;} /*hexadecimal for red*/
Properties and values tell an HTML element how to display.
body {
background: purple;
color: green; }
*CSS code can be written in a linear format (above) or in a block format (left).

11. Properties
Property is the name of the CSS property that describes the sort of formatting you would like to apply.
Properties are basically the same as attributes used in html formatting. Some are the same; however, be careful!
Some examples:
Same: border, color,
Different: font-size, line-height, text-align, font- family, background-color

12. Values
Many values are the same as when you used them in html. Some of the rules may change slightly.
Some examples:
Same: colors, font styles, size (aside from stating how you are using the size #),
Different: border values (html=”0” vs. css: none), if using pixels, you must state it as px
In css, values are not surrounded by quotation marks

13. Grouping Selectors Example of grouping selectors (both are correct):
Group the same selector with different declarations together on one line.
h1 {color: black;}
h1 {font-weight: bold;}
h1 {background: white;}
Example of grouping selectors (both are correct):
h1 {
color: black;
font-weight: bold;
background: white; }
Cascading Style Sheets: Pixel-Level Control with HTML Ease

14. Grouping Selectors h1 {color: yellow;} h2 {color: yellow;}
Group different selectors with the same declaration on one line.
h1 {color: yellow;}
h2 {color: yellow;}
h3 {color: yellow;}
Example of grouping selectors (both are correct):
h1, h2, h3 {color: yellow;}
Cascading Style Sheets: Pixel-Level Control with HTML Ease

15. Quick Review Write out a rule structure (4 parts)
_________{______________} (then name what the information is between the curly brackets.
Write out a rule structure using elements for each part
Group selectors with a common declaration
Group a selector with 2 or more elements within a declaration
Next day added 2/7/13

16. Review Answers Rule structure: Selector {property: value;} Declaration
h2 {color: blue;}
h1, h2, h3 {font-weight: bold;}
p {text-align: center; font-style: “times new roman” arial;}

17. Comments
You can add comments to your html (xhtml) documents in order to remind yourself what you were trying to achieve with your html tags
They only appear when the document is opened with an editor (they are invisible to the end user)

18. Comments: Tips
Useful for describing why you used a particular tag and what effect you were hoping to achieve
Useful to remind yourself to include, remove, or update certain sections
You should view your commented page with a browser before publishing to avoid sharing your private comments with the public
Comments may not be nested within other comments!

19. p {color: #ff0000;} /*Company Branding*/
Comments Continued…
Different when using html and css:
Html: One tag, no closing tag:
<!--My comments that I want to state-->
Css:
/*My comments that I want to state*/
p {color: #ff0000;} /*Company Branding*/
Either way is correct depending on your purpose.

20. Let’s play with it a little
Go to
Click on “Learn CSS” to the left of the page.
Work through the introduction to ID and Class.

21. Attaching a Style Sheet
Attach a style sheet to a page by adding the code to the <head> section of the HTML page. There are 3 ways to attach CSS to a page:
1. External Style Sheet: Best used to control styling on multiple pages.
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
2. Internal Style Sheet: Best used to control styling on one page.
<style type=“text/css”> h1 {color: red) </style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML tags.
<p style=“color: red”>Some Text</p>

22. Begin a new page Set up a new html document
Save it as personal.html in a new folder called “personal pages”
Create a heading using h1 tags (do not format!)
Add a comment after your h1 tag that states an image should be placed there.
Create 2 paragraph tags with some content within it
Make sure you are closing ALL appropriate tags!