CSS Document
body{ This is where the body of the text starts.
font-family:Verdana, Geneva, sans-serif; This is the font of the text on the page
}
#content { This is where the content for the page goes.
/*border: 2px solid #000;*/
width: 800px; This is the width of the content
margin: 0 auto; This is the margin which is set to 0 auto
}
#header{ This is the header script
background-image:url(bluSqr.gif); This is where the file for the header is imported it is important to make background images and header images as small as possible this is because if you stretch them when writing the script it will not pixalate them this only applys to block colours.
background-repeat:repeat; This tells you that the background will repeat
color: #FFF; This changes the colour of the text
}
#main{ This is the script for the main content of text on the page
width:600px; This is for the width of the paragraphs and how far it can go across which is 600 pixels
float:right; This tells the text to float right
padding: 0.5em; This tells the text to drop down a little bit away from the header
/*background-color:#F06;*/ This would be the background colour but its commented out
}
ul#menu{ This is the menu script for the page
float: left; This tells the menu bar to float on the left side
list-style: none; This says to have no list style
width: 160px; This says the width of the navigation bar is 160 pixels
/*background-color:#060;*/ This would be the background colour but it is commented out
margin: 0; The margin is set to zero
padding: 0; The padding is set to zero
}
ul#menu li{ This is for the menu list
padding: 0.5em 0 0 0; There is padding on the menu list and it is 0.5 it acts like a margin
}
ul#menu li a{ This is the menu for the lines underneath the text
text-decoration:none; It has no text decoration
display:block; The display is a block list
color:#000; The colour is black
padding: 0 0 0.5rm 0; This says it only has a little padding
border-bottom: 1px solid #000; This is the bottom border colour it is 1 pixel solid and black colour
}
ul#menu li a:hover{ This is a hover menu
border-bottom: 1px solid #F69; The bottom border is set to 1 pixel solid and pink
color:#060; This is the colour of the text which is green
background-color:#00F The background colour of the hover is blue
}
input, textarea { This makes the text area on the form page
border: 2px dotted #F00; This gives the boarder a dotted 2px line with a red colour
}
textarea {
font-family:Verdana, Geneva, sans-serif; This makes the font Verdana, for the input boxes.
}
input[type="submit"]{ This is the script for the submit button its an input type which is submit
border: 5px solid #060; This tells the script to make the border of the button a 5px solid border with the colour of green.
background-color:#F66; This says make the background of the button pink
color:#00F; And this makes the text colour blue
}
Overall in the website designing project i have learnt alot in a few weeks of time and all the things i have learnt is going to go into me making a website. The scripting in html language is a little hard but i was really surprised how quick i picked it up, and when you keep learning it you pick up your own ideas on what to do.
No comments:
Post a Comment