15 CSS Tips, Guides, and Code Snippets for Beginners
By: Jack Hilscher
Tags: Css Grid, CSS, Programming, HTML, Learning To Code

T he Basics

How do I get started with CSS? What should I be thinking?

CSS is used to style the elements that exist in HTML. Without CSS, websites would be a white background with black text, with all of the DOM elements stacked vertically in the top-right corner. Every website has begun this way, so don’t worry if that’s what yours looks like!

Tip: Put borders on every element

How do you know where all of your elements are, or how they relate to other elements? First thing is to put a border around everything!

border: 1px solid black;

The above code will add a border around your element, informing you visually what space it takes up. Bonus points if you have different widths, styles, or colors to help you differentiate elements from one another. These borders exist to know where an element is relative to the page and are a great way to understand your DOM nodes and plan your final design. There are some plugins, such as the Chrome Extension Pesticide, which will add borders to existing webpages.

Why this is useful: Not being able to visualize your CSS changes can inhibit your understanding of the space HTML elements take up. Especially when you are messing with the width/height of elements, moving them outside of the DOM hierarchy with position: absolute; , or when you are using Flexbox or Grid to move around the structure of your app (see below for more details!). Using borders around elements also helps to visualize the Box Model!

Guide: The box model

The Box Model defines the layout of a DOM element: It is a box made of concentric boxes. The content of a DOM element comprises the content box. The content box is surrounded by the padding box, which adds extra space between the content and the border box. Outside the border of a DOM element lies the margin box, which adds (or subtracts) space between this element and other elements adjacent.

If you ever forget or need a visualization, open up your developer tools (Chrome: Crl+Shift+i on a PC, Cmd+Opt+i for Mac), and go to the Elements tab. Towards the bottom (if it’s not there, click the Computed tab) is the Box Model for whatever element you happen to be looking at.

Auto is the content, surrounded by the padding, the border, and the margin. Auto is the default width and height of the contents. In this case, no content!

Why this is useful: When adjusting the values of a content’s width or height, and the padding, border, and margin, you should know what you are changing. Often I find myself wanting to change the spacing between elements, and I adjust the padding instead of the margin. Be wary: Setting the width and height of an element only changes the content box, not all of the elements. If your DOM element has this styling:

width: 150px;

height: 200px;

padding: 10px 20px;

border: 3px solid blue;

margin: 25px 30px;

the total height of this element is 200 + 10 + 3 + 25 = 238px and the total width is 150 + 20 + 3 + 30 = 203px , which is significantly larger than the height and width you might be expecting. Check out Box Sizing for more details about an alternate box model.

Tangential tip: Divitis

Though this tip is about HTML, CSS is really just applied HTML. When you are constructing your website, you may be tempted to use the div tag (division) as your HTML element because it’s what you see in sample code, YouTube videos, or other quick explanations of HTML. However, using the div tag for every situation is both harmful for your website’s accessibility for your users and causes you to write unnecessary code when designing.