This week we worked with Carrie Dils to learn how CSS is written and how it interacts with HTML to create the visual effects on a site. My first impression of CSS is that it seems a little more complicated than HTML just because of the fact that you have to think about parents and children and IDs and classes and much more. However, I think that how everything works together will become more clear when I start to really dig in.
As a whole, though, CSS is the wallpaper in a new house. I also like to think to think of it as the decorations that one adds to a new house, apartment, what have you. Whereas HTML is the foundation, – the walls, floors, etc. – CSS is the paintings on the walls, the rugs, the random plants that live in every corner of the house. It’s what takes a site from plain and ordinary to something unique and eye-catching.
CSS is a valuable tool not only for it’s decorative ability but also for its ability to rearrange the content on a site. This is something new I learned from Dils’s tutorial: with CSS, you are able to shift content to different areas of the screen. So instead of all of your content sitting on the left side of the screen, you are able to center it, shift it to the right, move it up or down, whatever you want! This feature of CSS is really interesting to me because having everything on the left for our How-To Porjects really bothered me because it looked super… boring. Looking forward, I want to try to incorporate this feature into my Verification Quest project.
Another aspect of CSS I learned about was borders vs. padding vs. margins. (I still don’t have this straight in my head totally, so bear with me.) Padding is the space between the edge of the content and the border; a border is a line around the content; the margin is the space around the content’s border. And all of these things can be changed to make your sie look however you want it to. I think this is interesting because if you want a border to sit farther outside your content, you’re able to change that by increasing the padding.
Overall, I’m really excited to get into CSS and learn how that, along with HTML, takes my projects to the next level in terms of aesthetics and appearance.
Comments
2 responses to “Dils and CSS (HTML but prettier)”
I’ve had a lot of fun with CSS so far. I actually like it a lot more than HTML for some reason. I’ve been struggling with the portion of it all. I don’t think my brain is computing how to connect the two yet. It’s been a lot of fun testing out my limits with CSS. I’m still working with the border/padding element that you talked about. Google has become a fast friend in this process. I agree with what you said about our how-to guides looking boring. It has been really rewarding and honestly a little bit exciting to see how the CSS changes the look every time I try something new. I am currently trying to overlay text onto an image, and that is proving nearly impossible. I look forward to seeing what you come up with in class!
Hi Bailey! I enjoyed reading your post. Your comparison between HTML and CSS and a house’s construction and decorations was a really smart way to relate the differences between the languages’ functions. I’m already having a fun time picturing my HTML document as a little house I get to decorate via CSS 🙂 I also thought that padding vs borders vs margins was interesting. I had never considered how many different layers there were to a box on a webpage; I just thought there was some singular measurement for the space around it. It’ll be fun to really dig into CSS and customize the look of our documents. Great post!