Simple Stylesheets

Alright, I promise it's going to get super fun now. ##Introduction to (Internal) CSS We will write CSS code in with our HTML rather than writing it in another file (see end of page for this). Here is how CSS looks: ```html <html> <head> <style> h1 { color: red; } </style> </head> <body> <h1>Yeeaaaaahhhh Header!</h1> </body> </html> ``` The `<style>` element is a special element since code in it is not interpreted as HTML but as CSS. Let's take a closer look at what's in the element: ```css h1 { color: red; } ``` Maybe it's easier to look at this broken down: ```css SELECTOR { PROPERTY: VALUE; } ``` What does this mean? - `h1/SELECTOR`: This is the element you want to select and style. - `color/PROPERTY`: This is the property of the element you want to change. - `red/VALUE`: This is the new value of this property. In this case, we are changing the color of the header to red. Simple, right? Try it out for yourself. One more thing - you can see I'm indenting the properties. This is again a preferance but it's done for readability too. You can put all your CSS on one line but it would be unreadable (like HTML). ###A Note on Colours Colours can written in English, for example, white can be written as `white`, `#ffffff`, `rgb(255,255,255)`, `rgba(255,255,255,1)` or `hsl(0, 0%, 100%)`. Use online colour pickers for unlimited creativity. This should get you going. Really mess around with these and understand how they work and why they work. ##Inline CSS We covered CSS in general above, but more importantly internal CSS. Inline CSS is when you add the `style` attribute to elements and style them that way. ```html <p style="color:red;background-color:blue;">I'm red and blue!</p> ``` All the CSS is done on one line, which can look bad if you have a lot of styles. We'll get to how to can use internal CSS to style specific, individual elements next. ##External CSS Your styles will become huge and so you don't want it cluttering up your HTML. This is how you import a stylesheet: ```html <link rel="stylesheet" href="mystyle.css" /> ``` `rel` stands for relationship and it tells the browser what kind of file we're actually importing. We've come across `href`, so to be short, it's just a link to an external file or website. You will want to put this into the `<head>` element. Where you place it within it is up to you. Also, when writing CSS in this file, you do not need to define a `<style>` element - just write raw CSS code.

Continue to More Selectors