CSS Essentials

Back to: Create a Static Student Website

A short intro to the core fundamentals of CSS as a styling language

CSS is a rapidly growing and evolving web technology that keeps getting more powerful with each new feature that gets added to its specifications. For a “styling” language, it can do more than just affect the presentation of markup via the UI, it can also play an integral role in the overall user experience and add features and functionality to an end product.

View Video Lesson

Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
– Wikipedia

The Anatomy of a CSS Selector


selector {
    property: value;
}

A blank web page linked to an external style.css file

Take a close look at line # 9 below with the <link> element. This is the best way to add css styling by “linking” the html file to a separate css file.

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>

	</body>
	</html>

view raw blankpage-withlinkedcss.css hosted with ❤ by GitHub

Note the href path attribute of the link element. This is known as a “relative” path (relative to the HTML file).

<link href="css/style.css" rel="stylesheet" type="text/css" />

The Separation of Content and Style

The Design Principle that Separates HTML & CSS
One of the guiding principles for front-end web development is the separation of content and presentation (a.k.a. the separation of content and style). This general design principle is an important guideline for web designers and developers to keep in mind, for its fundamental role in splitting the core front-end technologies of HTML (content) and CSS (style). The separation of HTML from CSS makes it easier to maintain sites, to share styles across multiple pages, and to customize pages to different environments (e.g. print-specific styles, screen-size-specific styles, etc).

A site map with multiple HTML files linked to a single external CSS file.

The Power of CSS

There are several advantages to using a single external style sheet (e.g. style.css, as opposed to adding inline styles directly inside of the head of your HTML file), such as:

A single style.css file makes it easy for web developers to make global changes to multiple pages of a website in one place, in one file. This approach embraces the principle of writing DRY (“Don’t Repeat Yourself”) CSS code. For example, if you want to adjust the padding of all buttons on a site, you can do so in one line of code in one file (style.css) and it will automatically update every button on every page in the site! This is the power of CSS.
A single style.css file makes websites load faster (specifically subsequent pages), because browsers cache all CSS files whenever they first encounter them, so that every time a user visits a new HTML web page that is linked to the exact same CSS file, it does not download it again. This is a big performance advantage for external style sheets.

There’s more (lots more) but let’s keep this lesson short. 🙂

HTML + CSS Examples

A great way to learn HTML and CSS is simply to take a close look at other people’s code and see how they do it. Over time, you will develop an important skill: knowing how to spot good HTML and CSS code (vs not-so-good). Codepen is a wonderful place to browse other people’s code. For now, below are a few examples right here that you can take a quick look at before moving on to the next step:

Example #1: Simple HTML + CSS Codepen

See the Pen Bare Bones HTML Web Page with CSS (Example) by kccnma (@kccnma) on CodePen.0

Example #2: Another Simple HTML + CSS Codepen

See the Pen Simple HTML Web Page with Base CSS (ART 128 Assignment #2) by kccnma (@kccnma) on CodePen.0

Conclusion

CSS is fun and powerful. CSS files should be linked in the header and should include a commented table of contents at the top. Happy Styling!