1. Cascading Style Sheets (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5

2. Objectives The student will be able to: Create inline styles with CSS. Create a web page that uses inline styles. Create an internal style sheet with CSS. Create a web page that uses an internal style sheet.

3. Cascading Style Sheets (CSS)  CSS is a markup language  It is used to define the style of the page (such things as font type, size and many other attributes) as well as to control the overall page layout.

4. Benefits of CSS  CSS allows a single style to be used across an entire site, which makes site maintenance easy  With CSS, HTML documents are kept cleaner, and easier for developers to update and maintain  CSS is efficient, and can result in pages that download quickly.  CSS allows separation of web content from presentation, which means the content can be delivered to users across all web-enabled devices (including browsers, cell phones, PDAs, etc.) in a way that best meets the needs of the users of those devices. This translates to a more accessible web for all users.

5. General CSS Format – Internal Style Sheet  When using internal CSS, you must add a new tag,, inside the section.  The HTML code below contains an example of 's usage: Your page's content!

6. CSS  CSS is a different language than HTML with very different syntax.  It does NOT use angle brackets around element names, etc.  CSS is not HTML, but rather a way of manipulating existing HTML  Like HTML, it is important with CSS to be careful to use correct syntax, and to use indentation to keep the document well organized.

7. Example of CSS – Internal Style Sheet p {color: white; } body {background-color: black; } White text on a black background! Result:

8. General CSS Format  HTML_tag { "CSS Property" : "Value" ; }  Back in our code example, we manipulated and tags  In the first line of CSS code changed the "p“ tag.  We chose the HTML element we wanted to manipulate. - p{ : ; }  Then we chose the CSS attribute “color”. - p { color: ; }  Next we choose the font color to be white. - p { color: white ; }  Now all text within a paragraph tag will show up as white.

9. General CSS Format  In the second line we changed the body tag.  We choose the HTML element Body - body { : ; }  Then we chose the CSS attribute. - body { background-color: ; }  Next we chose the background color to be black. - body { background-color: black ; }  Now background for the body section of our document is black.

10. Inline Styles  If the style you desire is only for a certain instance of a tag (e.g. for a single paragraph) then you can apply the style within the tag.  You simply add a “style=“ attribute and put the styles with no { } in the tag itself  Example:  I want my first paragraph to be indented and with a white border. I can change my tag to

11. Summary  Place your CSS Code between and  Be sure you know the correct format (syntax) of CSS code.  The 3 parts of a CSS: HTML_tag { "CSS Property" : "Value" ; }

12. Where to find help on CSS  General CSS:  http://w3schools.com/css http://w3schools.com/css  Common CSS Properties:  http://tech.journalism.cuny.edu/documentation/css- cheat-sheet/ http://tech.journalism.cuny.edu/documentation/css- cheat-sheet/  Colors:  http://www.w3schools.com/tags/ref_colornames.asp http://www.w3schools.com/tags/ref_colornames.asp  http://www.w3schools.com/tags/ref_colorpicker.asp http://www.w3schools.com/tags/ref_colorpicker.asp

13. Rest of Today  Look at http://www.georgebenainous.com/web (html/css-­ ‐ -­ ‐ basic markup)http://www.georgebenainous.com/web  Step through his examples and understand the CSS code.  Add a style section to the head part of your HTML file.  Add CSS code to set the styles for:  body  h1  h2  p  ol or ul  li

14. Friday  On Friday we will walk around and look at each other’s web pages.  You will vote on the best 3 web pages in the room.  The 3 students with the highest votes will get extra credit.