Top Banner
CSS CSS Cascading Style Sheets Cascading Style Sheets 1
58

CSS Cascading Style Sheets Cascading Style Sheets 1.

Jan 19, 2016

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • CSSCascading Style Sheets*

    Copyright 2002 Terry Felke

  • *Style SheetsDescribe the evolution of style sheets from print media to the webList advantages of using cascading style sheetsCreate style sheets that configure common page and text propertiesUse inline stylesUse embedded style sheetsUse external style sheetsUse pseudo-classes

    Copyright 2002 Terry Felke

  • Overview ofCascading Style Sheets (CSS)See what is possible with CSS:Visit http://www.csszengarden.com Style Sheetsused for years in Desktop Publishingapply typographical styles and spacing to printed media CSSprovides the functionality of style sheets (and much more) for web developersa flexible, cross-platform, standards-based language developed by the W3C. *

    Copyright 2002 Terry Felke

  • *CSSAdvantages Greater typography and page layout controlStyle is separate from structureStyles can be stored in a separate document and linked to from the web pagePotentially smaller documentsNo need for tagsEasier site maintenance

    Copyright 2002 Terry Felke

  • *Types ofCascading Style SheetsInline StylesInline styles are coded in the body of the web page as an attribute of an XHTML tag. The style only applies to the specific element that contains it as an attributeEmbedded StylesEmbedded styles are defined in the header of a web page. These style instructions apply to the entire web page document.External StylesExternal Styles are coded in a separate text file. This text file is linked to the web page by using a tag in the header section.Imported StylesImported Styles are similar to External Styles in that they are coded in a separate text file. Well concentrate on the other types of styles in this text.

    Copyright 2002 Terry Felke

  • *CSSSyntaxStyle sheets are composed of "Rules" that describe the styling to be applied. Each Rule contains a Selector and a Declaration

    Copyright 2002 Terry Felke

  • *CSSSyntax Samplebody { color: blue; background-color: yellow; }This could also be written using hexadecimal color values as shown below.body { color: #0000FF; background-color: #FFFF00; }

    Copyright 2002 Terry Felke

  • *Common FormattingCSS PropertiesSee Table 9.1 Common CSS Properties, including:background-color colorfont-family font-size font-weight font-styletext-decorationline-heighttext-alignbackground-image

    Copyright 2002 Terry Felke

  • *Using Inline StylesInline Styles are coded as attributes on XHTML tags. The following code will set the text color of a tag to a shade of red:This is displayed as a red headingThe following code sets the text in the heading to red and italic.This is displayed as a red heading in italic style

    Copyright 2002 Terry Felke

  • Hexadecimal Color Values# is used to indicate a hexadecimal valueHex value pairs range from 00 to FFThree hex value pairs describe an RGB color

    #000000 black#FFFFFF white#FF0000 red#00FF00 green#0000FF blue#CCCCCC grey

    *

    Copyright 2002 Terry Felke

  • Configuring Color with Inline CSS (1)Inline CSSConfigured in the body of the Web page Use the style attribute of an XHTML tagApply only to the specific element

    The Style AttributeValue: one or more style declaration property and value pairs

    Example: configure red color text in an element:Heading text is red *

    Copyright 2002 Terry Felke

  • Configuring Color with Inline CSS (2)Example 2: configure the red text in the heading configure a gray backgroundin the heading

    Separate style rule declarations with ;

    This is displayed as a red heading with gray background*

    Copyright 2002 Terry Felke

  • *QuestionsList three reasons to use CSS on a web page. When designing a page to use other than the default colors for text and background, explain why it is a good reason to configure both properties: text color and background color. Write the code to configure an inline style attached to a tag. Configure as follows: background color set to a light green color, text set to a dark green color, font set to Arial or sans-serif, size set to larger, font weight set to bold.

    Copyright 2002 Terry Felke

  • CSS Embedded StylesConfigured in the header section of a Web page. Use the XHTML elementApply to the entire Web page documentStyle declarations are contained between the opening and closing tagsThe type attribute indicates the MIME type of text/cssExample: Configure a Web page with white text on a black background*

    Copyright 2002 Terry Felke

  • *Embedded StylesApply to an entire web page. Placed within a tag located in the header section of a web page. The opening tag begins the embedded style rules.The closing tag ends the area containing embedded style rules. When using the tag, there is no need for the style attribute. The tag does use a type attribute that should have the value of "text/css".

    body { background-color: #000000; color: #FFFFFF; font-family:Arial,sans-serif; }

    Copyright 2002 Terry Felke

  • CSS Embedded Styles

    body { background-color: #E6E6FA; color: #191970;}h1 { background-color: #191970; color: #E6E6FA;}h2 { background-color: #AEAED4; color: #191970;}

    The body selector sets the global style rules for the entire page. These global rules are overridden for and elements by the h1 and h2 style rules.

    Copyright 2002 Terry Felke

  • CSS and text*

    Copyright 2002 Terry Felke

  • Configuring Text with CSSCSS properties for configuring text:font-weightConfigures the boldness of textfont-styleConfigures text to an italic stylefont-sizeConfigures the size of the textfont-familyConfigures the font typeface of the text

    Copyright 2002 Terry Felke

  • The font-size PropertyAccessibility Recommendation:Use em or percentage font sizes these can be easily enlarged in all browsers by users

    Copyright 2002 Terry Felke

  • The font-family PropertyNot everyone has the same fonts installed in their computerConfigure a list of fonts and include a generic family name

    p {font-family: Arial,Verdana, sans-serif;}

    Copyright 2002 Terry Felke

  • Embedded Styles Example

    body { background-color: #E6E6FA; color: #191970; font-family: Arial, Verdana, sans-serif; }h1 { background-color: #191970; color: #E6E6FA; line-height: 200%; font-family: Georgia, "Times New Roman", serif; }h2 { background-color: #AEAED4; color: #191970; font-family: Georgia, "Times New Roman", serif; }p {font-size: .90em; }ul {font-weight: bold; }

    Copyright 2002 Terry Felke

  • CSS SelectorsCSS style rules can be configured for an:HTML element selector (i.e. as we saw in previous slide to the element itself)class selectorid selector

    Copyright 2002 Terry Felke

  • Using CSS with classclass SelectorApply a CSS rule to a certain "class" of elements on a Web pageDoes not associate the style to a particular XHTML elementConfigure with .classnameThe sample creates a class called new with red italic text.To use the class, code the following XHTML:This is text is red and in italics*

    .new { color: #FF0000; font-style: italic; }

    Copyright 2002 Terry Felke

  • Using CSS with idid SelectorApply a CSS rule to ONE element on a Web page.Configure with #idname

    The sample creates an id called new with red, large, italic text. To use the id, code the following XHTML: This is text is red, large, and in italics*

    #new { color: #FF0000;font-size:2em; font-style: italic; }

    Copyright 2002 Terry Felke

  • CSS and styling areas*

    Copyright 2002 Terry Felke

  • XHTML elementA block-level element Purpose: configure a specially formatted division or area of a Web pageThere is a line break before and after the division. Can contain other block-level and inline elements

    Useful to define an area that will contain other block-level tags (such as paragraphs or spans) within it. *

    Copyright 2002 Terry Felke

  • XHTML Element ExampleConfigure a page footer areaEmbedded CSS:

    .footer { font-size: small; text-align: center; } XHTML:

  • XHTML elementAn inline-level elementPurpose: configure a specially formatted area displayed in-line with other elements, such as within a paragraph.There is no line break before and after the span.

    *

    Copyright 2002 Terry Felke

  • XHTML Element Example Embedded CSS:

    .companyname { font-weight: bold;font-family: Georgia, "Times New Roman", serif;font-size: 1.25em;} XHTML:Your needs are important to us at

  • External Style SheetsStoring in separate file decoupling design from content!!!*

    Copyright 2002 Terry Felke

  • External Style SheetsCSS style rules are contained in a text file separate from the XHTML documents.

    The External Style Sheet text file: extension ".css" contains only style rulesdoes not contain any XHTML tags

    *

    Copyright 2002 Terry Felke

  • body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; }h2 { color: #003366; }.nav { font-size: 16px; font-weight: bold; }External Style SheetsMultiple web pages can associate with the same external style sheet file.

    *site.cssindex.htmclients.htmabout.htmEtc

    Copyright 2002 Terry Felke

  • The ElementA self-contained tag Placed in the header sectionPurpose: associates the external style sheet file with the web page. Example:

    *

    Copyright 2002 Terry Felke

  • Using anExternal Style SheetTo link to the external style sheet called color.css, the XHTML code placed in the header section is: body { background-color: #0000FF; color: #FFFFFF;}External Style Sheet color.css

    Copyright 2002 Terry Felke

  • Centering Page Content with CSS#container { margin-left: auto; margin-right: auto; width:80%; }

    Copyright 2002 Terry Felke

  • W3C CSS Validationhttp://jigsaw.w3.org/css-validator/

    Copyright 2002 Terry Felke

  • CSS Guidelines Getting Started Review the design of the pageConfigure global font and color properties for the body selector Identify typical elements (such as , , and so on) and declare style rules for these if needed. Identify page areas such as logo, navigation, footer, and so on configure an appropriate class or id for each. Create one prototype page that contains most of the elements you plan to use and test.Revise your CSS as needed.Once your design is set move styles to an external .css file Planning and testing are important activities when designing a Web site

    Copyright 2002 Terry Felke

  • CSS Troubleshooting TipsVerify you are using the : and ; symbols in the right spotsthey are easy to confuse. Check that you are not using = signs instead of : between each property and its value. Verify that the { and } symbols are properly placed Check the syntax of your selectors, their properties, and property values for correct usage. If part of your CSS works, and part doesnt:Review your CSSDetermine the first rule that is not applied. Often the error is in the rule above the rule that is not applied. Validate your CSS at http://jigsaw.w3.org/css-validator

    Copyright 2002 Terry Felke

  • This cascade applies the styles in order from outermost (External Styles) to innermost (actual XHTML coded on the page). This way site-wide styles can be configured but overridden when needed by more granular (or page specific) styles. TheCascade

    Copyright 2002 Terry Felke

  • CSS and anchor tagStyle attributes differentlyUse to make buttons*

    Copyright 2002 Terry Felke

  • *CSSPseudo-classesPseudo-classes and the anchor tagLink default state for a link (anchor tag)Visited state of a link that has been visitedHover state of a link that the mouse is currently overActive state of a link that is being clicked

    a:link {color:#FF0000 }a:hover {text-decoration:none; color:#000066 }

    Copyright 2002 Terry Felke

  • *CSS buttons

    .button { border: 2px inset #cccccc; width: 100px; padding: 3px 15px; color: #ffffff; background-color: #006600; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; text-align: center; text-decoration:none;}a.button:link { color : #FFFFFF; }a.button:visited { color : #cccccc; }a.button:hover { color : #66cc33; border:2px outset #cccccc;}

    CSS Buttons!HomeProductsServicesContactAbout

    Copyright 2002 Terry Felke

  • CSS more to doEffecting borders*

    Copyright 2002 Terry Felke

  • The CSS border PropertyConfigures a border on the top, right, bottom, and left sides of an element

    Consists of border-widthborder-styleborder-color

    h2 { border: 2px solid #ff0000 }

    Copyright 2002 Terry Felke

  • CSS Borders: Block / Inline ElementsBlock element default width of element content extends to browser margin (or specified width)Inline element Border closely outlines the element content

    h2 { border: 2px solid #ff0000; } a { border: 2px solid #ff0000; }

    Copyright 2002 Terry Felke

  • Browser Display Can Vary

    Copyright 2002 Terry Felke

  • Configuring Specific Sides of a BorderUse CSS to configure a line on one or more sides of an elementborder-bottomborder-leftborder-rightborder-top h2 { border-bottom: 2px solid #ff0000 }

    Copyright 2002 Terry Felke

  • The CSS padding PropertyConfigures empty space between the content of the XHTML element and the border

    Set to 0px by default h2 { border: 2px solid #ff0000; padding: 5px; }

    No padding configured:

    Copyright 2002 Terry Felke

  • Configuring Padding on Specific Sides of an ElementUse CSS to configure padding on one or more sides of an elementpadding-bottompadding-leftpadding-rightpadding-top

    h2 { border: 2px solid #ff0000; background-color: #cccccc; padding-left: 5px; padding-bottom: 10px; padding-top: 10px;}

    Copyright 2002 Terry Felke

  • CSS padding Property Shorthand: two valuesTwo numeric values or percentagesfirst value configures top and bottom paddingthe second value configures left and right padding

    h2 { border: 2px solid #ff0000; background-color: #cccccc; padding: 20px 10px;}

    Copyright 2002 Terry Felke

  • Four numeric values or percentagesConfigure top, right, bottom, and left padding

    h2 { border: 2px solid #ff0000; width: 250px; background-color: #cccccc; padding: 30px 10px 5px 20px;}

    CSS padding Property Shorthand: four values

    Copyright 2002 Terry Felke

  • Hands-On Practiceh1 { background-color:#191970; color:#E6E6FA; padding: 15px; font-family: Georgia, "Times New Roman", serif; } h2 { background-color:#AEAED4; color:#191970; font-family: Georgia, "Times New Roman", serif; border-bottom: 2px dashed #191970; }Try this on your own

    Copyright 2002 Terry Felke

  • CSS more to doBackground images*

    Copyright 2002 Terry Felke

  • CSS background-image PropertyConfigures a background-image By default, background images tile (repeat) body { background-image: url(background1.gif); }

    Copyright 2002 Terry Felke

  • CSS background-repeat Property

    Copyright 2002 Terry Felke

  • Using background-repeath2 { background-color: #d5edb3;color: #5c743d;font-family: Georgia, "Times New Roman", serif;padding-left: 30px; background-image: url(trilliumbullet.gif); background-repeat: no-repeat; }trilliumbullet.gif:

    Copyright 2002 Terry Felke

  • *CSSStrategies(1)Always include end tags (even though browsers usually display the page, anyway) for all XHTML container tags.Design and code the page to look "OK" or "Acceptable" -- then use style sheets for extra-special effects and formatting.Use style sheet components that will degrade gracefully. Check the compatibility charts and test, test, test, test, test....

    Copyright 2002 Terry Felke

  • *CSSStrategies(2)Use and tags to create logical page sections. Be aware that Netscape 4.x handles the tag better than the tag.Use style sheets in Intranet environments -- you know exactly what browsers your visitors will be using.Consider using a browser detection script (discussed in Chapter 12) to test for a specific browser and link to the style sheet coded specifically for that browser.

    Copyright 2002 Terry Felke

    *************************************