A Look At CSS Structure
If you saw this post, then you’ve probably had the chance to get up and running and familiarize yourself with the basics of CSS. CSS is how you control how your site looks, as well as how it reacts when users do certain things, such as hover over elements with their mouse, or click a link. However, one of the most important aspects of CSS is the fact that it controls the structure of your site. Let’s take a look at CSS structure, and how it applies to every website.
Web design veterans may stop and say “Wait a minute, html is the structure, and CSS styles it.” Yes I agree, but what I mean by CSS structure is that CSS tells those structural elements, like headers, footers, asides, articles, etc., how large they should be and on which devices they should be that size.
Also, CSS Structure is derivative of the CSS framework you’re using. The structures of many sites are determined by the CSS grid featured in those specific frameworks. For example, Bootstrap is built by default at a 12 column grid. This offers the most flexibility, because you can have 3 columns of 4 or 4 columns of 3. You can also have 6 columns of 2 or 2 columns of six, as well as 1 column of 12 and 12 single columns. This gives you a lot of flexibility when building your site, while giving you an easy system to work with.
Image Size
With CSS, you can determine the size of images. You can use a specific width and height in pixels, or you can use a percentage. The typical way that you set an image size with percentage is to determine the width of an image, such as 30%, and then you set the height of the image to auto. This means that the image will take up 32% of the width of its container, and the height will size proportionately. Then, you usually add 1.3% margin to the right for spacing, so text or the next image isn’t butted up against it. For a row of 3 images, it equals 99.9% of the width of the container. Of course, this is only a mathematical example, but you get the idea.
Media Queries
Media queries are an essential part of the structure of a website, because it controls how a site will look at different screen or device widths. This enables you to handle creating 1 site that looks great on smart phones, tablets and desktops. You can craft a specific look for your site on each of these types of devices.
Box-sizing: Border-Box
This is a prime example of CSS being an integral part of the structure of your website. Box-sizing: border-box is a css style that solves a major problem for most designers. This problem comes from wanting a specific size for your CSS elements, but when you add padding to them, it makes them larger than they are supposed to be. This will break your CSS structure completely, leaving your site a jumbled mess. Instead, Box-sizing: border-box tells an element to be a specific with and stay at that size. Any padding applied to that element will be within that element, keeping it from making the box too big.
Conclusion
Learning CSS structure will enable you to understand how various frameworks work. You’ll understand how columns and rows works as well as percentages and media queries. Understanding CSS structure is the foundation of good, consistent web design. if you have any questions about CSS structure and how it relates to a website, post your questions in the comments section below.
