Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • What Is CSS?

    Загружено:

    Wahid shah
    852 просмотров15 страниц
    Full slides about css

    Оригинальное название

    What is css?

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PPTX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Full slides about css

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    852 просмотров15 страниц

    What Is CSS?

    Загружено:

    Wahid shah
    Full slides about css

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 15

    What is CSS?

     CSS stands for Cascading Style Sheets.


     CSS describes how HTML elements are
    to be displayed on screen or in other
    media .
     CSS saves a lot of work.it can control
    the layout of multiple web pages all at
    once( i.e. with the help of External style
    sheets).
    Why CSS?
     HTML was never designed to contain tags
    for formatting a web page.
     HTML was created to describe the content
    of a web page like:
    <h1> this is a heading</h1>
     When tags like <font> and color attributes
    were added to the HTML 3.2 specification ,
    it started a nightmare for web developers.
    Why CSS?
     Development of large websites, where
    fonts and color were added to every single
    page, became a long and expensive
    process.
     To solve this problem CSS was created by
    World Wide Web Consortium (W3C).
     CSS is used to defines styles for your web
    pages, including the design and layout.
    CSS syntax

     A CSS rule-set consists of a selector and a declaration


    block.
     The selector points to the HTML element you want to
    style.
     The declaration block contains one or more declaration
    separated by semicolon.
     Each declaration includes a CSS property name and a
    value ,separated by a colon.
     A CSS declaration always ends with a semicolon and
    declaration blocks are surrounded by curly braces.
    CSS comments
    /* This is a single-line comment */
    text-align: center;

    /* This is
    a multi-line
    comment */

    CSS color:
     a HEX value - like "#ff0000"
     an RGB value - like "rgb(255,0,0)"
     a color name - like "red"
    CSS Selectors

     CSS selectors are used to select HTML elements based


    on their element name, id, class and attribute.

    The Element Selector:


     The element selector selects elements based on the
    element name.
    P{
    Text-align :center;
    Color: red;
    }
    CSS Selectors
    The id Selector:
     The id selector uses the id attribute of an HTML element
    to select a specific element.
     The id of an element should be unique within a page,
    so the id selector is used to select one unique
    element.
     To select an element with a specific id , write a
    hash(#) character followed by the id of the
    element.
    #Para1{
    Text-align :center;
    Color: red;
    }
    CSS Selectors

    The Class Selector:


     The Class Selector selects elements with a specific class
    attribute.
     To select elements with a specific class , write a period (.
    ) character followed by the name of the class.
    .center{
    Text-align :center;
    Color: red;
    }
    CSS Selectors

    The specific Class Selector:

     You can also specify that only specific HTML elements


    should be affected by a class.
    P.center{
    Text-align :center;
    Color: red;
    }
    CSS Selectors

    The Grouping Selectors:


     If you have elements with the same style definitions,
    then you can group selectors.
     To group selectors, separate each selector with a
    comma.
    h1,p1,p2{
    Text-align :center;
    Color: red;
    }
    Three ways to insert CSS
    There are three ways of inserting a style sheet:
    • External style sheet
    • Internal style sheet
    • Inline style

    1.External style sheet


    Make a file and rename it with .css and no
    w link to html page by adding the below
    code in head portion
    <link rel="stylesheet" type="text/css href="mys
    tyle.css">
    Three ways to insert CSS
    Internal style sheet
     An internal style sheet may be used if one single page h
    as a unique style.
     Internal styles are defined within the <style> element, ins
    ide the <head> section of an HTML page.
    <style type=“text/css”>
    h1 {
    color: blue
    margin-left: 20px;
    }
    </style>
    Three ways to insert CSS
    Inline style
     An inline style may be used to apply a unique sty
    le for a single element.
     To use inline styles , add the style attribute to th
    e relevant element.
    <p style="color:red;margin-left:20px;">paragraph</
    p>

    Вам также может понравиться