What on Earth Is CSS? A Beginner's Guide

The CareerFoundry logo

When browsing the internet, you’ve probably found yourself asking why some websites are so much more visually appealing than others.

If you’re interested in becoming a web developer, you may have also asked yourself how a programmer is able to alter the appearance of those pages using code. The answer to these questions is CSS, or Cascading Style Sheets, which is the language responsible for the visual element of every kind of website.

In this blog post we’re going to be looking in detail at exactly what CSS is, and how web developers use it to create the aesthetic element we see and enjoy when looking at our favorite websites. If you want to skip ahead to a different section of this article, just use the clickable menu.

  1. How is a web page built?
  2. Getting started with CSS
  3. Why is CSS important?

1. How is a web page built?

Before we get on to CSS, let’s take a moment to define the other elements we’ll be talking about in today’s post, beginning with the web page.

Now, a web page is a hypertext document connected to the World Wide Web. It’s accessed when your browser enters the URL the page is hosted on. A website is a collection of web pages which is hosted on a domain. Each web page is made up of three aspects: content, presentation, and behavior.

The content is essentially the elements which make up the page. For example, the text, images, and headings make up the content. Content is written in HTML, short for HyperText Markup Language. In short, HTML is responsible for defining the content and structure of a web page.

The presentation is the visual representation of the elements on the page.

Though it is possible to write CSS directly in an HTML document, this is not advisable, since CSS was created to allow for the separation of content and presentation. This means that the same HTML document can be styled in many different ways, and can remain accessible to different rendering methods, such as screen readers.

Presentation is defined using Cascading Style Sheets, or CSS for short. CSS is responsible for the aesthetics and the visual appeal of a page. Besides changing basic things such as colors, fonts, and spacing, CSS is also used to optimize pages for responsive web design, and to create other advanced visuals such as hover effects.

Web pages that are responsive will change in layout depending on the screen size of the user’s device. In recent times the ability to create responsive sites has grown increasingly more important as the number of potential screen size options for users has ballooned. In fact in the past few years, mobile traffic growth has risen so that now the majority of internet traffic is from mobile devices.

The behavior describes both the user interaction with the web page and the animation contained within it. Typically the behavior on a page is handled by a programming language called JavaScript.

Now that we’ve seen what the nuts and bolts of what generally make web pages tick are, it’s time to find out how to begin using CSS to style content.

2. Getting started with CSS

As its name suggests, all CSS files are written in style sheets. A style sheet tells the web browser how to render the document being viewed.

One important concept to understand about CSS is that all style sheets are cascading. Every web page is affected by at least one style sheet, even if there are no styles applied by the designer. The default styles added by the browser are contained in the User Agent stylesheet.

As specified by the browser, HTML elements have certain default styles. Heading elements and containing elements typically span the page, for instance, while links sit in line without breaking up text. There is one default font, and some spacing added to each element for readability. Anything more than that requires CSS.

If the designer decides to add styles to the document, the browser needs to know which ones get applied first. The term “cascading” refers to the order in which styles are applied to the document—picture a waterfall, where the piece underneath is the most important..

What I mean by this is that essentially, the browser will read them in the order specified to “paint” the layout of the page. Styles specified lower down override those above them.

An additional rule of thumb when defining styles for an element is that specificity wins. More specific styles will override less specific ones.

For example, a style applied to (body {..}) is less specific than one applied to (h1 {..}) which is a specific element of the body. The h1 style overrides the body style.

In most cases, it is best to link to a separate style sheet, as a single style sheet is far easier to manage than many inline styles. You can have an unlimited number of documents linking to a single style sheet, which makes editing styles much more efficient as opposed to editing countless HTML documents.

It also makes the process much easier for anyone who needs to edit your documents in the future.

In the following video, Abhi, one of our in-house web developers, gives you a brief introduction and demonstration of how to code with CSS:

3. Why is CSS important?

In short, CSS is one of the most powerful tools in a web designer’s arsenal. With it, you can drastically alter the entire mood and user experience of a website. Some further benefits you’ll find using CSS are:

  • Freedom to position HTML elements anywhere on a web page, while allowing you to keep your markup (HTML) clean and organized.
  • Ability to adjust for differences in the way browsers render a web page.
  • Endless customization options to a web page including fonts, colors, borders, hover and transition effects, etc.
  • CSS preprocessors change the game entirely for developers, allowing them to create more complex layouts more efficiently and use tools such as loops, variables, and if/else statements. You can learn more about it in our guide to CSS preprocessors.
  • Ability to easily create, update and maintain styles simultaneously for a large number of web pages.
  • Ability to use media queries and relative units (ems and %s) to create web pages which adapt to the user’s screen size—ideal for creating mobile responsive web pages.

What is CareerFoundry?

CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst from scratch, or your money back.

Learn more about our programs