0

Chapter 5: Cascading Style Sheets (CSS)

/*
Exercise 5.3
CSS rule that makes all text 1.5 times larger than the base font of the system and colors the text red
*/
p.exercise53
{
font-size:150%;  
color:#FF0000;
}

/*
Exercise 5.4
CSS rule that places a background image halfway down the page, tiling it horizontally. The image should remain in place when the user scrolls up or down.
*/
body {
background-image:url(testing-testing-123.jpg);
background-position:center center;
background-repeat:repeat-x;
background-attachment:fixed;
}

/* 
Exercise 5.5 - CSS rule that gives all h1 and h2 elements a padding of 0.5 ems, a dashed border style and a margin of 0.5 ems.
*/
h2{
padding: .5em;
border-style: dashed;
margin: .5em;
}

/*
Exercise 5.6 - CSS rule that changes the color of all elements containing attribute class="green-Move" to green and shifts them down 25 pixels and right 15 pixels
*/
p.green-Move{
color: green;
position: relative;
top: 25px;
left: 15px;
}
/*
Exercise 5.7 - A layout template that contains a header and two columns.
Use divs for the each layout component, and use float to line up the columns side by side.
Give each component a border and/or a background color so you can see where your divs are.
*/
.header {
text-align: center;
position: relative;
border-width: 4px;
background-color:#0000CC;
}

.column1{
text-align: center;
float:left;
width:50%;
border-width: 4px;
background-color:#CC0033;
}

.column2{
text-align: center;
float:right;
width:50%;
border-width:4px;
background-color:#FF9999;
}

/*
Exercise 5.8 - Display h1 elements in blue. 
Create a rule that displays all links in blue without underlining them. 
When the mouse overs over a link, change the link's background color to yellow.
*/
h1, a:link {
text-decoration:none;
color: blue;
}
h1, a:hover
{
text-decoration:none;
color:yellow;
}

/*
Exercise 5.9
1. Make a navigation button using a div with a link inside it.
2. Give it a border, background, and text color, and make them change when the user hovers the mouse over the button.
3. Use an external style sheet.
4. Ensure the style sheet validates at http://jgsaw.w3.ord/css-validator/
*/
div.menu {
font-weight: bold;
color: white;
border: 2px solid #225599;
text-align: center;
width: 10em;
background-color: #225599
}

div.menu:hover a 
{ 
display:block 
}

div.menu a
{
display: none;
border-top: 2px solid #225599;
background-color: white;
width: 10em;
text-decoration: none;
color: black;
}

div.menu a:hover
{
background-color: #dfeeff;
}
Article Global Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google StumbleUpon Eli Pets

chin yee

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *

What is 2 + 10 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)