Categories
CSS

CSS basics: syntax, semantics and best practices

CSS makes webpages unique — it allows web developers to tailor their page to stand out from the millions of other websites on the internet.

CSS brings webpages to life — it allows web developers to animate and transform the page, to give it vitality and a sense of energy.

CSS makes webpages responsive — it allows web developers to ensure the page looks as intended on an innumerable number of screen sizes: from tablet to smartphone, desktop to kiosk display.

And in a world where websites users expect a website to be unique, seamless, visually interesting and responsive — an understanding of CSS is essential for any aspiring web developer.

This post will help you understand how to read and write CSS. Specifically, it will focus on syntax, semantics and best practices.

If you are just getting started with web design and development and are not familiar with HTML I’d strongly suggest familiarizing yourself with HTML before you read this post.

Otherwise, let’s begin.

A world without CSS

Have you ever seen a website without CSS? It’s pretty bleak. Utilitarian even. I don’t recommend it. In fact, I recommend against it.

But you…

You are curious — aren’t you?

Yes, you are.

Ok then. But don’t say I didn’t warn you.

The Horror of unstyled HTML

That was awful right? I hope you didn’t spend too long there.

What you were looking at was pure HTML without any custom CSS. Every browser has a default style sheet that it will use when it cannot locate any custom styles. This is default CSS.

Default CSS is ugly. Don’t use default CSS.

How do you make sure your website doesn’t use default CSS? How do you make your website look nice? Like this one, for example?

I’ll tell you how.

But first, a little bit of information about how much work goes into making a website look nice.

When you visit a website that looks nice. Like this one! Your browser reads through many lines of custom CSS to determine how each thing on the page should look.

There is literally a style that someone had to write for almost everything on this page.

From the colour of text to the size of characters, the spacing between paragraphs to the height between lines. It is all meticulously and lovingly written CSS.

Perhaps you never realized how much attention to detail, testing and rewriting was required to make a site look so good (yes, like this one!).

Here’s a screenshot from the CSS file for this website to illustrate.

There are over 6000 lines of CSS on this webpage!

But isn’t it worth it? Especially after that nightmare, you encountered above.

It’s worth it.

So, if you want to understand why your website looks the way it does, and if you want to learn how to make it look the way you want, then you’ll need to understand how to read CSS.

CSS syntax

CSS consists of rule-sets that provide instructions to the browser about how to style an element.

This is a rule set for a paragraph element:

p {
color: red;
text-align: center;
}

Rule-sets contain four parts:

  1. a selector 
  2. a declaration block 
  3. the property 
  4. the value

Here’s how this applies to the example above.

  • the selector: p
  • the declaration block: everything contained within { }
  • the property: color:/ text-align:
  • the value of the property: red;/center;

The p in this rule-set tells the browser that every HTML p element should have the colour of red and should have center alignment.

In other words, the selector references the element you’d like to style. The declaration block contains the styles you’d like to apply to the element. And the property/values provide the specific styles to use.

Like HTML, CSS has specific syntactic rules that must be followed. When this syntax is followed a browser can correctly determine which element to apply the style to and what the properties and values of this style are.

For example:

This is a rule-set:

p {
color: red;
}

This is not a rule-set: 

p {
color: red;

This is not a rule-set:

p color: red;
}

This is not a rule-set:

{ p
color: red;
 }

CSS Rules

Case Sensitivity

CSS is and is not case sensitive.

When you are writing which element you’d like to select you can use either uppercase or lowercase. But you should always use lowercase.

Example:

Do this:

p {
color: red;
}

Not this:

P {
color: red;
}

Even though uppercase and lowercase are interchangeable, you should always use lowercase.

The only time when case matters is when you are selecting an element with an id or class that has a name that uses uppercase and lowercase.

For example, if you wanted to style the HTML elements below.

<p id= "customElementByID">My element ID</p>
<p class= "customElementByClass">My element class</p>

And you wanted to select the elements by their class instead of their tag type, then case-sensitivity matters.

By ID do this:

#customElementByID {
color: red;
}

Not this:

#customelementbyid {
color: red;
}

By Class do this:

.customElementByClass {
color: red;
}

Not this:

.customelementbyclass {
color: red;
}

CSS can have many properties and values within the declaration block. Every property value should be written on its own line and end with a semicolon

Do this:

p {
color: red;
size: 20px;
}

Not this:

p {
color: red; size: 20px
}

You can apply the same style to many selectors

For example:

h1, h2, h3, h4, h5 {
size: 200px;
}

CSS cascades

One of the most important rules of CSS is that it cascades.

If you have multiple styles targeting the same element, the style that is closest or most specific to the element will apply.

For example, if I select the same p element twice, once with the p tag selector and once with the id tag selector, the style using the id tag will be used.

Here’s what that would look like. Imagine this is the element I’m trying to style:

<p id="introParagraph">This is my intro paragraph</p>

Imagine I wrote the two CSS rule-sets below:

p {
color: red;
}
#introParagraph {
color: blue;
} 

The second rule-set, with the #introParagraph id selector, will be applied and it will overwrite the color: red of the p and replaces it with color:blue.

Cascading may be a bit confusing but don’t get caught up on this for now as I’ll cover it in greater detail in another blog post. Just keep in mind that the closer in proximity a CSS rule-set is to the element it’s trying to style, the more likely it will be applied.

