Lesson #3: Make it Sparkle
"This thing called CSS, where does that come in?"
I GOT YOU.. We're going to add our customized css sheet to our project.
- In the folder
assets/css/, add another file:betateam.css. - In your
index.htmlfile, add this line<link rel="stylesheet" href="assets/css/betateam.css" />as it is located in the picture.
There is a certain order of precedence for CSS files and some special exceptions (that I won't go into much detail). Simply put, when they are mentioned in a html file, the last rule takes precedence. In this case below, the page would first render using the styling found in the main.css file. The <noscript> tag is only used for when browsers are weird with their settings, so don't pay this too much mind. However, then the page would take whatever is written in the betateam.css file and overwrite anything that was first written in the main.css.
You can see visually the browser doing this when you're in the Inspect tool. The properties that are crossed out are lines of css that apply to the specific section/element you've selected but by order of precedence it has been overwritten. See how even within a file the property that is set further down in the file takes precedence (as the margin property is set multiple times in the main.css file).
Now, remember when we changed the background to blue in "The Nitty Gritty Details" module? Doing such a thing as adding styles directly to a specific element is called inline styling. This can take precedence over any rendered style sheet from the <head> and looks like this: <h1 style="color: blue;"> This text will be blue </h1>.
You technically don't need to create a .css file, but your file will look a WHOLE lot cleaner if you keep all the styling in the .css files. This also makes it easier to reuse and maintain consistency with styling.
We're going to be building upon the betateam.css file. This is where people like me spend nearly 95% of their time customizing, fine-tuning, experimenting with all the possibilities. lol. The Inspect tool is your best friend in testing out how certain things look and feel in relation to your page. But first, let's get into the CSS basics...
CSS is the thing where I can only teach you so much, but then its up to you to be creative and design your website how you want it. There are so much to CSS that I won't cover in this course, so if you're really into design this would be something you might want to deep dive in. I will however, teach you how to correctly use your betateam.css file so you can add to it as you want.
In the previous module, Less is More, I briefly mentioned touched on id and class. These are indicators you can use to attach a specific style to an html element. To describe the style of a class in your css file you use a "."
.className {
style: attribute;
anotherStyle: anotherAttribute;
}An Id looks extremely similar, except it is preceded by a "#" instead of a period.
#idName {
style: attribute;
anotherStyle: anotherAttribute;
}Anything that inside the {} brackets are part of that named class or id. You can also add styles to general HTML elements like the ones we learned in lesson #2. HTML elements are not preceded by any punctuation, but rather just their element name.
body {
style: attribute;
anotherStyle: anotherAttribute;
}You can also "nest" elements/id/classes inside each other to create a more specific style. For example if you wanted to add a specific style to every h1 tag that lies within a div within the body, it would look like this. Take this HTML
<body>
<div>
<hi>This would be the element that would have style</h1>
</div>
</body>and this is how you would target that specific div. This can get pretty confusing and hard if you're moving around your HTML a lot, so sticking to classes and ids are the best way to go!
body > div > h1 {
style: attribute;
anotherStyle: anotherAttribute;
}Now for what goes inside the {} brackets!! This is where all the fun is. There are endless possibilities for what can go inside, and all you have to ask is "What if". What if you could have an image be your background? What if you had boxes overlap each other? What if this button did something cool whenever someone hovered over it? All these questions can be solved with CSS. I'll share the basics though: Color, Fonts, and Element Box.
Colors can be described in multiple ways. Whenever you are wanting to assign a specific color to an element you have several options:
-
basic color names: color names like
red,blue,green. -
HTML5 color names: more descriptive color names like
coraloraqua(if it has a name you can find/use it). -
hexadecimal:
#00FF00,#000are the specific shade of a color as if you were to find it in a color wheel. These are more used if you have a specific brand color and it needs to be exactly the same across all browsers. It can either be represented in a 6 digit or 3 digit number. -
RGB:
rgb(0,0, 255), similar in use to a hexadecimal, this will represent a specific color. I don't normally use this representation, and stick to the other three.
You can actually use any font you like on your website - to an extent. Fonts belong to a family and here are some of the common families of fonts.
You can also import specific fonts from Google Fonts by adding it to your project (I recommend putting it in your css file).
Each element is set up with a similar structure. It looks a little something like this: 
Element (in blue) is the pixel size of the element itself (height x width).
Padding (in green) is the space between the element and its border.
Border (in yellow) is the size of the border (if you were to have a thick or a thin border surrounding your element).
Margin (in orange) is the space from one element to another.
Position (in white) is the relation of the element on the page.
What do you want to change on your web page? What do you want to create? Dream and let's do it!! Start adding styling in your betateam.css to the elements you want to customize to make this website really yours. 😄