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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Cascading Style Sheets

  • 435 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
435
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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.