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

[gist https://gist.github.com/kccnma/f1feca5a94fd9291214a497c68232e02 /]

Simple web page with basic typography styling via CSS

HTML

[gist https://gist.github.com/kccnma/8e23e593457c7bf9eea97f91e01e4c98 /]

CSS

[gist https://gist.github.com/kccnma/07c097807856b1aabad207bec6076389 /]

Combined HTML + CSS Result

[codepen_embed height=”600” theme_id=”0” slug_hash=”ppQdmo” default_tab=”result” user=”kccnma”]See the Pen Simple HTML Web Page with Base CSS (ART 128 Assignment #2) by kccnma (@kccnma) on CodePen.[/codepen_embed]

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

[codepen_embed height=”265” theme_id=”0” slug_hash=”OzpyLP” default_tab=”html,result” user=”kccnma”]See the Pen Intro to HTML Exercise by kccnma (@kccnma) on CodePen.[/codepen_embed]

Note how the browser ignores line breaks.

Code Example of Text With HTML Markup

[codepen_embed height=”265” theme_id=”0” slug_hash=”XVMXJQ” default_tab=”html,result” user=”kccnma”]See the Pen Intro to HTML Exercise - with HTML Markup by kccnma (@kccnma) on CodePen.[/codepen_embed]

Note how the browser has default styling for each element.

Code Example of Text With HTML Markup + CSS

[codepen_embed height=”265” theme_id=”0” slug_hash=”ppQdmo” default_tab=”css,result” user=”kccnma”]See the Pen Simple HTML Web Page with Base CSS (ART 128 Assignment #2) by kccnma (@kccnma) on CodePen.[/codepen_embed]

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

Go Further

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