My Profile Photo

Rachel on Ruby


A blog about my adventures in web development using Ruby.


Box Styles

Intro

I believe every programmer needs to know the basics of HTML and CSS so that they can navigate through a web page. In CSS alone, there are a million ways to style an element, which can be overwhelming. This post will go over some of the more basic concepts in styling a web page using CSS, with a focus on box styles.

At their core, web pages are composed of different sections, also known as containers or boxes. In CSS, boxes are a way to group elements such as text or images so that they appear on the page in the format you want them to.

Box Sizing

A basic element has 3 main properties: width or height (or both), border, and padding. This image shows how these relate to each other. Box Model

The default way to set these properties is by adding all three (width + border + padding) to get the actual width on the rendered page. This can cause confusion because this means that the actual value of the width or height property will be less than the rendered value. When you start getting into responsive web design where the width of your page changes, this can get complicated. Plus, math.

The box-sizing property solves all these problems (for the most part). This property includes the padding and border in an element’s total width and height when set to border-box. You can then set the width of an element to be whatever you want, along with your desired properties for the border and padding. If your CSS code includes box-sizing: border-box the math will be calculated for you and the box rendered correctly. Box Sizing

Other Box Properties

There are other properties used for box positioning such as inline, floating, etc. One tip - if you have a floating element that is dependent on an inside element for setting the width (like floating a column as a sidebar and using an image inside to set the width) you need to be careful that you don’t get a “collapsed” element. The easiest way to prevent this is to use the clearfix. Apply an additional class to the parent like this:

.clearfix:after {
    Content: "";
    Display: table;
    Clear: both;
}

This will apply a hidden element which will clear the float, preventing the parent element from collapsing. (Note - this is a simple version. There are modified versions if you need to work with older browsers.) Regardless, there is much more to say on this topic, so please see the resources listed at the end of this post for more details.

You can also style borders, border-radius (enabling you to round an element’s corners) and shadows (including shadowing the text inside). You can set a box’s transition speed if you are using any animations. You can even use block styling to spice up your links, like so:

See the Pen Inline Link by Rachel Stratemeier (@LonghornRach) on CodePen.


And here are some other examples of basic styles:

See the Pen Shadow by Julio Corpus (@jcorpus) on CodePen.


See the Pen Glossy Shadow Button by Rachel Stratemeier (@LonghornRach) on CodePen.


See the Pen Single Slant CSS3 Divs - ("Responsive Razorblade Rectangles") by Daniel McClintock (@danielsmcclintock) on CodePen.


See the Pen Multi-Level Navigation by Rachel Stratemeier (@LonghornRach) on CodePen.


Other Resources

General

Element positioning

List of Code Generators - https://www.sitepoint.com/10-best-css3-code-generators/

This is just the tip of the iceberg when it comes to designing using CSS and box-styles, and there are far more qualified people to teach you (see resources above). However, hopefully this showed a sampling of all the different things you can do with CSS without using Javascript or frameworks.

comments powered by Disqus