css cheat sheet

9

Click here to load reader

Upload: zsiddiqui

Post on 21-Nov-2015

191 views

Category:

Documents


0 download

DESCRIPTION

Css cheat sheet. computer science.

TRANSCRIPT

  • /*

    New Perspectives on HTML and CSS

    Tutorial 4

    Review Assignment

    Cycle Pathology Style Sheet

    Author: Syed Ehteshamuddin

    Date: 24/11/2012

    Filename: race.css

    Supporting Files:

    */

    article, aside, figure, figcaption, hgroup, header, section, nav, {

    display: block;

    }

    /* default style for every element*/

    body * {

    font-family: Verdana, Geneva, sans-serif;

    font-size: 100%;

    padding: 0px;

    margin: 0px;

    }

  • nav a {

    text-decoration: none;

    }

    /* style rule for page body*/

    body {

    position: relative;

    width: 98%;

    min-width: 1000px;

    max-width: 1400px;

    }

    /* style rule for header element*/

    header {

    position: absolute;

    left: 0px;

    top: 0px;

    width: 20%;

    background-color: black;

    padding-bottom: 500px;

    }

    /* style rule for inline image for headers*/

    header img{

    width: 100%

    }

    /* style rule for horizontal navigation*/

  • nav.horizontal {

    width: 80%;

    margin-left: 20%;

    }

    /* style rule for every element under class horizontal*/

    nav.horizontal li {

    display: block;

    float: left;

    font-size: 85%;

    width: 20%;

    background-color: rgb(49, 38, 31);

    text-align: center;

    padding-top: 5px;

    padding-bottom: 5px;

    text-align: center;

    text-transform: capitalize;

    }

    nav.horizontal li a {

    color: white;

    }

    nav.horizontal li a:hover {

    color: rgb(215, 181, 151);

    }

    /* style rule for every element under class vertical*/

  • nav.vertical li {

    font-size: 85%;

    list-style-type: none;

    }

    li.newclass{

    padding-top: 25px;

    }

    nav.vertical li a {

    color: white;

    display: block;

    text-indent:10px;

    }

    nav.vertical li a:hover {

    background-color: rgb(51, 51, 51);

    }

    {

    outline: 1px solid blue;

    }

  • /* style rule for id main */

    #main {

    clear: left;

    float: left;

    margin-left: 21%;

    margin-top: 20%;

    width: 49%;

    }

    #main > h1 {

    color:rgb(189, 131, 82);

    font-size: 180%;

    letter-spacing:5 px

    font-weight: normal;

    letter-spacing: 5px;

    }

    section p {

    margin: 15px;

    }

    section ul {

    list-style-type: disc;

  • margin: 25px;

    margin-bottom: 10%;

    }

    /* style rule for aside element*/

    aside {

    border: 5px solid rgb(149, 91, 42);

    color: rgb(149, 91, 42);

    float: right;

    margin: 10px;

    width: 24.5%

    border-radius: 30px;

    }

    aside p{

    font-size: 90%;

    margin: 20px;

    }

    /* style rule for article element*/

  • article {

    float:left;

    width: 29%;

    margin-left: 1%;

    background-color: rgb(215, 181, 151);

    }

    article hgroup{

    background-color: rgb(189, 131, 82);

    background-image: url(alisha.png);

    background-repeat: no-repeat;

    background-position: right bottom;

    color:rgb(215, 181, 151);

    margin-bottom: 10%;

    height:60px;

    text-indent:20px;

    }

    article hgroup h1{

    font-weight:150%;

    font-weight:normal;

    }

    article h2{

    font-weight:110%;

    font-weight:normal;

  • }

    article p{

    font-size: 90%;

    margin:15px;

    }

    /* style rule for figure element*/

    figure {

    clear: left;

    float: left;

    margin-left: 21%;

    width: 79%;

    background-color: rgb(149, 91, 42);

    }

    figure div{

    overflow: auto;

    white-space: nowrap;

    }

    figure img{

    margin:10px;

    border:10px

    border-radius:10px;

    }

  • figure figcaption{

    background-color: white;

    font-size: 80%;

    font-style:italic;

    text-align: center;

    }