10 CSS Tips for Beginners

CSS Tricks and MDN docs are some of the best resources for CSS out there!

Web3Schools is not a reliable resource.

You can also refer to https://html-css-js.com/css/ to experiment or https://www.frontendmentor.io/ to practise!

Let's get started!

1 CSS Variables or (Custom Properties)

The bigger your website, the larger the CSS file, and more the repetition of values such as colours, font-family, and sizes. To make it easier to modify these in all places at once, we can use CSS variables.

These are set using custom notations such as -

:root{
    --primary-color: red;
    --background-color: black;
}

and accessed using var() which replaces the reference with the value of the variable

body{
    background-color: var(--background-color);
    color: var(--primary-color);
}

Another benefit of using variables is that they are more meaningful, that is semantic. Naturally, understanding and writing --background-color instead of #000000 is easier because we don’t have to keep track of cumbersome hex codes or RGB values.

2 Selectors

Selectors decide to what elements a set of CSS rules applies.

Such as:

a) Tag selector

 p{
     margin: 2px;
     padding: 1rem;
    }

where p is the HTML tag for paragraph <p> <p/>.

b) Class Selector

.className{
    margin: 2px;
    padding: 1rem;
}

where a set of elements contain class='className' as attribute.

c) ID Selector

#idName{
    margin: 2px;
    padding: 1rem;
}

where a single element contains id='idName' as attribute.

IDs are unique but classes are not. That means that there can only be one element which has a particular ID. When we have to style similar elements the same way we may assign all of them the same className.

Selectors can also be combined such as div,p means all divs and paragraphs but div p means all paragraphs inside divs.

3 The CSS Box Model

All HTML elements can be considered as boxes or conversely, we can say that all HTML elements have boxes around them. Understanding these boxes helps us in understanding the layout. It is impossible to align items without having a good understanding of The Box Model and CSS units.

Now, there are two kinds of boxes, inline and block. There are two major differences between the two.

First, block elements start from a new line, inline elements don’t. Secondly, height and width properties can be applied to block elements but not to inline elements.

<div>, <p> and <h1> tags are block elements but <span>, <em> and <strong> tags are inline by default.

• Content: content consists of text and images
• Padding: is the space around this content
• Border: border goes around the content and the padding
• Margin: margin is the space around the border

4 Flexbox

The easiest way to resize the items on a screen dynamically is using flexbox. The idea behind it is to be able to use the space in the best possible way by doing minimum work.

To enable flexbox, we have to set the property display: flex to parent element functioning as the container.

<div class="container">
    <div class="item"> 1 </div>
    <div class="item"> 2 </div>
    <div class="item"> 3 </div>
</div>

.container{
    display: flex;
}

This allows the direct children of the parent container to be aligned using flex.

To stack the items on top of each other in a column we can apply, flex-direction: column to the container, for the items to be placed in a row we apply, flex-direction: row to the container.

There are several other properties that can be used here to render the items in any way possible. One such way to center an element in its container is by adding these properties to the container:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

For a more detailed explanation, please visit [css-tricks.com/snippets/css/a-guide-to-fle…].

Flexbox is usually used for 1D layouts.

5 CSS Grid

A grid divides the page into regions. The parent element is defined as a grid so that its items can be arranged using a grid layout.

.container {
  display: grid | inline-grid;
}

Then, the layout of each item can be defined using:

.one{
      grid-column: 1 / 3;
      grid-row: 1;
}

A responsive grid has 12 columns.

Grid is usually used for 2D layouts.

For a more detailed explanation please visit [css-tricks.com/snippets/css/complete-guide…].

6 Media queries

Sometimes, we might want to change our layout depending upon the device being used or certain specifics such as its screen resolution or viewport, that’s where media queries come in.

For this, we pick certain values of the screen-width as breakpoints.

To change the background to light blue on a screen of width 600px or smaller, we use this:

 @media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Media queries are used to make the layout responsive.

7 CSS Units

It is also very helpful to know the different CSS units because a lot of the properties of CSS are defined using these such as margin, padding, border, and so on.

Some commonly used CSS units are:

• em : Calculated relative to the parent element’s font-size. For example, 2em means 2 times larger than the parent’s font-size.
• rem : Calculated relative to the root element’s font-size. For example, 2 rem means 2 times larger than the root element’s font-size.
• px : 1 px is one pixel, this varies according to the screen resolution of the viewing device.
• % : percentage value is relative to an element too. For example, 25% of the width of the container.

I find it useful to use px for small spaces and widths such as borders and margins but for the size of larger items, it's more sensible to use rem, % or em.

There are other CSS units besides these. However, these are the most commonly used ones.

8 Clear fix

Clearfix is used to clear floats. Now, what does that mean?

When an element is floating and is taller than the element containing it, it overflows. Clearfix is a way to handle this.

Essentially, clearfix is :

.clearfix {
  overflow: auto;
}

Clearfix can be applied to any element using

.parent::after {
      content: "";
      display: table;
    clear: both;
}

This uses the concept of pseudo-elements, but I won’t confuse you with that. Nevertheless, here is a reference for it. [css-tricks.com/snippets/css/clear-fix]

9 margin:auto

Often, I’ve had trouble aligning items in the center of the container. There is actually a very easy way to do it.

We can simply add margin:auto to the element. By using that, the browser calculates the margins and in certain cases, this can also be used to horizontally center the elements.

10 Resources

Here are a couple of resources I use while designing websites.

• For icons : flaticon.com
• For images : unsplash.com
• For colour palettes : coolors.com
• For illustrations : undraw.co
• For fonts : Google Fonts

Extra tip : Also make a habit of using the Chrome developer tools. They can be very useful while working with CSS. Inspect the elements using Ctrl + Shift + I on google chrome.

Lastly, comments are extremely useful when you want to review, add or modify anything. So, keep in mind that the CSS file is well structured and code is written neatly with comments added to explain different sections such as typography, containers, lists, links, and so on.

I hope this helps!

Bye!