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;
}