Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • Lecture2

    1. 1. Introduction to HTML and CSS Lecture 2
    2. 2. Goals CSS CSS Classes Floating elements Cascading elements
    3. 3. CSS Definition: Cascading Style Sheets CSS defines how HTML elements are displayed.
    4. 4. Three ways to define CSS Styles
    5. 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. 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. 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. 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. 9. CSS Syntax Cont... THANKS W3SCHOOLS.COM !!
    10. 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. 11. Open Core-Concepts sheet in Dropbox Dropbox/Lecture2/CSS core concepts.doc Go to page 5: Common CSS Attributes
    12. 12. CSS Classes A special non-unique case for elements. Classes should be used when multiple elements require the same styling
    13. 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. 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. 15. CSS Classes Cont... Where ‘.box’ is the class, ‘p’ is the selector and ‘color: green;’ is the declaration .box p { color: green; }
    16. 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
    17. 17. Exercise Floating Objects
    18. 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. 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.
    20. 20. Cascading Example
    21. 21. Helpful links http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/css_syntax.asp http://www.w3schools.com/css/css_id_class.asp http://www.w3schools.com/css/css_float.asp
    22. 22. Homework Implement the design for the three floating blocks