Cascading Style Sheets (CSS)

April 3, 2022

Yesterday, I created an article about HTML. Today, let me create an article about CSS. The queen for HTML. I recommend you W3Schools to learn CSS more and CSS-Tricks, the famous website for CSS tips and tricks. We're here to learn some common problems about CSS. This article can be a start for you in coding CSS.

Today, I found that a lot of developers worked with CSS preprocessors or frameworks, including new developers. There are a lot of front-end frameworks out there that come with SASS/Less. They can't be avoided and of course, those tools are good. But, it is also important to be good in native CSS too. Because that is what preprocessors produce.

CSS stands for Cascading Style Sheets. It is for HTML or document's look. Proposed in 1994 and released on 1996 by Håkon Wium Lie. Today, CSS has the fourth version, but it is still debated.

Start

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" href="app.css">
<style>
.error { color: red; }
</style>
</head>
<body>
<p>This is <span style="color:red">inline CSS</span>.</p>
<p>This is <span class="error">internal CSS</span>.</p>
<p>This is <span class="success">external CSS</span>.</p>
</body>
</html>

1
2
3


.success {
  color: green;
}

There are three ways to insert CSS into the document; inline, internal, and external.

Inline

An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element.

Most WYSIWYG editors produce inline styles which is not recommended. Because it will create many repetition and hard to override the styles, you may need !important as a suffix for the value of attributes.

Internal

An internal style may be used if one single HTML page has a unique style. You need to put them inside <style> before </head>. The web browser will load the styles along with the content. It is not recommended if you have many styles because it will make the article heavy to load.

External

An external style is a CSS file that will be loaded with <link> as long with rel attribute equal to stylesheet. It is common in many websites. The web browser will load the CSS file and cache it after the HTML loaded.

ID vs Class

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!DOCTYPE html>
<html>
<head>
<title>ID vs Class</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<p id="id" class="gradient">ID is unique.</p>
<p id="class" class="gradient">Class is not unique.</p>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


.gradient {
  background: -webkit-linear-gradient(blue, green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#id::first-letter {
  font-weight: bold;
}

#class::first-letter {
  font-style: italic;
}

The most common question in front-end interviews is that many new developers fail. What is the difference between ID and class? Well, the answer is simple. ID is unique, which means only one, while class is not. ID is to identify an element while class is to group several elements. We can select the element with # for ID and . for the class in CSS. It has the same meaning in JavaScript too. We can select the element with getElementById() for ID and getElementsByClassName() for the class in JavaScript.

Reset

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


<!DOCTYPE html>
<html>
<head>
<title>Reset</title>
<link rel="stylesheet" href="reset.css">
</head>
<body>
<h1>Reset</h1>
<p>Remove default style of HTML tags.</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
</ul>
<table>
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Body 1</td>
            <td>Body 2</td>
            <td>Body 3</td>
        </tr>
        <tr>
            <td>Body 1</td>
            <td>Body 2</td>
            <td>Body 3</td>
        </tr>
        <tr>
            <td>Body 1</td>
            <td>Body 2</td>
            <td>Body 3</td>
        </tr>
    </tbody>
</table>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


body {
  font-size: 18px;
  margin: 0;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: normal;
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

table {
  border-spacing: 0;
  margin: 0
}

td,
th {
  font-weight: normal;
  padding: 0;
}

HTML tags come with default styles. Some tags have different styles depending on the web browser. We need to reset them to make them consistent on every web browser. We need to remove those default styles.

The easiest way is to select all elements using *. But, that is not the recommended way. Because you will need to override the tag again. The code above can be your reference. There are also many reset CSS out there. The famous one is normalize.css.

Typography

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


<!DOCTYPE html>
<html>
<head>
<title>Reset</title>
<link rel="stylesheet" href="typography.css">
</head>
<body>
<h1>Reset</h1>
<p>Remove default style of HTML tags.</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
</ul>
<table>
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Body 1</td>
            <td>Body 2</td>
            <td>Body 3</td>
        </tr>
        <tr>
            <td>Body 1</td>
            <td>Body 2</td>
            <td>Body 3</td>
        </tr>
        <tr>
            <td>Body 1</td>
            <td>Body 2</td>
            <td>Body 3</td>
        </tr>
    </tbody>
</table>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  margin: 0;
}

h1,
h2,
h3,
p,
table,
ul {
  line-height: 1.5em;
  margin: 0 0 22px 0;
}

h1,
h2,
h3 {
  font-weight: bold;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1em;
}

ul {
  list-style: none;
  padding: 0;
}

table {
  border-spacing: 0;
}

td,
th {
  font-weight: normal;
  padding: 5px 10px;
}

While slicing design to HTML, the design comes with typography. That is the base of every style. The best way to code typography in CSS is to override the default tags with the typography.

The CSS above is the copy from the previous one. I just updated some tags with some styles instead of resetting them.

Screen Reader

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html>
<head>
<title>Screen Reader</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
    <p><a href="#"><span class="sr-only">Go to the next page!</span> &rarr;</a></p>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

The content should be easy to read by machines or screen readers, not just humans. If there is some content that you need to hide from humans, not machines, you can use the screen reader class like above from Tailwind CSS.

Navigation

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<nav>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li>
            <a href="#">Menu 2</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li>
                    <a href="#">Sub Menu 2</a>
                    <ul>
                        <li><a href="#">Sub Sub Menu 1</a></li>
                        <li><a href="#">Sub Sub Menu 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu 3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
</nav>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


nav ul {
  background: #333;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav > ul {
  display: flex;
}

nav li {
  position: relative;
}

nav li > ul {
  display: none;
  position: absolute;
}

nav li > ul ul {
  left: 100%;
  top: 0;
}

nav a {
  color: #fff;
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  padding: 10px 15px;
  text-decoration: none;
  transition: all 0.3s;
  white-space: nowrap;
}

nav li:hover > a {
  background: #eee;
  color: #333;
}

nav li:hover > ul {
  display: block;
}

Some developers, especially new developers, failed to make nested navigation, especially main navigation. Technically, navigation is just a list of links, not a bunch of <div>. Let me give you a simple example of nested navigation here.

Take a look at some selectors that I used above. More information about combination selectors can be found on W3Schools CSS Combinators.

Responsive

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
</head>
<body>
<nav>
    <button onClick="toggle()"><span class="sr-only">Show navigation!</span> &equiv;</button>
    ...
</nav>
<script src="app.js"></script>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


nav button {
  background: #333;
  border: none;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 18px;
  padding: 10px 15px;
  transition: all 0.3s;
  width: 100%;
}

@media screen and (max-width: 1200px) {
  nav a {
    font-size: 14px;
    padding: 8px 10px;
  }
}

@media screen and (max-width: 767px) {
  nav button {
    display: block;
  }

  nav > ul {
    display: none;
  }

  nav > ul.active {
    display: block;
  }

  nav li > ul {
    display: block;
    padding-left: 10px;
    position: static;
  }
}

1
2
3


function toggle() {
  document.getElementById('navigation').classList.toggle('active');
}

Responsiveness is the important thing today. The web should adapt to many screen sizes of desktops, tablets, and smartphones. We can use CSS Media Queries.

I copied the previous code and added a button, CSS media queries, and JavaScript because the only CSS is not enough.

Closing

The most important is to master CSS syntaxes. But they are a lot. We can't put them all in a single article like this. Understanding how selectors work is also important. I love WordPress CSS Coding Standards. That is neat. I set them to be my CSS coding standards too. You can clone the repository of examples above here, https://github.com/aristorinjuang/css.

References

https://en.wikipedia.org/wiki/CSS