There are many CSS property value combinations, each with varied nuances about how they act and display on the page. w3schools schools have a handy CSS reference available, I recommend taking a moment to read up on the various types.

Ok, I hope this post will help you understand how to read CSS and you now have a better grasp on CSS syntax, semantics and best practices.

Next up, I suggest you start moving onto the most exciting aspect of front end web development: JavaScript.

Here’s my guide to JavaScript basics: syntax, semantics and best practices.

Categories
CSS HTML JavaScript Web browsers

How a web browser builds a website

If you want to learn how to build websites, program in JavaScript, become a front end web developer or are just genuinely curious about how websites work  —  you need to understand how a web browser (browser) builds a website.

This post will help you do just that.

Have you ever read something online? I’m willing to bet you have. Was it a news article or a long-form travel story? A Wikipedia article or maybe a serialized choose your own adventure Harry Potter fan fiction? Perhaps it was this very blog post?

Regardless, do you remember when it was written and what it was about? Do you remember how it looked and who wrote it? Or, better yet, can you tell me what wrote it?

That’s right, what.

Not sure? Here’s a hint: when you look at a blog post, news article, or any written content on your browser you are looking at the end result of a set of precisely followed instructions. These instructions tell your browser how to build, present and interact with the content on your screen. So, in answer to the question, your browser is the what. The who, I’ll leave to you.

The how? The precisely followed instructions!

These instructions come in three flavours: HTML, CSS and JavaScript, each of which contains directions that your browser follows to build a webpage. Coincidentally, someone who specializes in the three aforementioned technologies is called a front end developer or a web developer (I guess I didn’t leave the who to you after all).

Let’s take this one step further by using an analogy.

Imagine for a moment that your browser is a construction worker who needs to build a house. The house, in this case, is a website, and HTML, CSS and JavaScript are the blueprints for different parts of the house: the architecture, the style and the interactivity.

HTML (hypertext markup language)

This is the architecture of your house — it tells your browser how to organize the content on the page and what that content is.

It also tells your browser where it can find the other resources necessary to finish building the page, specifically the location of the CSS and JavaScript files. 

HTML is the first thing a browser reads when building a website and while it has has a specific initial structure, this structure can be expanded, reduced or transformed by CSS and JavaScript, in the same way you can add rooms, remove them or transform them on a blueprint. A kitchen can become a living room after all — especially on a blueprint.

HTML tells your browser the semantic meaning of the content on your website. This is similar to a legend on a map. Without this legend, your browser would not be able to distinguish the difference between content types on your web page (paragraphs, lists, titles, etc.). Consequentially, without this legend, your brows would not be able to correctly assign the styles and behaviours that distinguish one content type from another. You don’t want your lists displaying as paragraphs, do you?

In other words, HTML provides a reference so the browser can understand what the content is:

That content is a paragraph.

  • This content over here?
  • It’s different from the paragraph!
  • It’s a list!

HTML provides the distin level of detail so your browser can distinguish the content types.

For these reasons, I like to think of HTML as the architectural blueprint of your house.

CSS (Cascading Style Sheets)

This is the style of your house  —  from the carpet to the curtains, wallpaper to shingles, CSS is responsible for telling the browser how your web page should look and, if you desire, how it should transform.

CSS builds upon the architecture which HTML provides and references it to know which items it needs to apply styles to. Things like colours, spacing, animation and layout are controlled by CSS — without it, your webpage is boring.

Progressively, after the HTML is loaded, your browser then consults with CSS to understand how it should style all of the architecture laid out by HTML. Specifically, your browser references CSS to determine what the content defined in HTML should look like.

Everything from how the page should look on a phone, tablet or laptop to the colour of text, the spacing between lines and, as mentioned, the animation is provided by CSS.

For these reasons, I like to think of CSS as the style blueprint for your house.

JavaScript

This is the interactivity of your house — from when the lights should turn on to when the thermostat should lower, what time your alarm clock goes off to what temperature your oven should pre-heat to.

If it’s something that you can interact with, it’s probably governed by JavaScript.

Like CSS, JavaScript builds upon the architecture that HTML provides, and after the architecture of your house is built and styled, JavaScript goes to work defining what can be interacted with and how.

JavaScript governs interactions through event triggers and outputs:

An event trigger is something that needs to happen before an output can take place. JavaScript can tell your browser to listen for a specific event trigger (perhaps a click or a scroll), and when this trigger takes place, to perform a specific action.

An output is the action that happens after the trigger is activated. For example, let’s say someone pressed the doorbell at your house (event trigger) the output would be the specific sound that plays. Another example: you turn your stove on. The temperature which it rises to before turning off is the output.

Like cause and effect — the web browser equivalent is JavaScript — and through event triggers and outputs, JavaScript brings interactivity to your page. And interactivity is an absolutely essential component of modern websites

For these reasons, I like to think of JavaScript as the blueprint for the interactivity of your house.

Wrapping it all up: HTML, CSS and JavaScript

  • HTML is the architecture
  • CSS is the style
  • JavaScript interactivity
  • Each of these technologies makes up the front end of your website and each is essential to what most users expect from a modern website.
  • Your web browser follows the blueprints laid out in HTML, CSS and JavaScript to determine how to build a webpage, how this webpage should look and how you’ll be allowed to interact with it.
  • Someone who specializes in these technologies is called a web developer or front end developer.

So, hopefully after reading this post you now feel more familiar with how your browser constructs a web page.

Next, it’s time to learn about HTML, the most important part of a website.