Basic Syntax

At the most basic level, CSS is made of various rules. These rules are made of a selector and a semicolon-separated list of declarations, with each of those declarations being made up of a property-value pair.

Just like this:
the basic syntax

Selectors

Selectors refer to the HTML elements to which CSS rules apply.

Universal Selector

The universal selector will select elements of every type (as in the whole document)

1
2
3
* {
  color: purple;
}

Type Selector

A Type selector (or element selector) will select all elements of the given element type, and the syntax is just the name of the element:

1
2
3
4
5
6
<!-- index.html -->

<div>Hello, World!</div>
<div>Hello, again~</div>
<p>Hi...</p>
<div>Okay, bye.</div>
1
2
3
4
5
/* styles.css */

div {
  color: white;
}

Class Selectors

Class selectors will select all elements with the given class, which is just an attribute you place on an HTML element.

1
2
3
<!-- index.html -->

<div class="alert-text">Please agree to our terms of service.</div>

The syntax for class selectors: a period immediately followed by the case-sensitive value of the class attribute. Classes aren’t required to be specific to a particular element, and one element could have a few classes like this: class="alert-text severe-alert". Since white space is used to separate class names like this, you should never use spaces for multi-worded names and should use a hyphen instead.

1
2
3
4
5
/* style.css */

.alert_text {
  color: red;
}

ID Selectors

ID selectors are similar to class selectors. They select one element with the given ID, which is specific to one element. And one element can only have one ID.

1
2
3
<!-- index.html -->

<div id="title">My Awesome 90's Page</div>

We use a hashtag immediately followed by the case-sensitive value of the ID attribute.

1
2
3
4
5
/* style.css */

#title {
  background-color: red;
}

The Grouping Selector

1
2
3
4
5
6
7
8
9
10
11
12
13
.read,
.unread {
  color: white;
  background-color: black;
}

.read {
  /* several unique declarations */
}

.unread {
  /* several unique declarations */
}

In this case, selector read and unread share the same declaration of color and background-color, but they could also have some unique declarations like that.

Chaining Selectors

See the following case:

1
2
3
4
<div>
  <div class="subsection header">Latest Posts</div>
  <p class="subsection" id="preview">This is where a preview for a post might go.</p>
</div>
1
2
3
4
5
6
7
.subsection.header {
  color: red;
}

.subsection#preview {
  color: blue;
}

What .subsection.header does is it selects any element that has both the subsection and header classes.

Descendant Combinator

Take look at this case:

1
2
3
4
5
6
7
8
9
10
11
<!-- index.html -->

<div class="ancestor">
  A
   <div class="contents">
    B
     <div class="contents">C</div>
  </div>
</div>

<div class="contents">D</div>
1
2
3
4
5
/* styles.css */

.ancestor .contents {
  /* some declarations */
}

In this case, B and c will be selected.
Descendant Combination is to separate to class selector with space. This will select the element with the last class, and nested in an element with the first class, regardless of how deep that nesting is.

Properties to get started with

Color and Background-color

The color property sets an element’s text color, while background-color sets the background color of an element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
p {
  /* hex example: */
  color: #1100ff;
}

p {
  /* rgb example: */
  color: rgb(100, 0, 128);
}

p {
  /* hsl example: */
  color: hsl(15, 82%, 56%);
}

Typography basics and text-align

  • font-family
  • font-size
  • font-weight
  • text-align: Aligning text horizontally within an element, and you can use the common keywords you may have come across in word processors as the value for this property

Image height and width

By default, an <img> element’s height and width values will be the same as the actual image file’s height and width. If you wanted to adjust the size of the image without causing it to lose its proportions, you would use a value of “auto” for the height property and adjust the width value.

1
2
3
4
img {
  height: auto;
  width: 500px;
}

Adding CSS to HTML

External CSS

You could create a separate file for the CSS and linking it inside of an HTML’s opening and closing <head> tags with a void <link> element.

1
2
3
4
5
<!-- index.html -->

<head>
  <link rel="stylesheet" href="styles.css">
</head>

A couple of the pros to this method are:

  1. It keeps our HTML and CSS separated, which results in the HTML file being smaller and making things look cleaner.
  2. We only need to edit the CSS in One place, which is especially handy for websites with many pages that all share similar styles.

Internal CSS

Inside the opening and closing <head> tag, we could add the opening and closing <style> tag, and place all CSS rules inside it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <style>
    div {
      color: white;
      background-color: black;
    }

    p {
      color: red;
    }
  </style>
</head>

<body>
  ...
</body>

Inline CSS

Inline CSS makes it possible to add styles directly to HTML elements, though this method isn’t as recommended:

1
2
3
<body>
  <div style="color: white; background-color: black;">...</div>
</body>

Here we don’t actually use any selectors here, since the styles are being added directly to the opening <div> tag itself. Then we have the style=... attribute, with its value within the pair of quotation marks being the declarations.

Note: Inline CSS will override the other two methods, which can cause unexpected results