CSS Style Sheet
CSS Selectors
Now for some CSS. Make a blank sheet. If using Notepad++, Save it as type "Cascade style sheets file". Then make the filename "ourstyles and click save. If using
microsoft notepad, in the bottom box it should say .txt and then in the file name box type ourstyles.css.
The CSS is farther down on page.
A id selector has a # sign before the name. Like the wrapper div, <div id="wrapper">, on the Html sheet. There is a # sign before the
word wrapper on the CSS sheet. All id selectors get a # sign on the CSS sheet.
A class selector has a dot before it and all class selectors get a dot before them .navbar.You will see 2 class selectors on the CSS sheet below
but only the .navbar
on the Html sheet. That is because I thought I would go ahead and throw in a place to style a paragraph(.paraone) which can be added to the Html sheet later. The same
with the h4 heading below. There is not one on the Html sheet yet but I went ahead and put it on the CSS sheet. There are others that will be added later.
All the ones without a dot or pound sign are Name selectors. Body will style the body section. header will style the header section. h1 will style a h1 and
so on.
The * selector styles all elements on the html page. If you want all backgrounds black and box-sizing:border-box to apply to all elements:
* {
background-color:black;
box-sizing:border-box;
}
CSS Comments: /*this is a css comment*/ Comments are not viewable in the browser. Programmers notes.
ALL SELECTORS MUST HAVE THE OPENING AND CLOSING CURLY BRACES. ALL PROPERTY: VALUE; COMBINATIONS MUST HAVE THE COLON AT THE END OF IT.
CSS Syntax
The syntax is:
selector {
property: value;
property: value;
property: value;
}
Our CSS Document
Below is the CSS selectors to put on your CSS sheet.
body {
}
#wrapper {
}
header {
}
h1 {
}
h2 {
}
.navbar {
}
article {
}
h3 {
}
h4 {
}
.paraone {
}
footer {
}