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...