Anyone else come back from fall break, look at the CSS how-to linked in videos and go ‘oh boy.’ I hope I’m not the only one. It was a lot, but overall very informative. I’ll go over some of what all I was able to take away from it.
CSS: The Magic Behind Web Design
Alright! Let’s talk about CSS (Cascading Style Sheets) your best friend when it comes to making web pages pop! The one thing we took notes on this week! Think of CSS as your toolbox for styling everything from fonts to layouts, turning plain text into something visually stunning, or at least sticks out. CSS makes everything look pretty. A little make up for the web page.
What’s the Deal with CSS?
So, what’s CSS all about? CSS is a set of rules that dictate how HTML elements should look. You’ve got selectors that point to your HTML elements and declaration blocks that contain all the fun styling details. For instance, if you want your paragraphs to have a cool blue color, you’d write p { color: blue; }. Easy, right? Or you can use a hex color number, etc. Lots of options. You can apply CSS in three main ways: inline (right in your HTML), embedded (in the head of your document), or external (the most popular method, where you link to a separate .css file).
I believe I’m able to understand the basics of CSS, but using it is another story for me.
Default Browser Styles: What’s Up with That?
Every browser comes with its own set of default styles, which can be a bit of a wild card. What looks great in one browser might not look so hot in another. To tackle this, you can use CSS Reset or Normalize. CSS Reset clears out all those default styles, while Normalize smooths things over for a more consistent look across browsers. I question why anyone would use reset though since it would just take away all the work.
The Box Model: Your Layout Buddy
Now let’s chat about the box model, which is the foundation of layout in CSS. Every element is treated like a little box with content edge, padding, border, and margin. Understanding how these work together is key to making everything fit just right and making a design look good. Think of it as arranging furniture in a room. You want everything to look good and have enough space to breathe.
Write CSS Like a Pro: I believe in you
To keep your CSS organized and easy to manage, use comments to explain your code, stick to consistent naming conventions, and group related styles together. This makes it easier for you (and anyone else looking at your code) to understand what’s going on. I know I’ll definitely be making lots of notes so I can remind myself of how everything works.
Overall, I think I have the basics and I hope this post helped you guys understand things a little more too. Writing this helped me put some things together from all the CSS stuff that was thrown at me. I wish you guys luck!
Comments
2 responses to “All the CSS (Oh boy)”
Oh boy indeed. First of all I love that you called it make-up for the webpage lol. Initially, I was really excited by the idea of being able to change the font and color of my work but then I remembered that meant I had to write the CSS. I also feel similar to you in that I get that CSS is really similar to the other markdown languages but I really don’t know how to apply it yet (tried writing it and nothing worked). I also thought the idea of default browsers was really interesting I’d never heard of that concept before. Unfortunately, you should not believe in me but thanks.
I appreciated you mentioning CSS Reset and Normalize. I had forgotten about those two aspects. I have to agree with your comment about wondering why anyone would use Reset because it seems like Normalize would be consistent and efficient to use. Using comments is something I definitely need to start doing more often. They make it so much easier to glance at your code and know what is going on rather than having to reread and make sense of it everytime.