A short intro to the core fundamentals of CSS as a styling language
CSS is a rapidly growing and evolving 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;
}
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> |
<!-- MAIN CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
Simple web page with basic typography styling via CSS
HTML
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Simple Web Page</title> | |
| <meta name="description" content="A simple HTML web page with sample markup and a linked CSS file for styling." /> | |
| <!-- VIEWPORT FOR MOBILE --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <!-- FOR IE --> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <!-- MAIN CSS --> | |
| <link href="css/style.css" rel="stylesheet" type="text/css" /> | |
| </head> | |
| <body> | |
| <h1>This is a Simple HTML Web Page w/ Linked CSS</h1> | |
| <h2>A basic External CSS setup via a single style.css file</h2> | |
| <h3>This is an H3</h3> | |
| <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus urna neque, elementum et, auctor vel, vestibulum in, dui. Praesent laoreet. Aliquam semper ullamcorper augue. Integer vitae lorem. Suspendisse commodo. Donec vulputate. Nunc vel pede vel turpis consectetuer fermentum. Praesent a nisl eu diam luctus consectetuer. Phasellus at diam. Vestibulum turpis odio, bibendum interdum, adipiscing eu, facilisis id, erat. Nulla id magna id sapien molestie posuere. Nam faucibus. Donec commodo bibendum mi. Aliquam erat volutpat. Praesent felis mi, elementum ut, condimentum nec, nonummy at, enim.</p> | |
| <p>Integer sem velit, ornare eu, blandit ac, elementum sit amet, metus. Pellentesque in est elementum est cursus consectetuer. Pellentesque mattis purus id erat. Cras volutpat bibendum neque. Nunc a dui. Mauris a neque cursus lorem ultrices sagittis. Morbi ligula. Aenean venenatis justo id arcu. Cras pretium ipsum ut velit. Integer pulvinar. Curabitur magna arcu, molestie at, rutrum at, gravida vulputate, nisl. Sed ipsum orci, accumsan sed, aliquet vel, tempor quis, arcu. Donec aliquam. In nulla nunc, tempor eu, laoreet id, tincidunt sit amet, arcu.</p> | |
| <p>This is an unordered list:</p> | |
| <ul> | |
| <li>Eggs</li> | |
| <li>Milk</li> | |
| <li>OJ</li> | |
| <li>Cereal</li> | |
| </ul> | |
| <p>This is an ordered list:</p> | |
| <ol> | |
| <li>Cereal</li> | |
| <li>Eggs</li> | |
| <li>OJ</li> | |
| <li>Milk</li> | |
| </ol> | |
| <p>This is a link to <a href="http://google.com">google's web site</a>.</p> | |
| </body> | |
| </html> |
CSS
| /* BASE (Initital Setup) | |
| ===================================== | |
| #BASE TYPOGRAPHY | |
| #BODY | |
| #HEADINGS | |
| #PARAGRAPHS | |
| #LINKS | |
| ===================================== */ | |
| /* #BODY */ | |
| body { | |
| font-family: Helvetica, Arial, sans-serif; | |
| color: #333; | |
| font-size: 100%; /* 16px; */ | |
| line-height: 1.5em; /* 16px x 1.5em = 24px */ | |
| background: #eee; | |
| } | |
| /* #HEADINGS | |
| Based on a Traditional Typographic Scale | |
| 48, 36, 24, 21, 18, 16 | |
| */ | |
| h1, h2, h3, h4, h5, h6 { | |
| margin: .5em 0; | |
| } | |
| h1 { | |
| font-size: 3em; /* 48px / 16px = 3em */ | |
| line-height: 1em; | |
| } | |
| h2 { | |
| font-size: 2.25em; /* 36px / 16px = 2.25em */ | |
| line-height: 1.1em; | |
| } | |
| h3 { | |
| font-size: 1.5em; /* 24px / 16px = 1.5em */ | |
| line-height: 1.2em; | |
| } | |
| h4 { | |
| font-size: 1.3125em; /* 21px / 16px = 1.3125em */ | |
| line-height: 1.3em; | |
| } | |
| h5 { | |
| font-size: 1.125em; /* 18px / 16px = 1.125em */ | |
| line-height: 1.4em; | |
| } | |
| h6 { | |
| font-size: 1em; /* 16px / 16px = 1em */ | |
| line-height: 1.5em; | |
| } | |
| /* #PARAGRAPHS */ | |
| p { | |
| margin: 0 0 .5em 0; | |
| max-width: 35em; | |
| } | |
| /* #LINKS */ | |
| a { color: #39c; text-decoration: none; } | |
| a:hover { color: #069; text-decoration: underline; } | |
| a:focus { color: #39c; } | |
| a:visited { color: #39c; } |
Combined HTML + CSS Result
See the Pen Simple HTML Web Page with Base CSS (ART 128 Assignment #2) by kccnma (@kccnma) on CodePen.
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).
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 supports visual consistency. A well known best practice is to design user interfaces that provide visual consistency across multiple pages. Inherent to the nature of CSS is the power of define styles once and apply them in multiple contexts. Furthermore, CSS aligns with two other key principles: inheritance and the cascade, where elements can inherit previously stated style definitions as well as override them. In other words, CSS can be used to create both re-usable visual template styles as well as bespoke custom styles.
- 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.
Quick Hands-on Exercise
Try to solve the challenge below by doing the following: in the first code example below, click on the “edit in codepen” button in the upper right, then add the appropriate HTML tags to the source text so that it renders the same as the second code example below.
Code Example of Text Without HTML Markup
See the Pen Intro to HTML Exercise by kccnma (@kccnma) on CodePen.
Note how the browser ignores line breaks.
Code Example of Text With HTML Markup
See the Pen Intro to HTML Exercise – with HTML Markup by kccnma (@kccnma) on CodePen.
Note how the browser has default styling for each element.
Code Example of Text With HTML Markup + CSS
See the Pen Simple HTML Web Page with Base CSS (ART 128 Assignment #2) by kccnma (@kccnma) on CodePen.
Good Job!
If you completed this exercise, nice work! Coding isn’t so bad is it?
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!
Related Resources and Reading
- W3Schools Resources:
- Chris Coyier’s CSS-Tricks.com
- Adam Marsden’s CSS Cheat Sheet
Go Further
- Read about Web Standards and the W3C (World Wide Web Consortium).
- Try coding a simple HTML web page with base CSS.
Author Notes
This was written specifically to help aspiring web designers as they aim to:
- Learn the basic selectors, syntax, and common uses of CSS Styling