003 – Adding some style! – HTML/CSS Tutorial
In the last episode, we had a look at some basic HTML tags and built up a very basic web page. However I will be the first to admit that it looks a bit bland, so let’s see if we can jazz it up a bit and add a bit of CSS.
The div Tag
First off however, let’s take a quick look at a tag I didn’t mention in the previous episode. The almighty “div” tag.
The reason I didn’t mention it before is because, without CSS, it basically does nothing. The main purpose of the div tag is to simply provide something to hook onto, so you can apply CSS to everything inside.
As you can see if you add a div tag to you’re application, it won’t really add any styling.
Lets take a look at adding some styling to our new “div” tag. We do this by adding an attribute called a “class”.
What this class does is give us something to hook onto.
Now the fun bit. Inside the “head” tag we are going to add a “style” tag and inside the style tag we are going to add a link to the class we added to the div “my-class”. In order to target a class, we preceded the class name with a “.”. Inside the curly braces we are going to add some basic CSS in order to style our div tag.
The div tag is suddenly more useful now that it has some styles attached to it.
One thing to note here is that we are using hex values for the colors here. This is pretty standard and most color pickers will be able to produce hex color for you.
Block and Inline Elements
Something else we will come across is block and inline-block level elements.
A block level element always starts on a new line and takes up the full width available. By default the div element is a block level element and will break items to a new line and will fill the width of its parent.
An inline-block element does not start on a new line and only takes up as much width as necessary. An example of this would be anchor tags where it won’t break the tag to a new line and will only fill the available space.
Currently our div tag is a “block” level element. However let’s see what happens if we change it to an inline element with the “display” style.
What we can see has happened here is the div now only takes up as much room as it needs.
What this also means is if you were to add a second inline div by simply copying the first one then it would sit beside the first one instead of below it.
In the next episode, we will be starting on a fresh canvas. Now that you have some basic skills under your belt we can start building a fully functioning website.