What is CSS?

In the grand scheme of modern web development there are 3 great technologies. A separation of concerns of structure, presentation, and behavior. HTML controls the structure of the web page, CSS controls the presentation, and JavaScript controls the behavior. There may be some overlap among the three, but this is generally how they work together.

In 1992 no one expected a website to “look good”. Web pages were mostly research and academic documents. Before the advent of CSS, it was only possible to control the look of a website using HTML. Fonts, alignment, colors, backgrounds, and more were all controlled using HTML elements and attributes. Changes to fonts and colors were implmented using HTML elements and attributes (namely BGCOLOR, ALIGN, <BASEFONT>, <FONT>, <CENTER> among others). Complex layouts were done using <frames> and <table> elements. There wasn’t any other way, to the great frustration of many designers.

CSS was released on December 17, 1996 to change all that. The ability to change the presentation of HTML elements became the domain of CSS, thereby separating the structure of the web page (HTML) from its presentation. It took several years for it to become implemented enough on browsers to become feasable to use.

The majority of what you’ll do with CSS can be broken down into making changes to Color, Dimension, Visibility, Typography, and Layout.

What is a CSS Rule?

A CSS rule that is set for a certain element will cascade down into the children elements where it applies, unless overwritten by a more specific rule. When you’re writing a CSS rule, what you’re really doing is writing a rule that searches through the page, making changes to how the HTML is displayed.

p { color: black; }

nav > a { text-decoration: none; }

.card { background-color: white; }

The parts of a CSS rule are the selector and the declaration, which consists of one or more properties and values.

a {
  color: red;
}

CSS Selectors

CSS selectors are globally scoped and greedy. They will make a change everywhere they match. The rule p { color: red; } will change the text color for every <p> element that the rule can find.

Elements

You can use any HTML element as a selector. It’s the primary method that I used for the HTML Hobbyist stylesheet.

html {
  background-color: silver;
  font-size: 20px;
}
aside {
  border: groove;
  padding: 1rem;
}
button {
  background-color: lightgray;
  border: 2px outset darkgray;
  color: black;
  cursor: pointer;
  margin: 1rem 0 0;
}

If all the properties are the same, you can save typing by declaring multiple rules at once within your selector. For example, I want all of my <section> and <aside> elements to have a 2rem bottom margin:

section,
aside {
  margin-bottom: 2rem;
}

Nesting selectors lets you target descendant selectors (selectors within selectors). The following rule would target any <h2> within an <aside> element.

aside h2 {
  color: red;
}

This can sometimes be a little clumsy if you have deeply nested HTML. This is where combinators can help.

Combinators

• All elements: *
• Descendant:  
• Direct descendant: >
• Adjacent sibling: +
• General sibling: ~

header > nav would select only the nav that is a direct child of the header element.

The Universal selector (*). p * would select all elements ol that comes immediately after a p element.

p + ol would select just the ol that comes immediately adjacent to a p element.

ol ~ p would select all p element that are sibling elements that come after the ol.

The combinators can be used in conjunction with elements, attributes, classes, IDs, and/or pseudo-selectors.

Attributes

You can set rules based on if an element has attributes or based on certain attribute values:

[src]

Selects all elements with an src attribute.

a[href]

Selects only <a> elements with an href attribute.

a[href=hobby]

Selects only <a> elements with an href attribute that exactly matches the string hobby.

a[href~=hobby]

Selects only <a> elements with an href attribute that contains the string hobby.

a[href^=hobby]

Selects only <a> elements with an href attribute that begins with the string hobby.

a[href$=hobby]

Selects only <a> elements with an href attribute that ends with the string hobby.

a[href*=hobby]

Selects only <a> elements with an href attribute that contains the string hobby.

[data]

Classes

You can add a class attribute to any HTML element and target that element directly with the class name. Setting the properties on a class will override any properties set on an element.

<ul>
  <li>One</li>
  <li class="linkItem">Two</li>
  <li>Three</li>
</ul>

.linkItem {
  color: red;
}

Would result in this:

• One
• Two
• Three

Just like with elements, nesting class selectors lets you target descendant selectors (selectors within selectors). The following rule would target any .link within an .nav class.

.nav .link {
  color: red;
}

That would be different than combining selectors.

.nav.link {
  color: red;
}

This would select elements with both classes on the same element:

<h2 class="nav link">

IDs

You can use Fragment IDs as a CSS selector, though it’s not recommended in most cases. You may only use any individual ID once per page. Any setting of the properties on an ID will override any properties set on a class or an element. You’re better off never using IDs to target the CSS for elements and just using them for their intended purpose: as URL Fragment Identifierss

Declare the selector for an ID with the hashtag character.

• #top
• #fragment
• #menu