IDAT 102
In this weeks lecture I learnt how to make css files, css stands for Cascading Style Sheets and it is a style sheet language used to describe the presentation on a html web page, the other reason its good to use css is the way it doesn’t clog up your html script and also the viewer of the source code cannot see the css script which keeps your web page a bit more private.
This is my css code:
body {
background-color:#09C; / This is the background colour of the html file.
}
#content {
width: 800px; /This is the width of the page
margin: 0 auto;/This is the margin of the page for the content and it is set to automatic
}
ul#menu {
margin: 0; /This is the margin for the menu and it is set to 0
padding: 0; /This is the padding for the menu and it is set to 0
}
ul#menu li{
list-style: none; /This is for the menu list because that’s what the li stands for
margin: 0; /This is the margin for the menu list and it is set to 0
float:left; /The float means position it to the left
width: 200px; /This is the size of the menu list and its set to 200 pixels
white-space:nowrap; /This means all the list will be on the same line going horizontal
text-align: center; /The text align means center the text to the middle.
}
ul#menu li a {
text-decoration: none; /There is no text decoration in the menu list a
background-color:#F69; /This is the background colour of the list
color:#FF0; /This is the colour of the text in the list
display:block; /The display of the list is a block of colour
padding: 10px 0; /The padding on the list is 10 pixels
}
ul#menu li.selected a, ul#menu li a:hover{
/The menu is going to be a hover menu where you go over certain links and it shows a block of colour
color: #9f6; /This is the colour of the text when you hover over the selected link
background-color: #969; /This is the background colour when you hover over the link
}
h1{font-size:34px; font-style:normal; color:#060}
/This is the header script it creates a big colourful header
No comments:
Post a Comment