Scribd
Upload
337 views3 pages

Web Programming Unit F IC1 StylesCSS

This CSS stylesheet defines styles for a garden center website. It includes resets, global styles, and styles for body, header, navigation, main content, footer, and print styles. The header has a yellow background and large centered logo. The navigation bar has an orange background and inline-block links. The main content has a max-width and is centered with a white background. The footer repeats the yellow background and centers the text.

Uploaded by

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

Web Programming Unit F IC1 StylesCSS

This CSS stylesheet defines styles for a garden center website. It includes resets, global styles, and styles for body, header, navigation, main content, footer, and print styles. The header has a yellow background and large centered logo. The navigation bar has an orange background and inline-block links. The main content has a max-width and is centered with a white background. The footer repeats the yellow background and centers the text.

Uploaded by

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

/*

Spotted Wren Garden Center style sheet


Filename: styles.css

Author:
Date:
HTML5 and CSS3 Illustrated Unit F, Independent Challenge 1
*/

/* reset styles */
html {
font-size: 12px;
}
article, body, div, footer, header, h1, h2, h3, nav, p {
border: 0;
padding: 0;
margin: 0;
}

/* global styles */
p {
margin: 0.4em 0;
font-size: 1.2em;
}

/* body and page container */


body {
font-family: Lato, Arial, Helvetica, sans-serif;
background-color: #faebbf;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #6ac238;
position: relative;
}
/* skip navigataion */
p.skipnavigation {
margin: 0;
}
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
color: black;
background-color: white;
position: relative;
top: 0.4em;
right: 0.4em;
left: auto;
z-index: 2;
}

/* header section */
header {
padding: 0.5em;
background-color: yellow;
text-align: center;
}
h1 {
font-weight: 700;
font-size: 3em;
}
header p {
color: rgb(241,90,36);
}

/* Site Navigation */
nav.sitenavigation {
background-color: rgb(241,90,36);
text-align: center;
}
nav.sitenavigation p {
display: inline-block;
margin: 0.4em 0.6em;
font-size: 1.6em;
}
nav.sitenavigation a:link {
color: yellow;
text-decoration: none;
}
nav.sitenavigation a:visited {
color: white;
}
nav.sitenavigation a: hover, nav.sitenavigation a:focus {
color: yellow;
text-shadow: 1px -1px 0 black;
}
nav.sitenavigation a:active {
position: relative;
top: 1px;
left: 1px;
}

/* main content */
article {
max-width: 400px;
padding: 10px;
margin: 1em auto;
text-align: center;
background-color: rgb(255,255,255);
}
h2 {
margin: 0 0 0.4em;
font-size: 2.4em;
font-weight: 700;
}

/* footer section */
footer {
padding: 0.5em;
background-color: yellow;
text-align: center;
}

/* print styles */
@media print {
.container, h1, h2, header p, p {
color: black;
background-color: white;
}
}
@page {
margin: 1in;
}

You might also like