Scribd Logo
Carica

Benvenuto in Scribd!

  • Cascading Style Sheet: Nazia Hameed Comsats Institute of Information Technology Islamabad

    Caricato da

    Aqib Khan
    33 visualizzazioni45 pagine
    03-CssBasic for beginners

    Titolo originale

    03-CssBasic for beginners

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PPT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    03-CssBasic for beginners

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    33 visualizzazioni45 pagine

    Cascading Style Sheet: Nazia Hameed Comsats Institute of Information Technology Islamabad

    Caricato da

    Aqib Khan
    03-CssBasic for beginners

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PPT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 45

    CSS CASCADING STYLE SHEET

    Nazia Hameed COMSATS INSTITUTE OF INFORMATION TECHNOLOGY ISLAMABAD

    Goals
    Understand basic syntax of Cascading Style Sheets (CSS) Understand the differences among inline, internal and external style sheets Understand how to declare a style Understand how to attach specify values

    Problem
    When tags like <font>, and color attributes were added to the HTML, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. Solution??????????

    Cascading Style Sheet

    What are Cascading Style Sheets?


    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 You get control and maintain the integrity of your data

    Introduction to Styles and Properties


    Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium (W3C) for managing the design and formatting of Web pages in a Web browser

    CSS SYNTAX
    Rule Structure

    Example
    <html> <head> <title> CSS Example </title> <style type="text/css"> p { color:red; text-align:center; } </style> </head> <body> <p>Hello World!</p> <p>This paragraph is styled with CSS.</p> </body> </html>

    OUTPUT

    Introduction to Styles and Properties


    A single piece of CSS formatting information, such as text alignment or font size, is referred to as a style Some of the style capabilities of CSS include the ability to change fonts, backgrounds, and colors, and to modify the layout of elements as they appear in a Web browser

    Introduction to Styles and Properties


    CSS information can be added directly to documents or stored in separate documents and shared among multiple Web pages The term cascading refers to the Web pages ability to use CSS information from more than one source

    CSS Properties
    CSS styles are created with two parts separated by a colon: the property, which refers to a specific CSS style, and the value assigned to it, which determines the styles visual characteristics Together, a CSS property and the value assigned to it are referred to as a declaration or style declaration

    CSS Properties

    CSS Comments
    Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:
    /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }

    The id and class Selectors


    In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". The id Selector
    The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1":

    The id Selector
    Output
    <html> <head> <style type="text/css"> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>

    The class Selector


    The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "."

    Class Selector
    <html> <head> <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html> Output

    Class Selector
    You can also specify that only specific HTML elements should be affected by a class.

    Class Selector Example


    <html> <head> <style type="text/css"> p.center { text-align:center; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p> </body> </html>

    Ways to Insert CSS


    There are three ways of inserting a style sheet: Inline style Internal style sheet External style sheet

    Inline Styles
    The most basic method of applying styles is to use inline styles, which allow you to add style information to a single element in a document 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.

    Inline Styles
    <html> <head> <title>Inline Styles</title> </head> <body> <p style="color:blue; font-weight:bold; fontsize:12pt">Common Greetings</p> <ul style="margin-top:-20px; font-size:10pt"> <li style="list-style-type:square">Hello</li> <li style="list-style-type:circle">Hi</li> <li style="list-style-type:disc">Howdy</li> </ul> </body> </html>

    Internal Style Sheets


    <html> <head> <title>Internal Style Sheet</title> <style type="text/css"> .warning {color:#ff0000} h1.warning {text-decoration:underline} p.warning {font-weight:bold} </style> </head> <body> <h1 class="warning">WARNING</h1> <p class="warning">Don't go there!</p> </body> </html>

    Make a separate css file. Two ways to connect your HTML documents to your CSS stylesheet Linking Importing. Linking <link> is a simple <link> to the stylesheet; the browser knows to get styles from the links target and apply them to each HTML page as it is loaded Importing By @import you can also import one or more CSS files into another

    External Style Sheets

    External Style Sheets


    Code Sample: StyleSheet.css .warning {color:#ff0000} h1.warning {text-decoration:underline} p.warning {font-weight:bold} Code Sample:ExternalStyleSheet.html <html> <head> <title>External Style Sheet </title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body> <h1 class="warning">WARNING</h1> <p class="warning">Don't go there!</p> </body> </html>

    Common CSS Properties


    To create a link from an HTML document to an external stylesheet, add the <link> tag in the <head> tags. <head> <link href="styles.css" type="text/css" rel="stylesheet" media="screen" /> </head> href attribute specifi es the stylesheets location. Type attribute alerts the browser that the file contains CSS. rel attribute tells the browser that this link will be a stylesheet. Media attribute specifies the media type Screen the stylesheet should be used for display in a Web browser. Handheld the stylesheet would contain styles you had optimized
    for mobile devices

    Common CSS Properties

    CSS Properties
    The properties are grouped into the following categories:
    Color and background properties Font properties Text properties Box properties Table properties

    Assignment

    Make your profile using HTML and use External styles sheet to make it appealing .

    DUE DATE: 24nd March 2012 Viva : 26rd March 2012

    CSS Values
    The values you can assign to a CSS property depend on what type of property it is Some properties can be assigned a range of values

    CSS Values
    For instance, you can assign any font name that is available on a users system to the font-family property For other properties, you must assign a value from a specific set of values

    Length Units
    Length units refer to the units of measure that you can use in a style declaration to determine the size or positioning of an element Whether a length unit is used for sizing or positioning depends on the property and the element to which it is assigned

    Length Units
    You assign a measurement value to a property by assigning the number that represents the measurement, immediately followed by the unit of measure

    CSS Length Units

    Length Units
    CSS length units are either absolute or relative Absolute length units use an exact measurement to specify the size or placement of an element

    Length Units
    The following CSS length units are absolute:
    cm (centimeters) in (inches) mm (millimeters) pc (picas) pt (points)

    Length Units
    Relative length units are preferred because they adjust properties according to screen size or user preferences The following CSS length units are relative:
    em (em space) ex (x-height) px (pixels) %

    Percentage Units
    An alternative to relative length units is percentage units, which adjust properties relative to other values You assign a percentage unit value to a property by assigning a number that represents the percentage, immediately followed by the percent symbol (%)

    Color Units
    A color unit represents a color value that you can assign to a property You can assign a color unit to a property using any one of 16 color names defined in the CSS1 specification

    Color Units

    Color Units
    Most graphical computer systems use the RGB color system for specifying colors You can also assign a color using the RGB color system

    Why CSS?
    Advantages to Workflow Cost Savings You WILL Be Cooler

    Advantages of CSS
    Workflow
    Faster downloads Streamlined site maintenance Global control of design attributes

    Advantages of CSS - Cost Savings


    Cost Savings
    Reduced Bandwidth Costs
    One style sheet called and cached

    Higher Search Engine Rankings


    Cleaner code is easier for search engines to index

    Advantages of CSS - Cost Savings


    Faster download = better usability
    CSS requires less code Tables require spacer images CSS can control the order that elements download (content before images)

    Potrebbero piacerti anche