Scribd Logo
Upload

Welcome to Scribd!

  • Cascading Style Sheet (CSS)

    Uploaded by

    KumarPatra
    74 views4 pages
    CSS is a style sheet language used to determine the formatting of HTML document. Created by Hakon Wium Lie of MIT in 1994 Has become the W3C standard for controlling visual presentation of web pages.

    Original Description:

    Original Title

    CSS Introduction

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CSS is a style sheet language used to determine the formatting of HTML document. Created by Hakon Wium Lie of MIT in 1994 Has become the W3C standard for controlling visual presentation of web pages.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    74 views4 pages

    Cascading Style Sheet (CSS)

    Uploaded by

    KumarPatra
    CSS is a style sheet language used to determine the formatting of HTML document. Created by Hakon Wium Lie of MIT in 1994 Has become the W3C standard for controlling visual presentation of web pages.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    Cascading Style Sheet (CSS)

    CSS is a style sheet language used to determine the formatting of HTML document. Created by Hakon Wium Lie of MIT in 1994 Has become the W3C standard for controlling visual presentation of web pages Separates design elements from structural logic

    Why CSS? Advantages to Workflow Faster downloads Streamlined site maintenance Global control of design attributes Precise control (Advanced) Positioning Fluid layouts Cost Savings Reduced Bandwidth Costs One style sheet called and cached Higher Search Engine Rankings Cleaner code is easier for search engines to index Greater density of indexable content Faster download = better usability Web usability redesign can increase the sales/conversion rate by 100% CSS requires less code CSS can control the order that elements download (content before images) Increased Reach CSS website is compatible with many different devices including the screen, print, projection and handheld devices CSS Rules CSS rules are made up of a selector and at least one declaration. A selector is the code that selects the HTML to which you want to apply the style rule. A declaration is made up of at least one CSS property and related property value.

    Applying CSS Six type of style sheet exists: Browser style: default; if you declare no style rules, this defaults are applied

    User style: by changing a setting in a browser user can override any styles created Inline style: used in individual element and applied via the style attribute
    <h1 style=color:gray; font-size:24px;>Welcome</h1>

    Embedded style: controls one document and placed inside the style element within the HTML document (e.g. embedded.html)
    <head> <title>working with style</title> <style type="text/css"> h1 {font-size:24px;} p {font-size:12px;} body {background-color:black; color:white;} </style> </head> <body> <h1>Welcome</h1> <p>Paragraph</p> </body>

    Linked style: a separate style sheet (a text file with css rules and named using .css sufix) that is linked to an HTML document using link element in the head of the document (e.g. styles.css, linked.html)
    A style sheet ready for linking body {background-color:#999; color:green; } h1 { font-family:Verdana; font-size:24px; color: black; } p { font-family:Georgia; font-size:12px; color:white; }

    HTML for the style sheet <head> <title>working with style</title> <link rel="stylesheet" type="text/css" href="styles.css" media="all" /> </head> <body> <h1>Welcome</h1> Working with linked style sheet <p>Paragraph</p> </body>

    Attributes used with the link element: rel: relationship attribute; describes the relationship of the link type: type of language and format in use href: reference attribute media: enables to define different styles for different media. screen tty tv projection handheld print braille embossed aural all Computer screens Teletypes and similar media using a fixed-pitch character grid Television type devices (low resolution, limited scroll ability) Projectors Handheld devices (small screen, limited bandwidth) Print preview mode/printed pages Braille feedback devices Used for paged braille printers Speech and sound synthesizers Suitable for all devices

    Imported style: similar to linked style sheets, but enables to import styles into a linked style sheet as well as directly into a document. Importing directly into a document
    <head> <title>working with style</title> <style type="text/css"> @import url (styles.css); </style> </head> <body> <h1>Welcome</h1> Working with linked style sheet <p>Paragraph</p> </body>

    Importing into a linked style sheet Enables to modularize the styles and then import them into the primary style sheet
    mod1.css mod2.css mod3.css styles.css index.html

    Separate module files are imported into styles.css, which is then linked to index.html; modifications to the modules can be made independently or cut them out when no longer needed; most effective for very large sites with lots of styles to manage.

    The Cascade The cascade is an application hierarchy (how rules are applied) User style overrides all other styles. Apart from that all styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1. Browser default 2. Linked and imported style sheet 3. Embedded style sheet (in the head section) 4. Inline style (inside an HTML element) So, apart from user style, 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). If the link to the external style sheet is placed after the embedded style in HTML <head>, the external style sheet will override the embedded one. The cascade also refers to the manner in which multiple style sheets are applied. If there are three linked style sheets, the one on the bottom is the one that is interpreted if any conflict exists among those styles.

    The id Selector Used to specify a style for a single, unique element. Uses the id attribute of the HTML element, and is defined with a "#". (e.g. id.html)

    The class Selector Used to specify a style for a group of elements; most often used on several elements. Allows setting a particular style for many HTML elements with the same class. Uses the HTML class attribute, and is defined with a "." (e.g. class.html)

    You might also like