CSS HOW TO HTML SOFTWARE WEBSITE DEVELOPMENT

How to link CSS to HTML

how-to-build-a-simple-website-with-html-css
Written by encodedBicoding

How to link CSS to HTML is a continuation from my last post on How to create a simple website with HTML and CSS

Introduction to CSS

Cascading Style Sheet, as I said in the above tutorial is more like a skin to the HTML skeleton. In this tutorial, I will be teaching you how to link CSS to HTML and also ensuring that you write your first CSS code. Excited? let us begin!.

Ways to link CSS to HTML

There are about 3 ways to your CSS code working in HTML, 3 ways to link your CSS code to HTML, they are:-

    • Inline CSS: Each tag or element in HTML  has a style property by default, this style property can be used to write simple CSS code that will affect only the element.

Now, let us change the color of the h1 element created in how to create a simple website with HTML and CSS to red.

    • Internal CSS: To link CSS internally to your HTML, there is a styletag we can use. This tag is usually placed on the head section of your HTML file. Now, let us use this type of CSS linking to make the h1 element change from red to blue.
    • External CSS: As the name implies, linking CSS to HTML externally requires you to create a new file with a .css extension. This will mean that every CSS file must end with a .css extension. For example:- style.css, index.css, external.css. To link your external CSS to HTML, still in the headsection of your HTML page, you will need to add a linktag. This link tag will be the bridge between your CSS file and your HTML file. This linktag has two main properties we can use to link CSS to HTML and they are:
      • a. rel: I always call this relative. rel should be equal to stylesheet. To read this through, I say… relative to stylesheet.
      • b. href: You will see this property often when you work with the HTML anchor or a tag. This property is what tells the browser the path to load your CSS from.

How to use ID and CLASS in CSS

I have been looking for a way to add a famous quote to this article, I think I may have us found it. ‘with great power comes great responsibility’. CSS has great power, how you choose to write it becomes a responsibility to the engineer. Say for instance, in our current codebase, we have been styling the h1 tag, what if we had several h1 tags in out HTML code and we need them to have different styles. With our current implementation, it would not be possible, as all the h1 tags would be styled accordingly throughout the website. Now, this brings me to why we are in this section. How do we use ID and CLASS in CSS?

ID

See ID as the identity of a tag and you would be glad. Identity simply means, who are you? hey, who is this h1 tag you want to style?. We would be using external CSS moving forward.

To further buttress my point, if you view the code base now, you will notice that all the h1 tags have the same color. This isn’t what we want at this point, as we need different colors for different h1 tags. You would also notice the id property in all h1 tag, each id has a different value assigned to it. The different values signify different identities. Now, Let’s make magic!

In the above codebase, we prepended # to the name of each id’s and gave them a different color value. If you look at your browser, you would notice each h1 now has a different color. Something like the following image

how-to-link-css-to-html-image

The image depicts a browser view of CSS linked to HTML and styled with different id’s

I think it is worthy of note to add this, PLEASE WRITE THE CODE, DON’T JUST COPY AND PASTE. I often find some students I mentor privately forget the CSS syntax because they simply copied and pasted code. This is a bad habit while learning to code.

CLASS

  • The best use of a CLASS in CSS is to put a list of tags in a defined group. For example, I could try to create navigation for my website and typical navigation would consist of h1tags, a tags, ultags, litags, a divtag or the HTML5 navtag. It is best practice to place all such tags in one parent tag and give that parent tag a class of say ‘nav’ or ‘navigation’. I will now create navigation for our simple website.
how-to-link-css-to-html-explain-navigation-in-html

A simple Navigator

The above image is how the final navigation would be after you type in the below code.

Explaining the code

I created a parent nav element and gave it a class of ‘nav’. I aim to style this parent element using its class attribute. Next, I wrote the skeleton for the navigation which comprises another parent div element, this div item was given a class of ‘nav_list’. This div element will be the direct parent of our list items, and from the code, we gave each litag id of ‘nav_item’ as this is their current identity.

In the CSS code, you will also notice that the way we style a class property of an element is different from the way we styled its id counterpart. A class property is styled prefixing a . before the value of the class.

Don’t stress yourself now about how I achieved the styling as I will explain what each property does.

For now, I would like you to experiment with the code, try to change or remove some CSS properties and see how it affects the code

In the meantime, read about CSS flex 

About the author

encodedBicoding

Software Engineer || Tech Enthusiast.
Ex @andela
Github: https://github.com/encodedBicoding
Geek Name: EncodedBicoding
Real Name: Dominic Isioma Olije

1 Comment

Leave a Comment