Scribd Logo
Upload

Welcome to Scribd!

  • What Is CSS?: CSS Stands For Cascading Style Sheets

    Uploaded by

    Jinu Chacko
    33 views6 pages
    good

    Original Title

    Css

    Copyright

    © © All Rights Reserved

    Available Formats

    ODT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    good

    Copyright:

    © All Rights Reserved
    Download as ODT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    33 views6 pages

    What Is CSS?: CSS Stands For Cascading Style Sheets

    Uploaded by

    Jinu Chacko
    good

    Copyright:

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

    What is CSS?

    CSS stands for Cascading Style Sheets


    CSS defines how HTML elements are to be displayed

    CSS Selectors
    CSS selectors allow you to select and manipulate HTML elements.

    1.The element Selector


    The element selector selects elements based on the element name.
    p{
    text-align: center;
    color: red;
    }
    If you have elements with the same style definitions, like this:
    h1, h2, p {
    text-align: center;
    color: red;
    }

    The id Selector
    The id selector uses the id attribute of an HTML element to select a specific element.
    #para1 {
    text-align: center;
    color: red;
    }

    The class Selector


    The class selector selects elements with a specific class attribute.
    .center {
    text-align: center;
    color: red;
    }
    You can also specify that only specific HTML elements should be affected by a class.
    In the example below, all <p> elements with class="center" will be center-aligned:
    p.center {
    text-align: center;
    color: red;
    }

    Three Ways to Insert CSS


    1.External Style Sheet
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    The style sheet file must be saved with a .css extension.

    The rel attribute specifies the relationship between the current document and the linked
    document. Only used if the href attribute is present.

    2.Internal Style Sheet


    An internal style sheet may be used if one single page has a unique style.
    <head>
    <style>
    body {
    background-color: linen;
    }
    h1 {
    color: maroon;
    margin-left: 40px;
    }
    </style>
    </head>

    3.Inline Styles
    An inline style may be used to apply a unique style for a single element.
    <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

    1.CSS Background
    CSS background properties are used to define the background effects of an element.
    CSS properties used for background effects:
    background-color
    background-image

    background-repeat
    background-attachment
    background-position

    body {
    background-color: #b0c4de;
    background-image: url("paper.gif");
    background-repeat: repeat-x;
    //To repeat an image vertically set background-repeat: repeat-y;
    background-position: right top;
    //set as background-repeat: no-repeat;
    }

    Background - Shorthand property


    it is also possible to specify all the properties in one single property. This is called a shorthand property.
    body {
    background: #ffffff url("img_tree.png") no-repeat right top;
    }
    When using the shorthand property the order of the property values is:

    background-color
    background-image
    background-repeat
    background-attachment
    background-position

    It does not matter if one of the property values is missing, as long as the ones that are present are in this
    order.

    2.CSS Text
    Body {
    color: blue;
    }
    h1 {
    text-align: center;

    //The default color for a page is defined in the body selector.

    //The text-align property is used to set the horizontal alignment of a text. Text
    can be centered, or aligned to the left or right, or justified.

    }
    a{
    text-decoration: none; // The text-decoration property is mostly used to remove underlines
    }
    from links for design purposes: It can also be used to decorate
    text: overline, line-through, underline ;

    3.CSS Links
    a:link - a normal, unvisited link
    a:visited - a link the user has visited
    a:hover - a link when the user mouses over it
    a:active - a link the moment it is clicked
    a:hover MUST come after a:link and a:visited
    a:active MUST come after a:hover

    4.CSS Lists
    list-style
    list-style-image

    Sets all the properties for a list in one declaration


    Specifies an image as the list-item marker
    Specifies if the list-item markers should appear inside or outside the content
    list-style-position
    flow
    list-style-type
    Specifies the type of list-item marker

    5.CSS Tables
    Table Borders
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    }

    //To specify table borders


    //orders are collapsed into a single border

    6.CSS Box Model


    Content - The content of the box, where text and images appear
    Padding - Clears an area around the content. The padding is transparent
    Border - A border that goes around the padding and content
    Margin - Clears an area outside the border. The margin is transparent
    div {
    width: 300px;

    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
    }

    CSS3 Rounded Corners


    t

    Four values: first value applies to top-left, second value applies to top-right, third value applies
    o bottom-right, and fourth value applies to bottom-left corner
    Three values: first value applies to top-left, second value applies to top-right and bottom-left,
    and third value applies to bottom-right
    Two values: first value applies to top-left and bottom-right corner, and the second value applies
    to top-right and bottom-left corner
    One value: all four corners are rounded equally

    #rcorners4{
    border-radius: 15px 50px 30px 5px;
    }
    border-radius
    border-top-left-radius
    border-top-right-radius
    border-bottom-right-radius
    border-bottom-left-radius

    A shorthand property for setting all the four border-*-*-radius properties


    Defines the shape of the border of the top-left corner
    Defines the shape of the border of the top-right corner
    Defines the shape of the border of the bottom-right corner
    Defines the shape of the border of the bottom-left corner

    CSS3 Backgrounds
    CSS3 properties:
    background-size
    background-origin
    background-clip
    CSS3 allows you to add multiple background images for an element, through the background-image
    property.
    #example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;

    }
    shorthand property
    #example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    }
    background-size property allows you to specify the size of background images. The size can be
    specified lengths, contain or cover.
    background-size: 100px 80px;
    background-size: contain;
    background-size: cover;
    background-origin property specifies where the background image is positioned.
    border-box - the background image starts from the upper left corner of the border
    padding-box - (default) the background image starts from the upper left corner of the padding
    edge
    content-box - the background image starts from the upper left corner of the content
    background-origin: content-box;
    background-origin: border-box;
    background-clip property specifies the painting area of the background.
    border-box - (default) the background is painted to the outside edge of the border
    padding-box - the background is painted to the outside edge of the padding
    content-box - the background is painted within the content box
    background-clip: content-box;
    background-clip:padding-box;

    You might also like