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, <style>, inside the <head> section. The HTML code below contains an example of <style>'s usage: <html> <head> <title>The document title </title> <style> </style> </head> <body> <p>Your page's content!</p> </body> </html>
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 <html> <head> <style> p {color: white; } body {background-color: black; } </style> </head> <body> <p>White text on a black background!</p> </body> </html> Result:
General CSS Format HTML_tag { "CSS Property" : "Value" ; } Back in our code example, we manipulated <p> and <body> 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 the 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 <p> tag to <p style="margin: 0 5em 0 5em; padding 3em; border: 2px solid white; font-size: 2em;">
HTML_tag { "CSS Property" : "Value" ; } Summary Place your CSS Code between <style> and </style> 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: http://w3schools.com/css Common CSS Properties: https://developer.mozilla.org/en- US/docs/Web/CSS/CSS_Properties_Reference Colors: http://www.w3schools.com/tags/ref_colornames.asp http://www.w3schools.com/tags/ref_colorpicker.asp
Rest of Today Look at http://www.georgebenainous.com/web (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
Next Time At the end of our next class, 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.