How To: Web Development 03 - Styling Pt 1

Welcome fellow Null-Byters! I would suggest you watch reading my last tutorial before we begin. In our last adventure, we began making a simple, ugly website. If we want it to make it look good, we should add some styling. But first, we need to understand the basics.

What Is CSS?

CSS stands for Cascading Style Sheets. It was made to add styling to HTML which had no presentation at all. If you have never used CSS before, there are a few things you should know before you begin.

When styling:

1. There are 3 ways to style things.
2. Things on the bottom of the script override things on the top.
3. Certain things carry more weight.

How to Style

There are three ways to add styling to your web page.

1. Using a style attribute (inline)
2. A style tag (Internal)
3. Using a file (External) - We will be using

More info here
Once again, there are three ways to style the elements in a page.

1. Style Attribute
2. Using id's
3. Using classes

Don't fret if you don't know what these are. I will go in depth later. When I say things on the bottom override things on the bottom this is what I mean. Take the following code for example.

Because the asterick that contains font-size: 18px; is on the bottom, it overrides the other one. The end result is the font-size is 18px. Again, you are not supposed to understand this just yet. One more thing you should understand before we begin. Certain notations carry more weight then others.

1. id's will trump classes
2. inline styling will trump classes and id's

For example:

Again, you aren't supposed to know what any of this means, but both notations point to the same element. However the one on top carries more weight so it ignores the previous rule and that one's stylings come true.

Notation

In CSS there are three different notations. One for id's which is represented with a '#' and one for classes represented by a '.'. There can only be one id per element per file but there can by multiple classes. If you are still confused, that is okay. This site can really help.

• '.' (dot) denotes classes
• '#' (pound) denotes ids
• there is also a style attribute