4,568 reads

Cascading Style Sheets (CSS) for Dummies

by Dolamu AsipaOctober 10th, 2021

Too Long; Didn't Read

CSS (Cascading Style Sheets) is not a programming language, it is the code you use to selectively style the web. CSS layout is based on the "box" model, with each *box* taking up space on the webpage having various properties like padding (which is the space around the content) and border (this is the solid line that encircles the padding), and margin. A CSS ruleset consists of the selector, declaration, property, and property value.

Company Mentioned

featured image - Cascading Style Sheets (CSS) for Dummies

Brief Background

CSS (Cascading Style Sheets) is not a programming language, it is the code you use to selectively style the web. CSS is a style sheet language for describing the presentation of a document written in a markup language like HTML. It is designed to help improve a site's content accessibility; provide more flexibility and control in the specification of presentation characteristics; and enable multiples web pages to share formatting which reduces complexity and repetition.

Before CSS, nearly all presentational attributes of HTML documents were contained within the HTML markup. All font colors, background styles, element alignments, borders, and sizes had to be explicitly described, often repeatedly, within the HTML. CSS lets authors move much of that information to another file; the style sheet, resulting in considerably simpler HTML.

Anatomy of CSS Ruleset

All CSS rulesets are wrapped in curly braces { }. They can be specified inside a style element or inside an external CSS file. CSS layout is based on the "box" model, with each box taking up space on the webpage having various properties like padding (which is the space around the content e.g., the space around your paragraph), border (this is the solid line that encircles the padding), and margin (which is the around the outside of the border). Here's what the syntax of a typical CSS code looks like:

body {
  font-style: italic
  color: blue;
}

A CSS ruleset consists of the selector, declaration, property, and the property value. When the above CSS code is applied to an HTML document, the content of the body element will be italic in style and blue in color. In CSS, anything specified within the /* and */ tags is a comment. Comments are a helpful way to write notes about your code and browsers do ignore them as they render the CSS code. Below are the detailed analysis of a CSS ruleset 👇

Selector: This indicates or selects the HTML element(s) or contents [e.g attributes, ids, and classes] to which a set of styling rules apply. It is usually at the beginning of the ruleset. For instance, in the illustration above, the <body> element is the selector. To style a different element you simply have to change the selector. Other forms of selectors in CSS include;
1. a universal selector - denoted by the symbol * and which affects all elements (e.g heading, paragraph, list, etc.) on a document tree or all values of a particular element.
2. an element selector - also known as a tag or type selector, is a commonly-used selector in CSS that involves all HTML elements of an identified type when that type is specified. Multiple elements can also be selected with the use of a comma, and a single ruleset applied to them all as follows 👉 h1, p, li, {color: blue;}.
3. pseudo-class - is a keyword added to a selector that specifies a special state of the selected element, for instance in this ruleset 👉 a:hover {color: blue;}, the color of the selector a changes to blue when the mouse pointer hovers over the link.
Declaration: This declares the property of an HTML element to be styled. It determines how elements are formatted on a webpage. Each declaration is made up of a property and a property value which are separated by a colon. Declarations within a block are separated by a semicolon. For example font-style: italic; color: blue;.
Property: This is the attribute to be styled in an HTML document. Different HTML selectors and elements have different properties, properties specify what to style on a CSS selector. This could be the background of the HTML elements or its color or font. Just like the CSS selector, some properties are universal and can be used on any element while others apply only to specific groups of elements and under particular conditions. In the example above, the property of the body element chosen to be styled is its color. Frequently used properties in CSS documents include list properties; font properties; border properties; and text properties.
Values: are written after the colon that separates them from the properties in CSS. The word values can be quite misleading though because CSS values are not just text; they are often in different forms like integers, units, strings, URLs, etc. See below for more details 👇
1. text values - are quite common in CSS and are usually written without quotes. italic and blue are the text values of font-style and color in the CSS ruleset above.
2. integers - are numbers from zero to nine. Some CSS properties allow their values to be described as negative integers. An example of an integer is "6" as a value for the property column-count. It isn't uncommon to see some properties like margin take on two values (e.g. 3 auto;). When this occurs, the first value (3 in this case) affects the element's top and bottom side while the second value affects the left and right side [note that 'auto' is a special value that divides the available horizontal space evenly between left and right].
3. units/measurements - many properties in CSS take this as their value to effectively position general layout and media queries on a webpage. Examples of property-specific units for CSS values include; pc - the unit for picas; em - for the calculated size of a font; cm - the unit for centimeters; pt - for points (as a measurement in printed media); and % - the unit for percentages.
4. URLs - properties like background-image often take an actual URL as their value. A URL could be absolute or relative meaning that the address of an image could either be copied online and used as a background image or an image could be uploaded directly from the user's computer. For example: div{background-image: url("./images/picture.jpg");}

Additional Resources

As a code newbie, it is quite easy to get overwhelmed by the sheer size of properties, properties values, and CSS selectors to remember, which is why I've compiled the following list of resources for future reference. 👇

CSS index; for a list of all properties, their initial values, and CSS versions.
A comprehensive guide on CSS ruleset can also be found here at w3schools.
Finally, check out 👉 this site for CSS tips and tricks.