04. Initial styles

So now that we have some placeholders for all the content that’s being put on our page, it’s time to work on the style sheet.

We’re going to start with a single rule that applies to multiple selectors. Open up your “style.css” file (found inside the “css” folder) and add the following lines underneath the comment that’s there:

body, html {
   margin           : 0px 0px 0px 0px;
   padding          : 0px 0px 0px 0px;
   background-color : #a9e2f3;
}

We encountered style sheets in theĀ Intro to Web Design tutorial but now we’re creating rules that will mean more since they’re in an actual example.

Multiple Selectors
The first thing to note is that we can have multiple selectors using the same rule. In our example we’re applying this rule to the “body” and “html” tags but you could have as many selectors as you like as long as they’re separated by commas.

Margin and Padding
Setting the margin and padding to zero means that any spacing we create later on can be dictated by the containers on our page. You may decide to come back and alter these later but for now this will help us visualise all the containers (well it will soon anyway!)

background-color
This property is a pretty common one to use and has been since CSS first came about. While you can change colours in lots of different ways, throughout this tutorial, all the colour references I use will be Hexadecimal Color Codes.

Hexadecimal Color Codes
These should always start with the hash symbol (or “octothorpe” for all you word buffs) “#” and then the 6 characters that make up the hexadecimal code. In order to find that code you’ll need to go to a website that generates the code for you, this one is a cracker!

And there you have our first CSS rule! It’s a simple one but we’ll have plenty of opportunity to make some more difficult ones I assure you! Once you’ve finished all that, your web page should look like this:

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>