How to start building CSS for your website?

It is always a huge concern about building your CSS with proper classes and reduced duplicity. In this post, you would be reading about how you set up your CSS according to your own needs when you start to build your own website/portfolio/application.

There are a number of practices which are held while writing HTML and CSS together. Some use the practice of writing HTML first, and then CSS. Some write CSS first and then HTML or some write both along each other.

The practice which I use, is writing the basic HTML and CSS first. Meaning, writing the layout/structure of HTML page and then writing the basic CSS for it i.e., for body tag, h1 tag, h2 tag, p tag, font-face, etc.

But lets not dwell in the air, but focus on keeping the ways straight enough. Lets dive into each of them deeper one by one.

Body tag

It is always the best practice to start building your CSS with the body tag. Keeping the margin 0 and padding 0, assigning the font-family, font-size, line-height, background-color, font color and font-weight. For example :-

body {
 font-family: "Libre Baskerville",Arial,sans-serif;
 font-size: 16px;
 line-height: 1.5;
 color: #3b3a3a;
 font-weight: 300;
 margin: 0;
 padding: 0;
}

Here, I have used “Libre Baskerville” font which I have to import first to use it. You can import the .ttf file with (assuming the .ttf files are in the font directory),

@font-face {
   font-family: 'Libre Baskerville';
   src: url("/fonts/LibreBaskerville-Regular.ttf") format("truetype");
}

Assigning style to the Heading tags

Assigning the heading tags with proper font, font-size and color is another step to build CSS. For example :-

h1 {
    font: 30px "Consolas";
    color: #565254;
    text-transform: uppercase;
}
h2 {
    font: 24px "Consolas";
    color: #565254;
    text-transform: uppercase;
}
h3 {
   font: 18px "Open Sans Regular"
   color: #000;
}

Assigning style to the paragraph tags

Assigning proper styling to the paragraph tags is not only about styling the <p> tags but you have to also think about if your…