Using External CSS Libraries Absolute Beginner

Using External CSS Libraries Absolute Beginner


You can use external CSS libraries to help code you website faster. CSS Libraries are CSS code preprogrammed. Once you know the structure of CSS code then you just name your elements or "tags" after the libraries structure. Many of the CSS libraries that are available help you create responsive websites.

#AbsoluteBeginner

Programming CSS Code

In an earlier lesson we programmed a mini website with CSS. We learned that first we need to set up the id's and classes then we style them with CSS commands. We also learned that browsers have their own set of CSS in them. There is something called a style-sheet reset. What the reset does is takes common things that browsers have programmed in them and sets them back to zero. Then you just enter your CSS commands to control what you want the webpage to do.

HTML Structure with CSS

You have to first set up your elements in HTML. Then you style them with CSS. Everything of course starts with the HTML. If you do not have HTML elements in place you cannot style a webpage. You can have HTML without CSS but not the other way around.

Advantages To Using CSS Libraries

There are several advantages to using CSS Libraries. I will list them here in a bullet list.
  • Code Faster.
  • Responsive for all devices.
  • You can use them instantly.
  • Preinstalled icons you can use on the fly.
  • A lot of support.

How to Use A CSS Library

In order to use a CSS library you have to bring it into the webpage you are working on. In a earlier lesson we did this by calling in an external file. Bringing in a CSS library is no different. You can use a CSS library in 2 ways.
  1. Download it and store it on your computer or server.
  2. Call the CSS Library in from the internet.

Examples To Call In CSS Library

In your head tag you want to create a link element. Set the relationship to stylesheet and the type to text/css. This example calls in a stylesheet that is located on your local computer or server. 
<link rel="stylesheet" type="text/css" href="style.css" />
If you are calling in an external library from another server it would look something like this in your head tag. 
<link rel="stylesheet" type="text/css" href="http://website.com/style.css" />

List of CSS Libraries You can Use Right Now

You can begin using any one of the CSS libraries listed below in your projects. Remember you just have to add the class or id's to your elements to make them work. Some of them are for entire websites and some are just for features in a website. I will separate them for you accordingly.

For Entire Websites

Bootstrap

Bootstrap is one of my favorites. It is easily used in websites. 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
See Boostrap In Action Here

Pure CSS

Pure CSS Loads fast and is ready to use on the fly. 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

Features For Websites

Animate CSS

Great for animating elements within a web page. 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
See Animate CSS In Action Here

Font Awesome CSS

Use thousands of different icons in w web page with Font Awesome. 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
See Font Awesome In Action Here

Code For Todays Lesson

<html>
<head>
<title>Using External CSS Libraries Absolute Beginner</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link href="style.css" rel="stylesheet" type="text/css" >
</head>
<body>
<div class="container">
<div class="jumbotron">This is a jumbotron.</div>
<h1 class="animated infinite bounce"><span class="glyphicon glyphicon-envelope"></span>Using External CSS Libraries Absolute Beginner</h1>
<div class="well">This is a well.</div>
<div class="row">
<div class="col-sm-4"><div class="well">This is a well inside column 1.</div></div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
</div>
</body>
</html>
 

Conclusion

There are literally hundreds of CSS libraries that you can use. You can see a lot of them listed here. Be sure when choosing one that you choose one that is responsive and easy to work with. This is why I chose Bootstrap.


Sign Up To Comment