How to use CSS from external libraries?

How to use CSS from external libraries?

Hello friends and welcome to this new publication. Last month, we have learned about: <<How to use CSS with HTML>>, which shows us how to use CSS in our HTML document.

Those ways of using CSS are when we want to write CSS ourselves from the scratch.

When it comes to combining CSS and HTML, an important thing to note is that all work is done by the web browser. The browser is the one that takes CSS and HTML to combine them to produce the desired output. The reason why we said in our previews publication that, the browsers have to implement those CSS functionalities so that when we write them, it has to know how to interpret them.

In today’s post, we are going to learn about “How to use CSS from external libraries”. By the end of this publication, you will be able to use any external libraries on your website. You will be able to use a library such as Bootstrap, the popular CSS library that allows you to build a website.

CSS LIBRARIES

There are a lot of CSS Libraries out there, even free.
Others contain more staffs like JavaScript and more. And we will be learning JavaScript soon.

We have:

  1. Bootstrap: the most popular CSS library, created by Tweeter.
  2. Hamburgers.css
  3. Font-Awesome
  4. Ionic
  5. Materialize

Each of those libraries provides different capabilities and functionalities. But the common point is that they have all been created to make life easier for you so that you don’t have to create CSS from scratch.

Let say you want to create a Navbar for your web page, instead of writing CSS code by yourself, you can use one of those libraries to style out your Navbar accordingly.

CSS Libraries, Example of Bootstrap

We are going with Bootstrap, but the same process is applied to any CSS library.

<html>
     <head>
         <link rel=”stylesheet”  href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css”>

This is how to link a Bootstrap CSS library, that is hosted on a CDN (Content Delivery Network) server.

And servers that are made to host such kinds of code are called CDN servers.

Note: Even if you write CSS from scratch by yourself, you need to upload it together with your HTML files and images to a hosting server then the browser can access it by the URL you provided to style your page. Likewise, Bootstrap has created his library and made it public to use by anyone that has the link.

If you don’t want to use the CDN, you can download the source code from the Bootstrap website from www.getbootstrap.com and save it to your computer inside your working repository alongside your HTML then link to that file like this:

          <link rel=”stylesheet” href=”css/bootstrap.min.css” />

Pro and Cons

Pro of using CDN is as follow:

– Less file size

– Less HTTP request. This means when a user visits any other website that contains the same CDN previously and visits your website later, there is a copy of that CDN file saved in your browser, in your cache memory.

Cons is that you don’t have access to this website that may sometimes be unavailable, but for most cases, they are well managed to avoid such interruption.

The 4.6.0 we saw there in that URL just means, hey browser use bootstrap version 4.6.0 to style my web page.

When you reference that URL correctly, you can start using Bootstrap on your website.

As you insert it in your web page, the question is how to use the bootstrap?

Here is how to use it:

<!DOCTYPE html>
    <html lang=”en“>
        <head>
        <meta charset=”UTF-8“>
        <link rel=”stylesheet”
href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css“>
        <title>Hello, world</title>
    </head>
    <body>
        <div class=”row justify-content-center mt-4“>
             <div class=”col-md-4 bg-primary“>
                <h1>Content 1</h1>
                <p>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Maxime mollitia, molestiae quas vel sint commodi
                      repudiandae consequuntur voluptatum laborum numquam 
                      blanditiis harum quisquam eius sed odit fugiat
                </p>
             </div>
             <div class=”col-md-4 bg-primary“>
                <h1>Content 2</h1>
                <p>
                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Maxime mollitia, molestiae quas vel sint commodi
                      repudiandae consequuntur voluptatum laborum numquam 
                      blanditiis harum quisquam eius sed odit fugiat
                </p>
             </div>
         </div>
    </body>
</html>

 

Here, is the output of the above code

Recall from our previous publication, we learned about CSS selectors, and if you miss it, read this: <<How to use CSS with HTML>>. Bootstrap uses a class selector and they defined all roles in their files. to use them in our pages, we just need to create a class attribute and give the propriety name as bootstrap named them, then we can see the result displays.

As we saw in the above code, we tell our browser, 

– “Hey browser, for the first div, here is a class with name “row” and another class “justify-content-center” that tells the browser to set that row in the middle of the page and last class “mt-4” that give our row space on the top of the row of 1.5 rem. mt-4 just means, margin-top of level 4. Then the browser is going to look in any CSS file linked in our project, in our case it is bootstrap CSS from CDN, to find that property named “row” and all the rest to apply one row to our page and other roles. Then the browser engine will jump to the next line, inside of that row, with is:

– Second div with a class named “col-md-4” to create the first column of dimension 4/12, and do the next class of “bg-primary” which means the background of type primary, which is a blue color that we can see on the output.

– Then the engine will jump to the next line, and so on to finish the entire page.

If you want to read more of those bootstrap classes, visit this site: 

https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/ 

Using Bootstrap can save you a lot of time, but you have to learn how to use them.

You can read the documentation on their website.

All other CSS libraries works also the same. Here we only took one example, which is bootstrap.

In Conclusion, We have learned about CSS Libraries that can save us a lot of time and make our life easier. To use any above-mentioned libraries, read the documentation on each library to understand their capabilities and designs. But all accomplish the same goals.

You can use the CDN link, or download the code on your computer for development and insert it in the head of your HTML page. Then use class selectors to apply the styles.

In this post, we choose bootstrap which is the most popular CSS library used worldwide to show how to.

Thanks for your time.

Leave a Reply