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

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.

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.

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.

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!

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.

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

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.

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.

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

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" ; }

Where to find help on CSS  General CSS:   Common CSS Properties:  cheat-sheet/ cheat-sheet/  Colors:  

Rest of Today  Look at (html/css-­ ‐ -­ ‐ basic markup)  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

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.