What Is a Framework?

The shortcut to faster, more professional websites

Learn what a framework is, the difference between CSS and JavaScript frameworks, and the one rule you must follow when adding them to your HTML.

💡 The Concept

A CSS and JavaScript framework is a ready-made collection of styles and scripts you can build on instead of starting from scratch every time. A framework is a CSS or JavaScript file that someone else wrote and published for free. You add it to your website to get access to pre-built code: components, layouts, and effects that would otherwise take hours to write yourself.

Three Frameworks and Libraries You Will Use

Font Awesome: an icon library that gives you thousands of scalable icons you can drop into any page
Bootstrap: a CSS and JavaScript framework for responsive columns, navigation, buttons, modals, and much more
jQuery: a JavaScript library that simplifies common JavaScript tasks with shorter, cleaner syntax

Adding a CSS Framework

CSS frameworks are added with a <link> tag in the <head>, just like your own stylesheet. The critical rule: the framework link must come before your own stylesheet. CSS follows a “last one wins” rule, which means your custom styles need to load after the framework so they can override its defaults.

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="bootstrap.css">  <!-- Framework FIRST -->
   <link rel="stylesheet" href="styles.css">      <!-- Your styles SECOND -->
</head>

Adding a JavaScript Framework

JavaScript frameworks are added with a <script> tag placed just before the closing </body> tag, not in the <head>. Placing them at the bottom lets the page content load first, which makes the page feel faster.

      <!-- Just before </body> -->
      <script src="bootstrap.js"></script>
   </body>
</html>

❓ Frequently Asked Questions

What is the difference between a library and a framework?

The terms are often used interchangeably, and the line between them can be blurry. The classic distinction is about who is in control. With a library, you call its code whenever you need it, so you stay in charge. A framework gives you a larger structure that you build inside of, and it often calls your code for you. By that strict definition jQuery is really a library, since you simply call its methods, but in everyday use developers call both frameworks, and this lesson does too for simplicity.

Is Bootstrap a framework or a library?

Bootstrap is usually called a framework, and it describes itself as one. You build your layout inside its grid system and use its ready-made component and utility classes, so you are working within its structure and conventions, which is what makes it framework-like. By the strict definition it sits somewhere between a library and a framework, which is why the newer Bootstrap docs also call it a toolkit. For this course, framework is the right word.

Do I download these frameworks or link to them?

You can do either. The quickest way is to link to a CDN, a content delivery network, which is a URL hosted by the framework provider. You paste in a link or script tag and the file loads from their servers, with nothing to download. You can also download the files and host them on your own server, which keeps your site working even if the CDN is ever unavailable. For learning and quick projects, a CDN link is the easy choice.

Why does the framework CSS have to load before my own stylesheet?

CSS follows a last one wins rule when two rules have the same specificity, so the stylesheet that loads later overrides the one before it. By linking the framework first and your own stylesheet second, your custom styles load last and can override the framework defaults. If you loaded your stylesheet first, the framework would override your changes instead.

Is adding a framework to my page like importing code in other languages?

Yes, it is a helpful way to think about it. A link tag or script tag pulls in external, pre-written code so you can use it, which is the same idea as an import statement in a language like Python or JavaScript. CSS even has its own @import rule, though the link tag is preferred because it loads faster. One difference is scope. A programming language usually imports specific items into a contained namespace, while a link or script tag loads the entire file into the global space, so every class and method it provides becomes available everywhere on the page.

Is Google Fonts a framework?

Not quite. Google Fonts is better described as a font library, or a hosted font service. You link to it the same way you link a CSS framework, and it provides a small CSS file plus the font files, but it gives you fonts rather than components, layouts, or behavior. That is the real difference. A framework is a system of reusable building blocks you build within, while Google Fonts simply delivers typefaces. The same is true of a few others that get called frameworks out of habit. Font Awesome is really an icon library and jQuery is a library, while Bootstrap is the truest framework of the group. What ties them all together is that you add them the same way, with a link or script tag.

★ Key Takeaways

A framework is a collection of pre-written code that helps you build faster. This lesson explained what a front-end framework is and why developers use them instead of writing everything from scratch. Next, you will learn about Font Awesome Icons, a free icon library that works great alongside any framework. Icons help communicate ideas quickly without needing extra image files.

Next Lesson: Font Awesome Icons

← Back to Bootstrap and Frameworks Lessons

← Back to All Lessons