Class 1
Was an introductory level class.Class 2
Code used in class 2 can be found here. Copy and paste all the files in a folder and open the class2.html with a browser to view the webpage. Notepad++ 32bit for Windows has alos been bundled up.Class 3
Class 3 was an Introduction to CSS (Cascading Style Sheets) class. CSS is used to style your HTML documents. CSS can be added to HTML in two was: 1) Inline CSS 2) Style sheets or external CSS.Writing your webpage's CSS in an external file is the recommended way to add CSS to your HTML page.
To link your CSS file to your HTML page, create a file with the extension .css, let's call it style.css , now to link it, open your HTML document and and add the following code snippet between your tags:
< link href="style.css" rel="stylesheet" type="text/css" />
We are assuming that both the HTML and CSS files are in the same folder.
CSS Structure:
Below is the basic CSS syntax:
[Selector] {
[property-name] : [property-value] ;
}
Eg:-
[property-name] : [property-value] ;
}
p {
font-family: san serif;
}
body {
background: url('image.jpg');
}
font-family: san serif;
}
body {
background: url('image.jpg');
}
CSS Selectors
CSS has many different selectors, many of them can be found here. You can use your HTML tag elements as selectors like in the above example. You can even assign classes and IDs to your tags and use those as selectors, eg:
Class:
.box {
height: 200px;
width: 200px;
background-color: #000;
color: #fff;
}
ID:
#redbox {
height:400px;
width:100px;
background-color: #FF67AE;
}
Read more.
.box {
height: 200px;
width: 200px;
background-color: #000;
color: #fff;
}
ID:
#redbox {
height:400px;
width:100px;
background-color: #FF67AE;
}
CSS Box Model
The CSS Box Model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. Required: read this.
Once you are clear with the concepts of the CSS box model and know a few CSS properties you can add a CSS file that will make your HTML webpage look awesome. Try making a webpage like I showed in class by adding relevant styles to your div tags that wrap your header, content and footer tags.