So far we have used html to put content on our web page. Now we want to use CSS to style the contents to make it look the way we want it. We will continue to work on our small post that we developed with html previously.
what is CSS
CSS stands for Cascading Style Sheet. CSS defines exactly how the html element should look. Understand this: html is the content while CSS is the style. Without CSS, the user may get bored and leave the page without taking a second look at your content.
There are 3 ways to use CSS.
- You can write CSS code inside and html tag using the style attribute. Example <p style=”font-size: 120%”>
- CSS can be written in the head section of an html document e.g.
<style>
P {
font-size: 120%;
}
</style>
- CSS can also be put in an external file
P {
Font-size: 120%;
}
Learn more in TechForest: 4 Amazing Digital Marketing tips for high website conversion
Now remember that number 3 is what we do in most of our projects. CSS helps us separate content from style and that is why we put all our visual style in separate file. It is a much cleaner solution and therefore all developers does it that way.
Now let’s go back to VSCode
- Click on the file menu and click ‘New’.
- Save it as style.css
This file then appears as your working file on the left side of the VSCode.
- Now you have to make the html document know which file our css will be. In other words you will link the 2 files together. To do this we use the <link> element which has no closing tag. Just <link> which is placed within the head element of the document.
<head>
<link>
</head>
To start, we want to tell the browser that we want to link to a stylesheet so we use the html attribute rel.
<link rel=”stylesheet”
- Next we tell the html document that it is a CSS file
<link rel=”stylesheet” type=”text/css”
- Finally with the href attribute we used before, we tell the document where the styles are. And this is the file we just created before.
<link rel=”stylesheet” type=”text/css” href=”style.css”>
Now this two documents are linked. Now we are ready to start writing some CSS. Let’s do It.
Starting to make our Web Page Pretty: Text
Now let’s start with text formatting to help you see how CSS works. It’s easy.
Click on the CSS file you just created. It is displayed on the left side of the your code editor.
CSS is written in rows. Each row consist of a selector and a decoration block.
Now let’s format the main heading of our project.
h1 is the selector and will select all h1 elements. h2, p, etc. are also selectors. This means that all h1 element will be formatted with the code we will write in the decoration box within the curly brackets.
- Let’s start with the text color. We will choose green for this example and then we close with a semi colon
h1 {
color: green;
}
Now observe in your browser that the h1 heading has changed to green. The property here is the color and the value of the property is green.
- Next we will change the font size.
h1 {
color: green;
font-size: 40px;
}
You can alter the font size (50px, 60px, etc.) to see how it changes
- Now let’s add the font family
h1 {
color: green;
font-size: 40px;
font-family: Helvetica Neue, Arial;
}
We chose ‘Helvetica Neue but if this font type is not in your system it will display ‘Arial’ as the second option.
- Now copy the properties of h1 and paste below the closing curly bracket. Change the h1 to h2. You notice the h2 element in your browser is now the same with the h1 element. So enter new values as shown below:
h2 {
color: red;
font-size: 25px;
font-family: Helvetica Neue, Arial;
}
- If you notice, h1 and h2 has certain properties in common.
Read more: Mini-grids: How to solve rural electrification problem in Nigeria
To make your code neater, it is important to group all properties that are similar in h1 and h2 i.e. h1, h2. This is how your code should look by now.
h1, h2 {
/* We pick the color and font family while leaving the font-size*/
color: green;
font-family: Helvetica Neue, Arial;
}
Now what remains of h1 and h2 is their font sizes which is different.
h1 {
font-size: 40px;
}
h2 {
font-size: 25px;
}
Now the final code will be like
h1, h2 {
/* We pick the color and font family*/
color: green;
font-family: Helvetica Neue, Arial;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 25px;
}
This is because the color and the font family is already declared in the comma declaration (h1, h2).
- Now let’s format the paragraph
To see what we are doing clearly I would suggest you delete those random text we added in the paragraph to see how bold, italics, underline, etc. works i.e.
Delete where I enclose with this sign <!– –>
<p>
<!– Delete from here
This is a very <strong>strong</strong> text and it is designed to be <strong>bold</strong>.<br>
I would like to <em>emphasis</em> how important it is to follow this course to the end. Don’t run <em>away</em>.<br>
This text is some <u>underlined</u> text. <br>
End here –>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
</p>
- Now we will use the p selector in the <p> tag
We will add font size to be 18, we will align the text to justify by using the text-align, we will add the font family as Helvetica Neue and a second choice as Arial. So your code for paragraphs <p> tag will look this way
p {
font-size: 18;
text-align: justify; /* You can make it center, left or right */
font-family: Helvetica neue, Arial;
}
- Finally we will format the link.
Go to the top of the css file. That is before any declaration at the very top of the page. We will define a row for the body. Since this rule is defined for the body, then it will be applied to everything that is visible on a web page.
That means all element that has no defined style. This can be seen as a global rule.
body {
…
…
}
Now copy the font family right into the body
body {
font-family: Helvetica Neue, Arial;
}
Notice now that everything in your web page is now the Helvetica Neue font family. Even the text in the link. So even if you delete the font family in the paragraph decoration box it does not affect the appearance on your web page.
Cut the font-size decoration of the p element which was 18px into the body decoration also.
body {
font-family: Helvetica Neue, Arial;
font-size: 18px
}
Now you notice that even when you have not defined any decorations for the a tag, the link automatically becomes 18px and the font-family is Helvetica neue or Arial as the case may be.
The reason this works is because of the CSS inheritance which is a very important concept in CSS.
We change the font size of the body and so the element inside of the body inherits its style. The child elements inherits the property from the parent element unless we override their styles as seen in h1 and h2 elements.
Amazing. It has been an exciting day right? OK I will give you the full code later but for now let me see how you could arrange your code.
Very soon you will feel the joy of getting your first project online and be pushing your business to a global level through the internet. Congratulations in advance. If you did it, please drop your final code in the comment section. Best comment MAY have a take away at the end of the course.
My final code
Body {
font-size: 18;
font-family: Helvetica neue, Arial;
}
h1, h2 {
color: green;
font-family: Helvetica Neue, Arial;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 25px;
}
p {
text-align: justify; /* You can make it center, left or right */
}
This course is completely free. You are free to invite your friends, children, relatives, etc. to join us in this journey. However, if you want to support us to be able to continue helping young people to have the basic knowledge in Tech and Web Development, you can reach us on WhatsApp 08034417104. Don’t forget to use the hashtag #90DaysinTechForest for any post you are making as regards this course. You can also click the link below and fill out the form to join our community.
