A Brief Introduction To CSS

Introduction

This tutorial will briefly introduce the historical origins of CSS and give a high-level overview of how CSS works with HTML. This tutorial will prepare you to follow the hands-on exercises and website building project in the tutorials ahead.

History of CSS

CSS was first introduced by Håkon Wium Lie in 1994 while working at the European Organization for Nuclear Research (CERN) alongside Tim Berners-Lee, the inventor of the World Wide Web. At the time, webpages were typically created exclusively with HTML, the Hypertext Markup Language that Berners-Lee had developed in the 1990s. However, HTML had been developed to describe the semantics of a web document’s components (such as its headings and paragraphs) rather than provide style instructions. As the growing use of HTML to style webpages became increasingly unwieldy, CSS was introduced to provide a more efficient method for styling the display and layout of a website in conjunction with HTML.

How CSS Works With HTML

Websites that are built with HTML and CSS will typically consist of an HTML file that contains content such as text, image links, and HTML tags, and a CSS file that contains style rules that are applied to the HTML content. For example, an HTML file might have header text (marked up with the HTML tag <h1>) and paragraph text (marked up with the HTML tag <p>). Its corresponding CSS file might have rules instructing the browser to make all header text 20 pixels in size and all paragraph text the color blue. These CSS style rules would then apply to all header and paragraph text wherever they appeared in the HTML document, without you having to add style instructions in the HTML document each time.

CSS is also a powerful tool for arranging website content. By giving size, color, and other properties to HTML elements, you can use CSS to create content boxes that structure and style the layout of a webpage.

Conclusion

In the tutorials ahead, you will use CSS to style text, image, and other HTML elements as well as style and control the layout of a webpage. To get started, you’ll first need to create a few files and folders where you’ll practice writing HTML and CSS code. In the next tutorial, you will be guided through the steps of setting up your CSS and HTML project using the freely-available code editor Visual Studio Code.