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.
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 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> <style> </style> </head> <body> <p>Your page's content!</p> </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 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> <style>
p {color: white; } body {background-color: black; } </style> </head> <body> <p>White text on a black background!</p> </body> </html> Result:
8
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.
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
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" ; }
11
More Information on CSS
You can find information on CSS at: 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
For the next 10 minutes Add the following code to your index.htm file:
Similar presentations
