Your SlideShare is downloading. ×
Cascading Style Sheets
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cascading Style Sheets

454

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
454
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Instructor must explain this slide.
  • Transcript

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

    ×