Cascading Style Sheets


Published on

Published in: Technology
1 Like
  • Be the first to comment

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

No notes for slide
  • Instructor must explain this slide.
  • Cascading Style Sheets

    1. 1. Cascading Style Sheets <ul><li>Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. </li></ul><ul><li>CSS2, May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables. </li></ul>
    2. 2. HTML ELEMENTS <ul><li>An HTML element is the entire declaration of a tag, or tag and content. </li></ul><ul><li>(black is markup) </li></ul><ul><ul><ul><li>< tag attribute = value > or </li></ul></ul></ul><ul><ul><ul><li>< tag attribute = value > content </ tag > </li></ul></ul></ul><ul><ul><li>Element and Tag are referred to with the same word </li></ul></ul>
    3. 3. What does CSS do? <ul><li>Control the style (fonts, colors, leading, margins, typefaces, etc.) of a Web document without compromising its structure. </li></ul><ul><li>Visual design issues, such as page display, can be addressed separately from the HTML structure. </li></ul><ul><li>This can allow for control over more HTML objects, and with fewer instructions! </li></ul>
    4. 4. Drawbacks? <ul><li>Only 4.0 Browsers and up. </li></ul><ul><li>Browser Differences </li></ul><ul><ul><li>Netscape does not support CSS as well as Internet Explorer does. </li></ul></ul><ul><ul><ul><li>Fewer functions </li></ul></ul></ul><ul><ul><ul><li>Limited Inheritance </li></ul></ul></ul>
    5. 5. CSS Syntax <ul><li>selector { </li></ul><ul><li>property : value ; </li></ul><ul><li>property : value ; </li></ul><ul><li>} </li></ul>
    6. 6. Comments <ul><li>/* anything found between a fore-slash and an asterisk is a comment. Such as this explanation. How ironic. */ </li></ul>
    7. 7. Properties <ul><li>Font size </li></ul><ul><li>Colors </li></ul><ul><ul><li>background </li></ul></ul><ul><ul><li>font </li></ul></ul><ul><li>Margins </li></ul><ul><li>Borders </li></ul><ul><li>and much, much more! </li></ul>
    8. 8. Values <ul><li>Colors </li></ul><ul><ul><li>Hexadecimal, RGB, HTML names </li></ul></ul><ul><li>Sizes </li></ul><ul><ul><li>Points </li></ul></ul><ul><ul><li>Pixels </li></ul></ul><ul><ul><li>Percentage </li></ul></ul><ul><ul><li>Picas </li></ul></ul><ul><ul><li>Em's </li></ul></ul><ul><ul><li>Inches </li></ul></ul><ul><ul><li>Centimeters </li></ul></ul><ul><li>Fonts </li></ul><ul><ul><li>Can be declared dynamically as in HTML </li></ul></ul>
    9. 9. Selector Declaration
    10. 10. Selectors: what is getting style. <ul><li>Tags </li></ul><ul><li>Classes </li></ul><ul><li>Tag Specific Classes </li></ul><ul><li>IDs </li></ul>
    11. 11. CSS Implementation <ul><li>Linked Stylesheets </li></ul><ul><li>Embedded Stylesheets </li></ul><ul><li>Inline Styles </li></ul>
    12. 12. HTML Tags as Selector <ul><li>Any HTML tag </li></ul><ul><ul><li>Any use of the tag will be displayed according to its declaration. </li></ul></ul><ul><ul><li>Can still use regular HTML formatting tags such as the Heading tags for non-CSS browsers. </li></ul></ul><ul><ul><ul><li>Heading tags are used by some search engines for relevance of keywords. </li></ul></ul></ul>
    13. 13. Classes <ul><li>Can be applied to any HTML tag. </li></ul><ul><li>Any tag assigned this class will display according to the class decloration. </li></ul><ul><li>.classname { </li></ul><ul><li>property : value ; </li></ul><ul><li>property : value ; </li></ul><ul><li>} </li></ul><ul><li>Assigned to a tag with the attribute “class” </li></ul><ul><ul><li><tag class=“classname”>content</tag> </li></ul></ul>
    14. 14. Tag Specific Classes <ul><li>p.classname { </li></ul><ul><li>property : value ; </li></ul><ul><li>property : value ; </li></ul><ul><li>} </li></ul><ul><li>Ensures that the class can be applied ONLY to one certain tag. Such as the Paragraph tag in this example. </li></ul>
    15. 15. ID Selection <ul><li>You can create a selector for an individual HTML element. The HTML element must have an ID attribute. </li></ul><ul><li>In the CSS it is denoted with the “#” </li></ul><ul><li>#copyright { font-size: 10pt; } </li></ul><ul><li><span id=“copyright”>© 2011</span> </li></ul>
    16. 16. Linked Style Sheets <ul><li>HTML pages can “point” or link to an external CSS file. </li></ul><ul><li>Multiple HTML pages can point to the same Style Sheet, thus an entire site’s display can be controlled from one file! </li></ul><ul><li><link rel=“stylesheet” type=“text/css” href=“stylesheet.css”> </li></ul><ul><ul><li>rel - the type of relationship this link represents </li></ul></ul><ul><ul><li>type - MIME type of linked document </li></ul></ul><ul><ul><li>href - relative path to the style sheet </li></ul></ul>
    17. 17. Embedded Style Sheets <ul><li>Used by, and throughout, one HTML page </li></ul><ul><li>Found in the HEAD of an HTML page. </li></ul><ul><li><head> </li></ul><ul><li><style type=“text/css”> </li></ul><ul><li><!-- </li></ul><ul><li> selector { </li></ul><ul><li>property : value ; </li></ul><ul><li>property : value ; </li></ul><ul><li>} </li></ul><ul><li> .classname { </li></ul><ul><li>property : value ; </li></ul><ul><li>property : value ; </li></ul><ul><li>} </li></ul><ul><li>--> </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li>Comment tags ensure non-CSS browsers do not display declarations as text. </li></ul>
    18. 18. Inline Syles <ul><li>Styles can be declared within a tag for use in that tag only. </li></ul><ul><ul><li>This is done with the attribute “style” </li></ul></ul><ul><li><tag style=“ property : value ; property : value ;”>Content</tag> </li></ul>
    19. 19. The Cascade <ul><li>Embedded Styles cascade over Linked Style sheets </li></ul><ul><ul><li>Note: the LINK tag should go BEFORE the STYLE tags! </li></ul></ul><ul><li>Inline Styles cascade over Embedded Styles </li></ul>
    20. 20. Grouped Selectors <ul><li>By separating selectors with a comma you can declare more than one at once. </li></ul><ul><li>h1, h2, h3 { </li></ul><ul><li>property : value ; </li></ul><ul><li>property : value ; </li></ul><ul><li>} </li></ul>
    21. 21. Contextual Selectors <ul><li>By separating selectors with a space you can affect nested tags. </li></ul><ul><li>ul ul { </li></ul><ul><li>property : value ; </li></ul><ul><li>property : value ; </li></ul><ul><li>} </li></ul><ul><li>Will declare all second level nested lists. </li></ul>
    22. 22. Images <ul><li>To point to an image (for backgrounds, list bullets, etc.) the following syntax is used: </li></ul><ul><ul><li>body { background-image : url ( “file-path” ) </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>url is typed and file-path is either a relative or absolute file path (no space between url and the parenthesis) </li></ul><ul><li> body { background-image : url ( “images/bg.gif” ) </li></ul><ul><ul><li>} </li></ul></ul>
    23. 23. Spans and Divs <ul><li>To add a specific style, to a specific area- the use of these two tags is general. </li></ul><ul><ul><li>span - an Inline tag that allows content to exist inline with it (e.g. b, font, i,) </li></ul></ul><ul><ul><li>div - a block element - can contain other tags such as SPAN </li></ul></ul>
    24. 24. CSS2 Pseudo Classes <ul><li>There are aspects of CSS2 which Microsoft’s Internet Explorer (as well as some other “rebel browsers”) support. </li></ul><ul><ul><li>a:link </li></ul></ul><ul><ul><li>a:visited </li></ul></ul><ul><ul><li>a:active </li></ul></ul><ul><ul><li>a:hover </li></ul></ul>
    25. 25. A Tag Pseudo Classes <ul><li>Each is its own declaration and are adjusted according to current browser status including mouse position. </li></ul><ul><li>a:hover activated when the mouse is positioned over a link </li></ul><ul><li>a:active activated when the mouse clicks on the link </li></ul>
    26. 26. Multiple Link Types <ul><li>Define the A tag and/or as many classes of the A tag that you want/need. </li></ul><ul><ul><li>a { </li></ul></ul><ul><ul><li>color: #0000ff; </li></ul></ul><ul><ul><li>font-size: 12pt; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>a:hover { </li></ul></ul><ul><ul><li>color: #ff0000; </li></ul></ul><ul><ul><li>font-size: 16pt; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>a.bottomnav { </li></ul></ul><ul><ul><li>font-size: 9pt; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>a.bottomnav:hover { </li></ul></ul><ul><ul><li>color: #ffff00; </li></ul></ul><ul><ul><li>font-size: 9pt; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Inherited categories must be changed or overridden </li></ul><ul><li>In this slide a.bottomnav :hover inherits the new size, so if the font is not to change the a:bottomnav has to have the desired font-size to be defined. </li></ul>