Scribd Logo
Upload

Welcome to Scribd!

  • Css Notes

    Uploaded by

    Tanusha hande
    7 views22 pages

    Original Title

    2. Css Notes

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views22 pages

    Css Notes

    Uploaded by

    Tanusha hande

    Copyright:

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

    Css Cascading stylesheet

    Selector

    CSS Syntax
    A CSS rule-set consists of a selector and a declaration block:

    Example:
    <style>
    h1
    {
    color:red;
    }
    </style>

    ID Selector:
    Example:

    <style>
    #abc
    {
    color:red;
    }
    </style>
    <body>
    <h1 id="abc">Heading</h1>
    <p id="abc">Heading</p>
    </body>
    Class Selector:
    Example:
    <style>
    .abc
    {
    text-align:center;
    font-family:Cooper;
    font-size:60px;
    color:red;
    }
    .pqr
    {
    text-align:center;
    font-size:30px;
    font-family:EuroRoman;
    }
    </style>
    </head>
    <body>
    <h1 class="abc">
    //<h1 class="abc pqr">
    My First Tutorial in css
    </h1>
    </body>

    Group Selector:

    Example:

    h1, h2, p {
    text-align: center;
    color: red;
    }
    Css Comments

    Example:

    p{
    color: red;
    /* This is a single-line comment */
    text-align: center;
    }

    /* This is
    a multi-line
    comment */

    Background-color:
    Example:
    body {
    background-color: lightblue;
    }

    Exapmle:

    body
    {
    background-image:url("IMAGE.jpg");
    background-size:1500px;
    background-position:left top;
    background-repeat:no-repeat;
    background-attachment:fixed;

    Three Ways to Insert CSS

    There are three ways of inserting a style sheet:

     External style sheet


     Internal style sheet
     Inline style

    External Style:

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

    mystyle.css

    body {
    background-color: lightblue;
    }

    h1 {
    color: navy;
    margin-left: 20px;
    }

    Internal Style:

    <style>
    body {
    background-color: linen;
    }

    h1 {
    color: maroon;
    margin-left: 40px;
    }
    </style>

    Inline Style:

    <h1 style="color:blue;margin-left:30px;">This is a heading</h1>

    Padding:
    Example:
    padding-top:500px;
    padding-right:100px;
    padding-bottom:150px;
    padding-left:200px;
    Margin:
    Example:
    margin-top
    margin-right
    margin-bottom
    margin-left
    Example:
    margin: 10px 5px 15px 20px;
    p.ex1 {
    margin: 35px;// This paragraph has a margin of 35 pixels on all four sides.
    }

    Height and Width:


    div
    {
    background-color:powderblue;
    width:50%;
    height:50px;
    font-family:Castellar;
    }

    Text-transform:
    div.a {
    text-transform: uppercase;
    }

    div.b {
    text-transform: lowercase;
    }

    div.c {
    text-transform: capitalize;
    }

    Text-Decoration:
    text-decoration: underline;
    text-decoration: overline;
    text-decoration: line-through;

    Text-Property:

    text-indent:50px;
    letter-spacing:20px;
    line-height:0.8;
    direction:rtl;
    word-spacing:10px;

    Text-Shadow:
    Example:
    text-shadow:3px 2px red;

    Image-Alignment:
    Example:
    img.top
    {
    vertical-align:text-top;
    }

    img.bottom
    {
    vertical-align:text-bottom;
    }
    <p>
    An <img class="top" src="abc.jpg" width="50" height="50">image with text
    top align
    </p>

    Opacity:
    img
    {
    opacity:0.5;
    filter:alpha(opacity=50);
    }

    img:hover
    {
    opacity:1.0;
    filter:alpha(opacity=100);
    }

    Css-link
    a:link {color:green;
    background-color:red;}
    a:visited {color:blue;}
    a:hover {color:hotpink;}
    a:active {color:blue;}
    Responsive image:
    html,body
    {height:100%;}

    img.one
    {height:auto; width:auto;}

    img.two
    {height:50%; width:50%;}
    Css-list:
    ul.a
    {list-style-type:circle;}

    ul.b
    {list-style-type:square;}

    ol.c
    {list-style-type:upper-roman;}

    ol.d
    {list-style-type:lower-alpha;}

    Psudo Element:
    p::first-line
    {
    color:#ff0000;
    font-variant:small-caps;
    }

    p::first-letter
    {
    color:#ff0000;
    font-size:xx-large;
    }

    p.intro::first-letter
    {
    color:black;
    font-size:200%;
    }

    h1::before
    {
    content:url(giphy.gif);
    }

    h2.abc::after
    {
    content:url(index.jpg);
    }

    h1::selection
    {
    color:red;
    background:yellow;
    }

    Css borders:
    p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.solid {border-style: solid;}
    p.double {border-style: double;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    p.mix {border-style: dotted dashed solid double;}

    Css Table:
    table,th,td
    {
    border:1px solid green;
    }
    table
    {
    border-collapse:collapse;
    width:100%;
    }
    th
    {
    height:50px;
    text-align:center;
    }
    td
    {
    height:50px;
    vertical-align:center;
    text-align:center;
    }
    th,td
    {
    padding:15px;
    border-bottom:5px solid #ddd;
    }
    tr:hover
    {
    background-color:#f5f5f5;
    }
    tr:nth-child(even)
    {background-color:#f2f2f2;}
    th
    {
    background-color: skyblue;
    color:white;
    }

    Overlapped:
    img
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    }
    <img src="index.jpg">
    Hey...!
    </img>

    Overflow:
    div
    {
    width:150px;
    height:250px;
    background-color:skyblue;
    overflow-x:hidden;
    overflow-y:scroll;
    }

    Position
    div.static
    {
    position:static;
    border:3px solid #73AD21;
    }
    div.relative
    {
    position:relative;
    left:300px;
    border:3px solid #73AD21;
    }
    div.fixed
    {
    position:fixed;
    bottom:0;
    right:0;
    width:300px;
    border:3px solid #73AD21;
    }
    div.relativ
    {
    position:relative;
    width:400px;
    height:200px;
    border:3px solid #73AD21;
    }
    div.absolute
    {
    position:absolute;
    top:80px;
    right:0;
    width:200px;
    height:100px;
    border:3px solid #73AD21;
    }
    <div class="relativ">
    this is Relative position
    <div class="absolute">
    this is absolute position
    </div>

    Position-sticky:
    div.sticky
    {
    position:-webkit-sticky;
    position:sticky;
    top:0;
    background-color:skyblue;
    border:2px solid blue;
    }
    Set multiple <p> tags and set sticky in between them to see the result.

    Css Dropdown:
    <style>
    .dropbtn
    {
    background-color : #4CAA50;
    color : white;
    padding : 16px;
    font-size : 16px;
    border : none;
    cursur : pointer;
    }

    .dropdown
    {
    position : relative;
    display : inline-block;
    }

    .dropdown-content
    {
    display : none;
    position : absolute;
    background-color : #F9F9F9;
    min-width : 160px;
    box-shadow : 0px 8px 16px 0px
    rgba(0,0,0,0.2);
    z-index : 1;
    }

    .dropdown-content a
    {
    color : black;
    padding : 12px 16px;
    text-decoration : none;
    display : block;
    }

    .dropdown-content a:hover
    {
    background-color : #F1F1F1;
    }

    .dropdown:hover
    .dropdown-content
    {
    display : block;
    }

    .dropdown:hover .dropdown
    {
    background-color : #3e8ea41;
    }
    </style>
    </head>

    <body>
    <div class="dropdown">
    <button class="dropbtn">
    Dropdown
    </button>

    <div class="dropdown-content">
    <a href="abcd.html"> Link 1 </a>
    <a href="Position_Sticky.html"> Link2 </a>
    <a href="Text_Shadow.html"> Link3 </a>
    </div>
    </div>
    </body>

    Vertical Nav Bar:


    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    height:100%;
    background-color:pink;
    position:fixed;
    overflow:auto;
    }
    li a
    {
    display:block;
    width:60px;
    background-color:skyblue;
    color:red;
    padding:5px 16px;
    text-decoration:none;
    text-align:center;
    border-bottom:1px solid #555;
    }

    li a:hover
    {
    background-color:green;
    color:white;
    }

    li a.active
    {
    background-color:grey;
    color:white;
    }
    li a:last-child
    {
    border-bottom:none;
    }
    Set Multiple <p> Tags to see effects.

    Horizontal Nav bar:


    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    height:100%;
    background-color:pink;
    position:fixed;// to see this effect set mul p
    overflow:auto;
    }

    li a
    {
    display:block;
    width:60px;
    background-color:skyblue;
    color:red;
    padding:5px 16px;
    text-decoration:none;
    text-align:center;
    border-bottom:1px solid #555;
    }

    li a:hover
    {
    background-color:green;
    color:white;
    }

    li a.active
    {
    background-color:grey;
    color:white;
    }

    li a:last-child
    {
    border-bottom:none;
    }

    You might also like