Default styling of the template

Hello and welcome to this new lecture. In this lecture, we are going to add some default styles in the css file.

To make the template attractive and eye-catching you need to select some good fonts and typographic styles.

Google fonts are the best for doing so. Because there are a lot of fonts available there. And these are completely free. So, let’s go to the google font website.

You can always see some famous blogs or websites to see their font selections. There are some chrome extensions for that also. I am using an extension called what font. I am now in medium.com and if I click here we can see the font name.

You can play around these google fonts here for your typography. But in my case, I have already selected two fonts for this particular project.

Poppins for title and muli for body or general text. ==> import and add

Although we can add them together but we are going to do that separately. If someone wants to change a particular font than it will be easy for him.

Now, we are going to add some dynamic css property. Because it will be difficult for us to mention some hex color code again and again throughout the process. Although we can use this is variables in css preprocessors like scss. We can add root here and add this. Don’t worry, we are going to know the use of these a bit later.

:root {
    --body-font: 'Muli', sans-serif;
    --title-font: 'Poppins', sans-serif;
    --primary-bg: #FFFFFF;
    --secondary-bg: #F7F7F7;
    --primary-text-color: #212529;
    --secondary-text-color: #6C757D;
    --special-color: #E24727;
}

Now, let’s move on to some universal selectors here:

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

You may be thinking about how to use those var values. Let me show you how to use those:

.bg_primary {
    background: var(--primary-bg);
}

.bg_secondary {
    background: var(--secondary-bg);
}

body {
    font-family: var(--body-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--title-font);
    color: var(--primary-text-color);
    font-weight: 500;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}
p {
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

Although bootstrap has its own typography but I like to make my own typography. It makes me comfortable and easy to use fonts throughout the project.

h1 {
    font-size: 40px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
    line-height: 27px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
    line-height: 24px;
}

Let’s add some more

ul li{
    list-style: none;
}
a,
a:hover,
a:active{
    text-decoration: none;
}

One of the causes of rejection from the themeforest is uneven spacing. You need proper alignment and spacing to get approved. As you can see here…every section has a fixed amount of padding. So, let’s use a custom class for that padding which we will use throughout the course.

.py-100{
    padding-top: 70px;
    padding-bottom: 70px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *