Scribd Logo
Upload

Welcome to Scribd!

  • CSS Stands For Cascading Style Sheets

    Uploaded by

    manigandan
    23 views26 pages
    This document provides an overview of CSS (Cascading Style Sheets) and demonstrates how to style HTML elements using various CSS properties. It covers topics like styling text, backgrounds, borders, positioning, transitions/animations, and print styles. Code examples are included to show how to apply CSS styles to HTML elements using selectors like id, class, element, and grouping selectors.

    Original Description:

    Original Title

    css

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an overview of CSS (Cascading Style Sheets) and demonstrates how to style HTML elements using various CSS properties. It covers topics like styling text, backgrounds, borders, positioning, transitions/animations, and print styles. Code examples are included to show how to apply CSS styles to HTML elements using selectors like id, class, element, and grouping selectors.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    23 views26 pages

    CSS Stands For Cascading Style Sheets

    Uploaded by

    manigandan
    This document provides an overview of CSS (Cascading Style Sheets) and demonstrates how to style HTML elements using various CSS properties. It covers topics like styling text, backgrounds, borders, positioning, transitions/animations, and print styles. Code examples are included to show how to apply CSS styles to HTML elements using selectors like id, class, element, and grouping selectors.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 26

    CSS stands for Cascading Style Sheets

    <head>
    <style>

    body

    background-color: lightblue;
    color=>property
    lightblue=>value
    }
    h1 {
    color: white;
    text-align: center;
    }

    p {
    font-family: verdana;
    font-size: 20px;
    }

    </style>
    </head>
    id sector
    ------------

    #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>
    class sector
    --------------------
    .center {
    text-align: center;
    color: red;
    }
    </style>
    </head>
    <body>

    <h1 class="center">Red and center-aligned heading</h1>


    <p class="center">Red and center-aligned paragraph.</p>
    p.center {
    text-align: center;
    color: red;
    }

    p.large {
    font-size: 300%;
    }
    </style>
    </head>
    <body>

    <h1 class="center">This heading will not be affected</h1>


    <p class="center">This paragraph will be red and center-aligned.</p>
    <p class="center large">This paragraph will be red, center-aligned, and in a large
    font-size.</p>

    grouping
    -------------
    h1, h2, p {
    text-align: center;
    color: red;
    }
    </style>

    * {
    color: green;
    font-size: 20px;
    }
    </style>
    </head>
    <body>
    <h2>This is heading</h2>
    <p>This style will be applied on every paragraph.</p>
    <p id="para1">Me too!</p>
    <p>And me!</p>
    <h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>

    <p>This paragraph is not affected.</p>

    h2,p
    {
    background-color: #b0d4de;
    }

    text-shadow: 3px 2px red;


    body
    {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
    background-position: center;
    }

    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;

    background: blue url("img_tree.png") no-repeat right top;

    border

    border-style: none;

    border-style: dotted;

    border-style: dashed;

    border-style: solid;

    border-style: double;

    border-style: groove;
    border-style: ridge;

    border-style: inset;

    border-style: outset;

    border-style: hidden;

    border-style: solid;
    border-width: 5px;

    border-color: red;

    width: 200px;

    /* This is a single-line comment */


    img
    {
    float: right;
    }

    font-size: 100%;
    h1 { color: red; }
    h2 { color: #9000A1; }
    p { color:rgb(0, 220, 98); }

    h2 { font-family: serif; }
    xx-small used to display the extremely small text size.
    x-small used to display the extra small text size.
    small used to display small text size.
    medium used to display medium text size.
    large used to display large text size.
    x-large used to display extra large text size.
    xx-large used to display extremely large text size.
    smaller used to display comparatively smaller text size.
    larger used to display comparatively larger text size.
    size in pixels or % used to set value in percentage or in pixels.

    font-style: italic;

    h3 { font-style: oblique; }
    h4 { font-style: normal; }
    font-variant: small-caps; }
    h3 { font-variant: normal; }

    "font-weight:bold;
    <p style="font-weight:bolder;"
    <p style="font-weight:lighter;"
    <p style="font-weight:100;"
    h3.big {
    line-height: 200%;
    }

    margin-top: 50px;
    margin-right: 100px;
    margin-bottom: 50px;
    margin-left: 100px;

    margin: 50px 100px 150px 200px;


    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    0.1 to 1.0.
    0 to 100

    p.padding {
    padding-top: 50px;
    padding-right: 100px;
    padding-bottom: 150px;
    padding-left: 200px;
    }
    </style>

    <p class="padding">This is a paragraph with specified paddings.</p>


    position
    ------------
    fixed,

    <style>
    p.pos_fixed {
    position: sticky;
    top: 50px;
    right: 5px;
    color: blue;
    }

    <p class="pos_fixed">This is the fix positioned text.</p>

    position: relative;
    left: 30px;
    img.top {
    vertical-align: text-top;
    }
    img.bottom {
    vertical-align: text-bottom;
    }
    <p><img src="good-morning.jpg" class="top" /> This is an image </p>
    <p><img src="good-morning.jpg" class="bottom"/> This is an image</p>

    outline: 3px solid red;

    border: 10px solid transparent;


    padding: 15px;
    border-image: url(border.png) 30 round;
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 30 stretch;

    background-image: url(img_flwr.gif), url(paper.gif);


    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: content-box;

    backgroud-clip:padding-box;

    transform: translate(50px, 100px);

    transform: rotate(20deg);

    transform: rotate (-20deg);

    transform: skewX(20deg); /* Standard syntax */

    transform: skew(20deg, 10deg);

    transform: rotateX(150deg);
    transform: rotateY(130deg);
    transform: rotateZ(90deg);
    -webkit-transition:width 2s

    -webkit-transition:width 2s height 2s

    div {
    width: 100px;
    height: 100px;
    background-color: red;
    position:relative;

    -webkit-animation-name: example;
    -webkit-animation-duration: 4s;
    }
    @-webkit-keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
    }

    @-webkit-keyframes example {
    0% {background-color: red;}
    25% {background-color: yellow;}
    50% {background-color: blue;}
    100% {background-color: green;}

    animation-duration: 3s;
    animation-delay: 2s;
    animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    animation-duration: 4s;
    animation-iteration-count: infinite;

    @keyframes example {
    0% {background-color:red; left:0px; top:0px;}
    25% {background-color:yellow; left:200px; top:0px;}
    50% {background-color:blue; left:200px; top:200px;}
    75% {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
    }

    animation-iteration-count: 3;
    animation-direction: reverse;
    -webkit-animation-direction: alternate;
    -webkit-animation-direction: alternate-reverse;

    img style

    img {
    border-radius: 8px;
    }

    img {
    border-radius: 50%;
    }
    two image fit
    style="float:left;width:50%;height:100%;

    hover tag
    -------------

    .button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

    .button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,255),0 17px 50px 0 rgba(0,0,0,0.19);
    }

    <button class="button button1">Shadow Button</button>


    <button class="button button2">Shadow on Hover</button>
    column print
    -----------------

    -webkit-column-count: 3; /* Chrome, Safari, Opera */


    -moz-column-count: 3; /* Firefox */

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */


    -moz-column-gap: 40px; /*

    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */


    -moz-column-rule-width: 1px;

    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */


    -moz-column-rule-style: solid;

    column-rule-color: lightblue;

    -webkit-column-span: all;
    Navigation Bars

    A navigation bar is basically a list of links, so using the <ul> and <li> elements
    makes perfect sense:

    <ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>

    </ul>

    you can style the <a> elements inside the list

    li a
    {
    display: block;
    width: 60px;
    background-color: #dddddd;
    }

    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    </ul>

    display: block; - Displaying the links as block elements makes the whole link area
    clickable

    display: inline; - By default, <li> elements are block elements. Here, we remove
    the line breaks before and after each list item, to display them on one line

    border-right:1px solid green;

    You might also like