Nothing Special   »   [go: up one dir, main page]
Scribd Logo
Upload

Welcome to Scribd!

  • 45 views

    Chap 1 Css

    Uploaded by

    Nitesh I
    CSS (Cascading Style Sheets) is a language used to style and lay out web pages. CSS allows you to define styles for HTML elements that control things like color, font, size, spacing, and layout. There are different ways to insert CSS including external style sheets, internal style sheets, and inline styles. CSS provides advantages like saving time, making pages load faster, and allowing for easy maintenance and global web standards.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd

    Chap 1 Css

    Uploaded by

    Nitesh I
    45 views17 pages
    CSS (Cascading Style Sheets) is a language used to style and lay out web pages. CSS allows you to define styles for HTML elements that control things like color, font, size, spacing, and layout. There are different ways to insert CSS including external style sheets, internal style sheets, and inline styles. CSS provides advantages like saving time, making pages load faster, and allowing for easy maintenance and global web standards.

    Original Description:

    asd

    Original Title

    chap 1 css

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    CSS (Cascading Style Sheets) is a language used to style and lay out web pages. CSS allows you to define styles for HTML elements that control things like color, font, size, spacing, and layout. There are different ways to insert CSS including external style sheets, internal style sheets, and inline styles. CSS provides advantages like saving time, making pages load faster, and allowing for easy maintenance and global web standards.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    45 views17 pages

    Chap 1 Css

    Uploaded by

    Nitesh I
    CSS (Cascading Style Sheets) is a language used to style and lay out web pages. CSS allows you to define styles for HTML elements that control things like color, font, size, spacing, and layout. There are different ways to insert CSS including external style sheets, internal style sheets, and inline styles. CSS provides advantages like saving time, making pages load faster, and allowing for easy maintenance and global web standards.

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    You are on page 1of 17

    What is CSS?

    CSS stands for Cascading Style Sheets


    Styles define how to display HTML
    elements
    Styles were added to HTML 4.0 to solve a
    problem
    External Style Sheets can save a lot of
    work
    External Style Sheets are stored in CSS
    files

    What is CSS?

    1. Selector : a selector is HTML field
    2. Property : type of attribute
    3. value : assigned property
    Syntax of CSS is : selector
    (property:value)
    Ex table (border=1px)
    Type of Selector
    1. Universal Selector : rather than
    selecting elements of a specific type the
    universal matches the name of element
    type
    *{ color : #112233;}
    2. Descendant Selectors :
    used to apply for particular tag
    ul em {color : #112233;}
    Type of Selector
    3. Class Selector
    .black {color : #112233;}
    4. id selector
    #black {color : #112233;}
    5. Child selector
    body > p {color : #112233;}
    6. Attribute selector
    input [type=text]{color : #112233;}
    Styles Solved a Big Problem
    CSS Saves a Lot of Work!

    CSS Syntax

    A CSS rule has two main parts: a selector, and one or more Declarations:

    Advantage of CSS
    :
    1. CSS Saves Time
    2. Pages load faster
    3. Easy maintainers
    4. Global web standards


    CSS 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 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 "."
    In the example below, all HTML elements with
    class="center" will be center-aligned
    Three Ways to Insert CSS

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

    CSS Styling

    Styling Backgrounds
    Styling Text
    Styling Fonts
    Styling Links
    Styling Lists
    Styling Tables
    CSS Background Properties
    Property Description
    Background Sets all the background
    properties in one declaration
    background-attachmentSets whether a background
    image is fixed or scrolls with the rest of the page
    background-color Sets the background color of an
    element
    background-image Sets the background image for
    an element
    background-position Sets the starting position of a
    background image
    background-repeat Sets how a background image
    will be repeated
    CSS Text Properties
    Property Description
    Color Sets the color of text
    Direction Specifies the text direction/writing direction
    letter-spacing Increases or decreases the space between
    characters in a text
    line-height Sets the line height
    text-align Specifies the horizontal alignment of text
    text-decoration Specifies the decoration added to text
    text-indent Specifies the indentation of the first line in a
    text-blocktext-shadowSpecifies the shadow
    effect added to text
    text-transform Controls the capitalization of textunicode-bidi
    vertical-align Sets the vertical alignment of an element
    white-space Specifies how white-space inside an element
    is handled
    word-spacing Increases or decreases the space between
    words in a text
    CSS Font Properties
    Property Description
    Font Sets all the font properties in one
    declaration
    font-family Specifies the font family for text
    font-size Specifies the font size of text
    font-style Specifies the font style for text
    font-variant Specifies whether or not a text
    should be displayed in a small-caps font
    font-weight Specifies the weight of a font

    CSS Border Properties
    Property Description
    Border Sets all the border properties in one declaration
    border-bottom Sets all the bottom border properties in
    one declaration
    border-bottom-color Sets the color of the bottom border
    border-bottom-style Sets the style of the bottom border
    border-bottom-width Sets the width of the bottom border
    border-color Sets the color of the four bordersborder-
    leftSets all the left border properties in one declaration
    border-left-color Sets the color of the left border
    border-left-style Sets the style of the left border
    border-left-width Sets the width of the left Border

    CSS Border Properties
    border-rightSets all the right border properties in one
    declaration
    border-right-colorSets the color of the right border
    border-right-styleSets the style of the right border
    border-right-widthSets the width of the right border
    border-styleSets the style of the four borders
    border-topSets all the top border properties in one
    declaration
    border-top-colorSets the color of the top border
    border-top-styleSets the style of the top border
    border-top-widthSets the width of the top border
    border-widthSets the width of the four borders

    CSS Margin Properties
    Property Description
    Margin A shorthand property for setting the
    margin properties in one declaration
    margin-bottom Sets the bottom margin of an
    element
    margin-left Sets the left margin of an element
    margin-right Sets the right margin of an element
    margin-top Sets the top margin of an element

    You might also like