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

Cascading Style Sheets

on

  • 607 views

 

Statistics

Views

Total Views
607
Views on SlideShare
607
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Instructor must explain this slide.

Cascading Style Sheets Cascading Style Sheets Presentation Transcript

  • 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.
  • 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
  • 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!
  • Drawbacks?
    • Only 4.0 Browsers and up.
    • Browser Differences
      • Netscape does not support CSS as well as Internet Explorer does.
        • Fewer functions
        • Limited Inheritance
  • CSS Syntax
    • selector {
    • property : value ;
    • property : value ;
    • }
  • Comments
    • /* anything found between a fore-slash and an asterisk is a comment. Such as this explanation. How ironic. */
  • Properties
    • Font size
    • Colors
      • background
      • font
    • Margins
    • Borders
    • and much, much more!
  • Values
    • Colors
      • Hexadecimal, RGB, HTML names
    • Sizes
      • Points
      • Pixels
      • Percentage
      • Picas
      • Em's
      • Inches
      • Centimeters
    • Fonts
      • Can be declared dynamically as in HTML
  • Selector Declaration
  • Selectors: what is getting style.
    • Tags
    • Classes
    • Tag Specific Classes
    • IDs
  • CSS Implementation
    • Linked Stylesheets
    • Embedded Stylesheets
    • Inline Styles
  • 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.
  • 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>
  • 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.
  • 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>
  • 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
  • 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.
  • 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>
  • 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
  • Grouped Selectors
    • By separating selectors with a comma you can declare more than one at once.
    • h1, h2, h3 {
    • property : value ;
    • property : value ;
    • }
  • 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.
  • 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” )
      • }
  • 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
  • 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
  • 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
  • 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.