Scribd
Upload
1K views9 pages

Css Cheat Sheet

This CSS stylesheet contains styles for elements on a cycling-themed webpage. It includes styles for the body, header, navigation bar, main content area, aside, article, figure, and captions. Styles define layout properties like floats, widths, margins and padding. Text and color styles are also specified.

Uploaded by

zsiddiqui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1K views9 pages

Css Cheat Sheet

This CSS stylesheet contains styles for elements on a cycling-themed webpage. It includes styles for the body, header, navigation bar, main content area, aside, article, figure, and captions. Styles define layout properties like floats, widths, margins and padding. Text and color styles are also specified.

Uploaded by

zsiddiqui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

/*

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;
}

You might also like