CSS Essentials

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.

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

	<!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.

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

Simple HTML + CSS Example

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

Another Simple HTML + CSS Example

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

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!