Basic styling with CSS

- So the moment my site has a white background with some black text and you might notice on the final design its not that, its actually the opposite way 'round. So how do we go about changing this? Well at the moment all we've really worked on is the content and the structure, next thing we want to look at is the look and feel of the site. So I need to go into my 'css' my 'Cascading Style Sheets', so here by default I've added two. So this is just part of the Superhi editor we'll add some defaults in here, its easier to take things away than it is to add so we'll just have some defaults.

So the first one in here is called 'base.css' and in here we're not gonna touch this. This file is locked and its used to add some smart defaults for starting out our page. Now why we even having this in here? Well basically when html started it was started before css so the very very early web had some defaults styles to it. We wanna get rid of this 'cause we're web designers now and what this means is we wanna kind of start from scratch. So here the 'base.css' is just starting every single site from scratch, its giving us a base to work with.

The further we're gonna work with mostly is 'style.css'. So in here we have some basic set-up. Here we've got the font family being Arial, we have a font size, we've got line heights, we've got background colors, we've got margins and widths on the pages already. So we'll talk about this step by step. So the first thing that we wanna do is change the background color and the text color on this site to what the- well at the moment our background color here is just this pure white color, this '#ffffff'.

If I open this up, I can actually play around with some of the colors, make it a green background if I want to, see how that looks. Its pretty bright but we have something in here. What I want to do is actually turn it into a black background, so I could actually just go in here, click black for instance and apply and to see how that looks. Well here you can see my text is still there. I've still got my links in here but my text is very dark gray.

So I could just switch this over to white, here we go we'll apply here, we've actually just reversed this around. There we go. But each on that we've got is we've just picked random colors from the Superhi editor. How do we put our colors in here? Well if we go back to our Figma file, we will actually put them in properly. So here is my black and white colors if I just 'right-click' on this and 'edit style', I've got this 'properties' thing come up here. If I open this up, I can actually switch to a 'hex' value which is this, so '111118'.

This is what I'm gonna use, I'm gonna copy this and go back to my html, my editor, and instead of this being '000000' which is pure black, what I'm gonna do is 'paste' in this. So it should say '#111111' '#111118' not 6, (laughs) so six things in here with a # at the start. So this is a very specific color its not- its a color that we've picked in our 'Figma' file its not just pure black, its slightly blueish tinted in here and a colorful white.

Let's double check see what this one is, we'll go back, we'll edit this one. Luckily this one is 'ffffff' and we have that one in here already. So now we've got the exact color of black that we wanted and what we can start to do is change some of this stuff now, we can say maybe the font family is wrong, or we'll talk about this a little bit later but we can pick in this list. Maybe we'll change the font size by default, so maybe we'll make it '18px' pixels.

So let's see if this is a little bit bigger, it is. Line height is kind of a multiplier, so remember from before we go back to here, we have our body style, I can edit this. Here I've got 150%, this is 1.5 times so exactly the same thing. So no unit here, so what I could do is maybe tighten it up, 1.3. A little bit closer together. If it's px is really tight its 'cause its wrong, its warning I have pixels between everything.

Its all on kind of one line, so I want it to be a multiplier of 1.5 and the final one is 16 pixels. We're worry- we'll worry a bit about the typography a little bit later. Now here you might notice, why is this one bigger than the other things? Well the reason for this, is we have a selector. The 'c' in 'css' stands for cascading which means overwrite the things we want to overwrite. So by default the text color for all of these things in here is white.

So it kind of looks like that. However, on the 'h1' tag we are selecting this using curly brackets and then overwriting the things we want to overwrite. Here we've got font-size is 24. So if I want to make the 'h1' tag, which in 'index.html' is 'Aria Oslo', this group. How do I make it bigger? I just increase this. So what is the final one that I've got? Again I'll go back to here and see on my 'heading 1' this is gonna be 40.

So a little bit bigger, lets make it 40. So what we should see now is 'Aria Oslo' is pretty large. Its the wrong typography at the moment we'll talk about that a little bit later, but we have some things in place now. The next thing we might wanna do is start up these links. How do we go about starting these up? We'll talk about that in the next video.