Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie Lecture2
Ähnlich wie Lecture2 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Lecture2
- 1. Introduction to HTML and CSS Lecture 2
- 3. CSS Definition: Cascading Style Sheets CSS defines how HTML elements are displayed.
- 4. Three ways to define CSS Styles
- 5. Inline-styles You can add a ‘style’ attribute to any HTML element and define your styles there <div style=”width:50px;height:50px;”></div> <div width=”50” height=”50”></div>
- 6. Internal Style Sheet You can also place a <style> tag in the <head> portion of your HTML document and define your CSS there <head> <style type=”text/css”> … </style> </head>
- 7. External Style Sheets The most common place for CSS is an external style sheet Which is a file with a .css extension To access this file you will need to use the HTML <link> element You place a <link> between your HTML <head> tags <head> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head>
- 8. CSS Syntax A typical CSS statement looks like this: SELECTOR { DECLARATION; PROPERTY: VALUE; } For Example: h1 { color: #FFFFFF; } Selector-> h1 Declaration-> color: #FFFFFF; Property-> color Value-> #FFFFFF
- 9. CSS Syntax Cont... THANKS W3SCHOOLS.COM !!
- 10. CSS Syntax Cont. CSS declarations always end with a semicolon, and curly brackets surround declaration groups. Do not leave spaces between property values and units THERE’S A SPACE HERE incorrect width: 20 px; correct width: 20px;
- 11. Open Core-Concepts sheet in Dropbox Dropbox/Lecture2/CSS core concepts.doc Go to page 5: Common CSS Attributes
- 12. CSS Classes A special non-unique case for elements. Classes should be used when multiple elements require the same styling
- 13. <html> <head> <style type=”text/css”> .box { width: 50px; height: 50px; } </style> </head> <body> <div class=”box”></div> <div class=”box”></div> <div class=”box”></div> </body> </html>
- 14. CSS Classes Cont... CSS classes are declared with a period ‘.’ followed by a unique name Such as ‘.box’ in the previous example In CSS if you follow a class declaration with a selector you can define specific declarations for that element
- 15. CSS Classes Cont... Where ‘.box’ is the class, ‘p’ is the selector and ‘color: green;’ is the declaration .box p { color: green; }
- 16. Let’s change it up a bit Add background color to the boxes Add a border to the boxes Add margin to the boxes Float all boxes left
- 18. Cascading Style Sheets When an HTML element has multiple styles defined on it the one with the highest priority will be chosen and override the rest.
- 19. Cascading Style Sheets Cont... An inline style has the highest priority and will override any other CSS defined Internal style sheet External style sheets These are typically declared before the internal style sheets Browser default options are at the bottom of the list, and will have the lowest priority.
- 22. Homework Implement the design for the three floating blocks