Joy Opeyemi Oluwafemi's Blog
How to Style HTML Elements Using External CSS

Photo by Pankaj Patel on Unsplash

How to Style HTML Elements Using External CSS

Styling your Web Pages

Joy Opeyemi Oluwafemi's photo
Joy Opeyemi Oluwafemi
·

4 min read

Table of contents

Introduction

Although I have not seen the crude state of gold before, but it is widely said that gold is very much appreciated after being refined. The refinery process of gold which involves a lot of heating, drilling etc is needed to bring out its beauty.

So also, for a web page to be alluring and be found attractive, its content, which is, Hyper Text Markup Language (HTML) file must be worked on and must pass through some refinery processes.

One of the refinery processes which I will call ‘styling with external CSS’ and how to properly use this refinery stage to implement as well as to effectively bring out the beauty of your webpage is what I have carefully taken my time to explain in this article.

What is CSS?

Cascading Style Sheets(CSS) is the language used to style webpages and to make them look attractive by stating rule declarations to control HTML elements.

While HTML is used to structure web pages, CSS is used to determine the layout of web pages for a variety of devices.

Since CSS is used to control HTML, it is, therefore, important to examine how CSS communicates or interacts with HTML

Linking CSS file to HTML file

There are three(3) types of CSS which are;

  1. Inline
  2. Internal
  3. External

Each type has its unique way of establishing a connection with HTML. This article however focuses on the External kind of CSS which makes styling easier and the most widely used.

The word 'external' in 'External CSS' implies that there is a separate ' CSS file' somewhere. To establish the connection, the separate CSS file must be merged with the HTML file that you are working with.

With the above understanding, here are the steps to take to link CSS with HTML

Step 1

Create a new file with the extension '.css' i.e 'styles.css'. As you work on big projects that require two or more CSS files you should also consider putting all your CSS files inside a folder. There is a practice of naming the folder that contains your CSS files 'styles'. It is however a naming practice, not a rule.

Step 2

Link your CSS file inside the HTML head element. This is done by nesting the <link > element inside the <head> HTML element.

Step 3

<link > should have attributes of <rel > and <href >. <rel > should have the value of 'stylesheet' to specify that the file is a type of stylesheet and the value of <href > should be the path to the CSS file you want to work with because the attribute points the browser to that location of your file.

Here is an example when you are pointing to a file; 

<head>
  <link rel=" stylesheet" href="styles.css">
</head>

Here is an example when you are pointing to a file inside a folder; 

<head>
  <link rel=" stylesheet" href="styles/styles.css">
</head>

Step 4

Boom!!!! You can now open your CSS file, select the HTML element and start declaring rules that will make your webpage look attractive

Let's style our web page using our new CSS file

Our HTML file

<html>
<head>
  <link rel=" stylesheet" href="styles.css">
</head>
<body>

  <h1>Cascading Style Sheet</h1>
  <p>Cascading Style Sheets(CSS) is the language used to style webpages and to make them look attractive by stating rule declarations to control HTML elements. </p>

</body>
</html>

Our CSS file

body {
  background-color: grey;
}
h1 {
  color: blue;
}
p {
  color: black;
}

Copy and paste the above snippet into the HTML and CSS files you created in your IDE to see the live output.

A simple breakdown of what we've done;

Step 1

We selected the <body> element and declared that it should make our web page appear in grey colour using the property and assigning the value of to it.

Step 2

We selected the <h1> element and declared that it should make the text within it appear in blue colour using the property and assigning the value of to it.

Step 3

We selected the <p> element and declared that it should make the text within it appear in black using the < colour> property and assigning the value of to it.

Conclusion

In conclusion, practise makes perfection, therefore, try to practice by repeating the above steps till the processes become piece of cake for you.

Thanks so much for reading, I hope you found this article useful. connect with me on Twitter @JoyPaces

HTML5CSSFrontend DevelopmentWeb Development