W2S1: Class - HTML and CSS Lecture

Notes

Different sectioning elements you can use in your code:
Div
Header
Nav
Main
Footer
Section

Within CSS code:
Header
width: 100%;
margin-bottom:10px;
Main
width:640px; (you can change this)
margin: 0 auto 10px auto; (this goes clockwise, top-right-bottom-left, this is the same for padding)
Footer
width:640px; (you can change this)
margin: 0 auto; (this centres it)

Tip - Give all your sectioning elements a background colour while you are building them so you can see what you're doing

When you have different sections you have to give them ids or classes so that they can be styled differently (unless you want them all to look the same)

If you're referencing a class in css start it with a dot, for an id use a hash

Use http://www.textfixer.com/html/convert-text-html.php to convert your body copy to html (that has all the correct tags etc) that you can then copy and paste into your code

<img src=""> in the source put the link to the image in you 'Images' folder within your project folder

Always add an alt="" attribute within the image tag. This is so that if the image doesn't load the viewer receives some information about what was meant to be in that spot.

Navigation Lists: <ul></ul> <li><a href="#"></a></li> (using the hash makes your item a link but it doesn't go anywhere, it's just a placeholder)

Unordered List CSS:
ul{
list-style-type: none; (gets rid of bullet-points)
padding:0;
}
ul li a { (this is a nested selector - it only selects links within a list item that is within an unordered list)
display: block;
float: left; (when you use floats you have to put an overflow: hidden; on the ul css)
width: (you can either use a width or a percentage)
height:
padding: (minus this percentage off of your width percent e.g. padding: 1%; width: 18%; if you have five elements OR add box-sizing:border-box;)
border-right: solid 1px #[numbers for colour]; (this adds a small bar/line between each navigation link)
}

CSS Links:
a:link; = link that haven't been visited
a:visited; = links that have been visited
a:hover; = when you hover over a link

.meta{} in your css refers to a class in the html
.meta h2{} in your css refers to the heading nested under the meta class in the html

Have multiple fonts in descending order of how common they are, ending with a generic 'sans-serif' tag to accommodate different browsers etc
E.g. font-family: OpenSans, Arial, sans-serif;