Beginner’s Guide to CSS: Part 1 – Introduction & Syntax

Building a World

Without styles applied, all web pages running on HTML would look like a simple Word document. Many beginners assume that a single web development language is responsible for a whole website, and they’re almost invariably wrong. 

Building a webpage is unlike most human experiences. We live in a physical world where most things already have shape, color, and other characteristics naturally. Computers afford us the incredible ability to create our own isolated environments and display them on a screen.

Because of this, creating a website is like playing god. You have to give your universe webpage instructions on how to exist in a certain useable state. If you think about it, our universe has rules like gravity, electromagnetism, the strong force, and the weak force, which guide matter into certain behavioral patterns much like CSS and JavaScript do for HTML. But those processes are too removed from our experience for us to understand them intuitively.

The point is that you’re building an environment where there is no predefined layout, so you have to tell the browser how to arrange and display every single item with a high degree of detail. The benefit of starting from a blank slate is that you can customize the layout, colors, fonts, and seemingly endless other styling attributes to your heart’s content! 

The name, Cascading Style Sheets (CSS), comes from the fact that a CSS document is a Style sheet that is read from top to bottom. Think of it like water falling over a cliff, cascading down over the rocks below, and adding dimension and character to the structure of the cliff.

To learn HTML, read my Beginner’s Guide to HTML: Part 1 – Structure. For now, let’s talk about how to actually write CSS!

Photo by Desola Lanre-Ologun on Unsplash

How CSS Works With HTML: The DOM

In order to render a webpage, a browser has to create what’s called the Document Object Model (DOM), a node-based map that tells the browser how the elements on a page should be arranged. It does this by reading the HTML file and any other files associated with it and creating nodes for the elements found inside. The browser then uses this map to render the code visually on your screen.

As explained beautifully on the berkeley.edu blog, “The DOM has a crucial role in the functionality of CSS. DOMs have tree-like structures made up of nodes. Every piece of text, attribute, and element within the markup language (such as HTML) will become its own DOM node.” With this access, CSS can alter the appearance of any node in the DOM.

Selectors and Syntax

There are three main ways to select DOM elements, by name, by class, and by ID. There are other selectors that allow you to get even more specific with your selections, but we’ll focus on the basics in Part 1 of this guide. Let’s go over the main selectors now.

Tag Selectors

In HTML, you create elements using <tags></tags>, and the name of a tag is always the text directly to the right of the opening angle bracket. In order to tell the browser to apply styles to particular tags, CSS uses the name of each tag as a selector that references all tags with the same name.

To use a tag selector, simply write the tag’s name followed by curly brackets, like this: 

p {
    font-family: ‘Times New Roman’;
    font-size: 16px;
}

This selector would affect any and all paragraph tags found in the DOM and would render all of them in Times New Roman with a font size of 16 pixels. Notice that all style properties are placed between the curly brackets just after the name of the tags that the code should apply to. Additionally, each property’s name is followed by a colon, its value, and a semicolon. The semicolon tells the browser when one property ends so that it can move on to the next one. The font name is in between single quotes because there are spaces between the words in the name. One-word fonts do not require single quotes. 

Class Selectors

Say you’re writing a DIY chemistry tutorial and you want to add a red background to elements that are part of a safety warning. To do this, you could go back to your HTML document and add a class attribute to the appropriate tag. A class selector applies to every tag with the same class name, so to group certain elements together, simply add the same class name to each:

<p class=”warning”>WARNING: Don’t try this without gloves and goggles! Verify your safety to proceed with this tutorial.</p>

<button class=”warning”>I’m Safe</button>

Then, in your CSS file, you can indicate that the following styles should only apply to tags with the “warning” class like this:

.warning {
    background-color: red;
    color: white;
    font-weight: bold;
}

In CSS, classes are denoted by a period before the class name. Now, any elements found with the “warning” class will show up in bold, white text over a red background!

ID Selectors

What if you just want to change one specific element? The ID selector allows you to specify a unique name that applies to only one element in the DOM. 

Say you have lots of purple buttons on your site, and you want to change the color of just one particular button to blue. First, add an ID attribute to the button you’re targeting:

<button class=”warning”>View Gallery</button>

<button class=”warning”>View Pricing</button>

<button class=”warning” id=”blue-button”>Check out my blog!</button>

Then, back in your CSS sheet, add the styling. ID attributes are referenced with the # symbol.

button {
     background-color: purple;
} 

#button {
     background-color: blue;
}

Now, all buttons will be purple except for the blue one that you’ve singled out.

Photo by AltumCode on Unsplash

Specificity

It’s important to note that stylesheets perform a sort of triage in order to avoid conflicting styles. The reason for this feature is that CSS documents often get long and complex. A single DOM element can have different styles applied to it by various selectors, which may conflict with each other. For instance, many tags have both a class and an ID attribute, like our previous example with the buttons.

Since they are unique, ID selectors are considered more important than class selectors. Class selectors are, in turn, considered more important than tag selectors. This is called specificity because the more specific you are with your selectors, the harder it works to follow the instructions.

Say the tag is set to purple, the class is set to green, and the ID is set to blue. When the CSS is rendered, it has to choose which direction to follow, so having a hierarchy becomes very important. The element will be blue, of course, because IDs are the most specific selector type. 

There is a way to demand that a certain property be obeyed despite this hierarchy. By adding the code, !important directly after the property value and before the semi-colon, you tell CSS to veto any conflicting styles and apply this one no matter what. 

button {
    background-color: purple !important;
}

While this is a useful trick, it is not a best practice and it is recommended that you use it as little as possible because it interferes with the natural rules of the system and can cause specificity problems of its own if used too much in the same stylesheet.

Photo by Arif Riyanto on Unsplash

Wrapping Up

Congratulations, you just learned how to write and work with CSS! In Part 2, we’ll discuss how to actually connect CSS to the HTML document and go over some of the most useful style properties, which you’ll use in almost every stylesheet!

If you have any questions, feel free to ask in the comments! I will reply, and if your question is complex enough, I’ll even write a blog article about it!

Leave a Comment

Your email address will not be published. Required fields are marked *