Scribd Logo
Upload

Welcome to Scribd!

  • CSS How To

    Uploaded by

    satyajeet99
    25 views2 pages
    CSS How to

    Original Title

    CSS How to

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CSS How to

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    25 views2 pages

    CSS How To

    Uploaded by

    satyajeet99
    CSS How to

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    7/21/2014 CSS How to

    http://www.w3schools.com/css/css_howto.asp 1/2
    REFERENCES | EXAMPLES | FORUM
    CSS Tutorial
    CSS HOME
    CSS Introduction
    CSS Syntax
    CSS Selectors
    CSS How To
    CSS Backgrounds
    CSS Text
    CSS Fonts
    CSS Links
    CSS Lists
    CSS Tables
    CSS Box Model
    CSS Border
    CSS Outline
    CSS Margin
    CSS Padding
    CSS Dimension
    CSS Display
    CSS Positioning
    CSS Floating
    CSS Align
    CSS Combinators
    CSS Pseudo-class
    CSS Pseudo-element
    CSS Navigation Bar
    CSS Image Gallery
    CSS Image Opacity
    CSS Image Sprites
    CSS Media Types
    CSS Attr Selectors
    CSS3 Tutorial
    CSS3 Introduction
    CSS3 Borders
    CSS3 Backgrounds
    CSS3 Gradients
    CSS3 Text Effects
    CSS3 Fonts
    CSS3 2D Transforms
    CSS3 3D Transforms
    CSS3 Transitions
    CSS3 Animations
    CSS3 Multiple Columns
    CSS3 User Interface
    CSS Summary
    CSS Examples
    CSS Examples
    CSS Quiz
    CSS Certificate
    CSS References
    CSS Reference
    CSS Selectors
    CSS Reference Aural
    CSS Web Safe Fonts
    CSS Units
    CSS Colors
    CSS Color Values
    CSS Color Names
    CSS Color HEX
    Previous Next Chapter
    CSS How To...
    When a browser reads a style sheet, it will format the document according to the information in the style sheet.
    Three Ways to Insert CSS
    There are three ways of inserting a style sheet:
    External style sheet
    Internal style sheet
    Inline style
    External Style Sheet
    An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the
    look of an entire Web site by changing just one file.
    Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section:
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file
    must be saved with a .css extension. An example of a style sheet file is shown below:
    "myStyle.css":
    hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("images/background.gif");}
    Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is:
    margin-left: 20px;
    Internal Style Sheet
    An internal style sheet should be used when a single document has a unique style. You define internal styles in the head
    section of an HTML page, inside the <style> tag, like this:
    <head>
    <style>
    hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("images/background.gif");}
    </style>
    </head>
    Inline Styles
    An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method
    sparingly!
    To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The
    example shows how to change the color and the left margin of a paragraph:
    <p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
    Multiple Style Sheets
    If some properties have been set for the same selector in different style sheets, the values will be inherited from the more
    specific style sheet.
    For example, assume that an external style sheet has the following properties for the h3 selector:
    h3 {
    color: red;
    text-align: left;
    font-size: 8pt;
    }
    Search w3schools.com:
    WEB HOSTING
    WEB BUILDING
    W3SCHOOLS EXAMS
    HTML, CSS, JavaScript,
    PHP, jQuery, XML, and
    ASP Certifications
    SHARE THIS PAGE
    WEB RESOURCES
    Web Statistics
    Web Validation
    HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
    Select Language
    7/21/2014 CSS How to
    http://www.w3schools.com/css/css_howto.asp 2/2
    Previous Next Chapter
    then, assume that an internal style sheet also has the following properties for the h3 selector:
    h3 {
    text-align: right;
    font-size: 20pt;
    }
    If the page with the internal style sheet also links to the external style sheet the properties for the h3 element will be:
    color: red;
    text-align: right;
    font-size: 20pt;
    The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal
    style sheet.
    Multiple Styles Will Cascade into One
    Styles can be specified:
    inside an HTML element
    inside the head section of an HTML page
    in an external CSS file
    Tip: Even multiple external style sheets can be referenced inside a single HTML document.
    Cascading order
    What style will be used when there is more than one style specified for an HTML element?
    Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules,
    where number four has the highest priority:
    1. Browser default
    2. External style sheet
    3. Internal style sheet (in the head section)
    4. Inline style (inside an HTML element)
    So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside
    the <head> tag, or in an external style sheet, or in a browser (a default value).
    Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external
    style sheet will override the internal style sheet!
    REPORT ERROR | HOME | TOP | PRINT | FORUM | ABOUT | ADVERTISE WITH US
    Top 10 Tutorials
    HTML Tutorial
    HTML5 Tutorial
    CSS Tutorial
    CSS3 Tutorial
    JavaScript Tutorial
    jQuery Tutorial
    SQL Tutorial
    PHP Tutorial
    ASP.NET Tutorial
    XML Tutorial
    Top 10 References
    HTML/HTML5 Reference
    CSS 1,2,3 Reference
    CSS 3 Browser Support
    JavaScript
    HTML DOM
    XML DOM
    PHP Reference
    jQuery Reference
    ASP.NET Reference
    HTML Colors
    Top 10 Examples
    HTML Examples
    CSS Examples
    JavaScript Examples
    HTML DOM Examples
    PHP Examples
    jQuery Examples
    XML Examples
    XML DOM Examples
    ASP Examples
    SVG Examples
    Web Certificates
    HTML Certificate
    HTML5 Certificate
    CSS Certificate
    JavaScript Certificate
    jQuery Certificate
    PHP Certificate
    XML Certificate
    ASP Certificate
    Color Picker
    W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples
    are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use,
    cookie and privacy policy. Copyright 1999-2014 by Refsnes Data. All Rights Reserved.

    You might also like