We've done some pretty cool stuff with HTML so far, but there's still a barrier between that and all of the wonderful websites you know. We need styles!
Styling on the internet is done with something called Cascading Style Sheets - CSS. CSS is a deceptively simple language responsible for color, size, shape, font, layout, etc - all of the things that make webpages beautiful!
The core of CSS is properties and selectors. All properties have a name, a colon, a value, and a semicolon. For instance, a property to make text red would look like:
color: red;
CSS can be written in a lot of places. The easiest way is inline properties - you put your CSS properties in the style
HTML attribute, and they apply automagically! For instance:
<p style="color: red;">Red Text</p>
This will set the color of that one specific p element to red. It will not set the color of any other elements; for that, you need a selector! A selector looks like this:
p {
color: red;
}
Note the tag name p, the opening brace {,
the properties (each on their own line!), and the closing brace }. CSS is much pickier than HTML,
and if you write this wrong, it could break the entire stylesheet!
The effect is that this selects every p element on the page and sets its color to red.
You can't just throw this anywhere! It needs to go in one of a few specific places. The easiest place is a <style> tag. For instance:
<style>
p {
color: red;
}
</style>
This is considered metadata, so it must go in your <head>.
You can (and should!) also store your CSS in an external file with the ".css" extension - e.g., "style.css" is common. This can then be referenced in your HTML document's header like this:
<link rel="stylesheet" href="style.css" />
Look familiar? This is another use of the elusive link tag!
There are very, very many CSS properties. I can't hope to exhaustively list them (and indeed I don't know all of them!) but here are a few common ones:
color: This sets the text color, and only the text color - other color-adjacent properties can be used for other things.background-color: This sets the color of the background - the full space "behind" an element's content including padding and empty space. Try it on a few different elements!background-image: Used like background-image: url("path/to/image.png"); You have to use url("") because there are other more advanced
types of background image. This just sets the picture to show up behind content.font-family: Sets the type of font to be used. The actual font will be picked out from a set of default options installed in the user's browser. For instance,
font-family: monospace; produces robotic text like this. Most of this page uses font-family: sans-serif;.padding: Padding adds some spacing to an element. It makes the outside larger without changing where content is placed. For example, padding: 10px;
would add 10 pixels of space above, below, and to either side of the content in the element.margin: Margin is another layer outside padding. Rather than expanding the element, margin prevents other elements from getting too close.border: Border is a styled layer between padding and margin! It's usually thin and used to add highlighting. It's a fairly complicated property, with 3 terms instead of just 1:
a common example is border: 1px solid white;, which does this.
text-align: This controls the alignment of content. It can be left, which is the default, center, or right.