Download presentation
Presentation is loading. Please wait.
1
Styles with Cascading Style Sheets (CSS) Web Design – Section 4-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials
2
Objectives The Student will: –Understand the difference between HTML and CSS. –Be able to identify the components of a style in CSS. Introduction video
3
Cascading Style Sheets (CSS) CSS is a markup language as is HTML. –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, XHTML 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 When using internal CSS, you must add a new tag,, inside the tag. –The HTML code below contains an example of 's usage: <html><head> </style></head><body> Your page's content! Your page's content! </body></html>
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 XHTML/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 <html><head> p {color: white; } body {background-color: black; } </style></head><body> White text on a black background! White text on a black background! </body></html> Result: 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
Summary Place your CSS Code between and 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" ; }
11
More Information on CSS You can find information on CSS at: http://www.htmlhelp.com/reference/css/ –This information is also available in Spanish. For today… Review –Quick Tutorial (Tutor rápido) –CSS Structure and Rules (Estructura y reglas de CSS) –CSS Properties (Propiedades CSS)
12
Rest of Today Add the following code to your index.htm file:
Similar presentations
