Coding Newbie

Top 7 CSS Tips When You Start Building A Website

When you start building a website, you have to think about making your web design both effective and visually pleasing. This can sometimes be a Herculean task, but there are some simple CSS tips and tricks you can use.

CSS is getting increasingly powerful, and it currently provides a huge set of options for creating attractive websites.

In this post we will go though a collection of some CSS tips and strategies to help you create web pages while learning front-end web development.

1) Set Default Values

Setting some default values for certain properties will help you reset your design and prevent some unwanted behavior of HTML elements later.

These values should apply to all elements, so we use * symbol. Then, if you want to change something, you just change it at specific element.

* {
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    display: block;
    box-sizing: border-box;
}

2) Create multiple CSS Files

Try to keep your HTML, CSS, and JavaScript code in separate files, but keep different CSS styling in separate files as well.

This is something that is not necessary when creating simple projects. However, as your design get’s more complicated, as different styling applies at different screen sizes, keeping specific CSS code in separate files can be quite helpful. It will make entire code easier to read, follow, and understand.

It can also simplify creating of design alternatives, as you can have one CSS file containing basic, clean design, and then multiple CSS stylesheets with more complex code and design.

3) Use CSS Variables

Powerful feature of CSS are CSS variables. They allow us to store values, so we can easily use them throughout the code and instantly change.

Defining CSS is done in :root of CSS. Most common use is for defining default theme colors, but it can be used for storing any other property value (for borders, element sizes, etc). Changing value in :root section automatically applies and updates variable in rest of the code.

:root {
    --main-bg-color: blue;
    --main-txt-color: white;
    --main-title-size: 25px;
}

div {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    font-size: var(--main-title-size);
}

4) Use Viewport Height and Width

Defining element’s y the use of vireport height (vh) and viewport width (vw) will take into consideration user’s screen size.

This way, if you define container elements height to 100vh, it will stretch and cover full height of user’s screen, which is not always the case with 100% height.

It is a useful if you want some element to always cover 50% of user’s screen. You just set it’s width to 50vw. Another use is setting font size using vh measurement, which will make your font size dynamic and change according to user’s screen size.

.container {
    height: 100vh;
    width: 100vw;
}

5) Use Flexbox to Easily Center Elements

Flexbox is the easiest way to center elements. Not just to center, but to align them per your wish.

Flexbox has many different options to manipulate elements. You can read more about Flexbox property at W3Schools website.

However, when it comes to centering elements, it is the easiest approach.

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* All the elements inside the .container will be centered both horizontally and vertically */

6) Use Transition Property

The transition property is a simple and yet effective way to get smooth transitions when changing elements.

It is mostly used with hover effects, animation, or any other element interactivity to achieve smooth and visually appealing design.

However, when it comes to centering elements, it is the easiest approach.

div {
    background-color: blue;
    transition: 1s;
}

div:hover {
    background-color: green;
}

/* Hovering over div will change the color from blue to green, but not instantly. It will take 1 second, and give us a smooth transition we want */

There are different transition property values you can set.

7) Use Pseudo Elements

Using pseudo elements ::after and ::before is extremely helpful when you wish to add some content in existing element, without creating new element.

These pseudo elements selectors are used to add a content before, or after specific element.

Some most common cases of using pseudo elements are animations. Adding underlines on hover, creating button background overlay, disappearing elements, are just some examples where it is more effective to use pseudo selectors, than to create new elements and make code more complicated.

Default properties for pseudo elements are:

  • content: “”; (You must define content. Even if there is no content like text, you have to set “” as a content to create pseudo element. Than you can style it in CSS and make it a line, circle, whatever you want)
  • position: absolute; (We position pseudo elements with absolute, and parent element with relative value. Then we can easily manipulate their position in relation to element they refer to.

After setting default values, you can set any other CSS rules and styling you want, just like other, regular HTML elements.

.element::after {
    content: "";
    position: absolute;
/* and now add other styling rules*/
}

Conclusion

There you have it, 7 Tips that will help you to start building you own website.

Of course, CSS power and possibilities grown each day, and there are much more techniques that you can use to make your design stand out. These are just some basics that will help you get started, but also tips that you will use through your entire career.

What are some other useful tips and tricks you found out? Please feel free to share them in comments section.

%d bloggers like this: