Introduction to CSS

CSS is an acronym for Cascading Style Sheet and it is a style sheet language, not a programming language. It is crucial for web design as it determines how a website displays inside a browser. Style sheets are loaded inside a browser when a website is visited. The entire file is loaded, along with all the style tags. Style sheets work on the IDs and classes of HTML tags.

If you don’t know what an HTML tag is, right-click inside any browser and choose ‘View page source’ to see what an HTML page looks like. At the very top of the page, or maybe a little bit further down, depending on how the page is structured, you should see something that looks like this:

<body>

This is what is called an HTML tag, and there could be thousands on a web page. These tags can, and most often do, have classes or IDs, and we use CSS to target those classes and give elements that have a class a certain number of styling properties.

CSS Properties

There is a huge variety of styling properties and many online tutorials that tell you what each property does. This is just a simple introduction to CSS. To see CSS in action, click on the Tools menu (Firefox) or ‘More tools’ (Chrome) menu and choose web developer tools. A new window should open and it will be docked at the bottom (or left or right) of the browser. The console will be selected, but choose the topmost left button, which represents a screen. You can then select elements on the webpage, and once selected, that element’s properties will appear in the developer tools window.

Body Tag

That is the body tag of an HTML page, and it represents all visible content on an HTML page. All visible content appears between the opening body tag (<body>) and the closing body tag (</body>). The top right shows the name of the style sheet where these properties are specified and if you hover over it, you should see the complete path to that file. You can click on those properties to change them. The change is only temporary; for the change to be permanent, the file will have to be changed at that specific place.

Resources

Here are some resources if you would like to learn more: