With the introduction of HTML, it is inevitable to talk about CSS- Cascading Style Sheets. Through Carrie Dils’s “Introduction to CSS” LinkedIn Learning course, I’ve learned a lot more about the nature of CSS and even gained some tips to keep in mind when I make a CSS file.
What’s CSS for?
So you’ve made an HTML file? There’s headings, paragraphs of words, maybe a picture or two, but it’s a whole lot of nothing on a white background. You could have made this in Microsoft Word.
CSS is your lord and savior: beautification Jesus. Except you have to tell it how to make things look good. You can style just about anything with CSS.
Fonts? Don’t worry! There are classic font you can use or you can also link personal fonts that you found off the internet or made yourself.
Remember that white background I mentioned? Long gone!
Now you can either change the entire document’s background or change specific sections of the document’s background.
Text is another thing you can change the color off.
Keep in mind that you CAN add that wonderful drunk tank pink color you love through hex codes.
CSS is also helpful in organizing information is a visually pleasing way. Through padding, margins, containers and more you can present text and images in ways that fit whatever your goal is.
Biggest Tip to Keep in Mind
It’s important to keep in mind though that in CSS the last rule you write gets applied, but the most specific one wins. What do I mean?
CSS checks different parts of your rule:
- origin and importance,
- specificity,
- the order of appearance,
- and inheritance.
It assigns each one a weight based on an algorithm and cascades down until it finds a winner. You have to make sure you write things the best way in relation to this algorithm in order to get the output you want.
Something Else to Consider
CSS has specific formatting for elements and while it can be implemented directly into an HTML file, you’ll find that it may be easier to simply link it in as a separate file. You’re going to be adding a lot of style rules to different parts of your HTML file and it might get confusing or taxing to have everything on just one file.
Feel like you need a little push? Take a look at my cheatsheet for this course!
Comments
2 responses to “Needs Some CSS”
Great breakdown of CSS fundamentals! It’s amazing how much style power CSS gives you over a simple HTML file—turning it from “just words on a white background” into something truly eye-catching. I think your post does a great job of explaining why CSS is so essential for web design. That bit about CSS as the “beautification Jesus” made me chuckle—so true, though!
You also nailed it with the specificity tip. Understanding the cascade can be tricky, but it’s crucial for anyone getting started with CSS. And yes, keeping CSS in a separate file instead of embedding it directly in HTML really helps keep things organized as you add more rules. Thanks for sharing what you learned!
I always forget that you can link other fonts from the internet instead of just choosing a standard font. I could see how useful that would be if I were doing a big creative project instead of a much smaller one. Plus I prefer the very standard font families. The waterfall, as you brought up in the section Biggest Tip to Keep in Mind, is super important. I know that it can be really annoying to deal with at times, but I really enjoy the fact that it kinda makes sense. If I write a variation inline, then it should apply over the embed. It kinda makes sense.