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

Cascading Style Sheets

  • 421 views
Uploaded on

 

More 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
421
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.