Introduction To CSS

Series

Goals

The following article aims to provide an introduction to CSS by exploring some fundamental concepts. We will examine a CSS code snippet and break down each line to understand its purpose.

Additionally, we will discuss how we can modify and customize the code to suit our specific needs and use cases. By the end of the article, you will have a solid understanding of the code and be equipped to apply it creatively to your own projects. Let's dive in and explore the world of CSS together!

What is CSS for?

CSS (Cascading Style Sheets) is a language that defines how web documents are presented to end users. It serves the purpose of enhancing the visual appearance of web pages, making them visually appealing, engaging, and easy to read. With CSS, we can create visually captivating designs by defining rules that determine the styles to be applied to specific elements or groups of elements within a document. By using CSS, we have the power to transform plain and dull web pages into visually stunning and aesthetically pleasing experiences for users.

Starting with some HTML

<!doctype html>
<html lang="en">
  <head></head>
  <body>
    <span>hello world</span> 
  </body>
</html>
hello world

Saying, "i need the hello worlds is in the middle of page, horizontally", the below rules of style will help me out.

span {
  text-align: center;
}
hello world

CSS can be used for very basic document text styling - changing font style, text color, highlight text,... It can also be used to create complex layouts with animation. We'll explore more and more of CSS later in this series but for now:

We use CSS for styling things

CSS syntax

CSS rules always start with a selector. this's the part of a CSS rule to specify what elements in a document will take rules effects.

/* "span" is a SELECTOR to indicate */
/* that all "span" elements will be styled by the following rules*/
span {
  /* the property "color" following by "red" value indicate that */
  /* text inside "span" element in the document will have red color */
  color: red;
 
  /* we can write as much style inside the bracket "{ ... }" as we need */
  ...;
}

Class-based CSS selector

Up until now, we have been applying styles to elements based on their HTML element names. This approach is suitable when we want all elements of the same type to have the same style. However, in most cases, we need to target specific elements with different styles. In this section, we will explore alternative ways of selecting elements and applying CSS rules to them.

Basic selectors

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <span class="class-a" id="span-a">hello</span>
    <div class="class-b">
      <span class="class-b">my</span>
      <span class="class-a class-b">world</span>
    </div>
  </body>
</html>

It's a good idea not to skip the below section. But to be honest, all you need to know is there are CSS selectors look like this: *, element, .class-name, #element-id, [attribute], A B, A>B, A+B, A~B, A:<...>, A::<...>

Selector is vital because it helps us answer the question of how to style specific elements. It provides the tools to customize the appearance of individual elements on a web page.

Universal selector:

  • select all elements in document
  • syntax: *
  • example:
/* will match all elements, which is: `html`, `body`, `span`, `div` */
* { property: value }

Type selector:

  • select all elements match node name in selector
  • syntax: elementname
  • example:
/* will match all `span` */
span { property: value } 
/* will match all `div` */
div { property: value }

Class selector:

  • select all elements that have given class attribute in selector
  • syntax: .classname
  • example:
/* will match all element has class includes "class-a" */
.class-a { property: value } 
/* will match all element has class includes "class-b" */
.class-b { property: value } 
/* will match all element has class includes "class-a" AND "class-b" */
.class-a.class-b { property: value }

Id selector:

  • select all elements that have given id attribute in selector
  • syntax: #id
  • example:
/* will match all elements has id: `span-a` */
#span-a { property: value }

Attribute selector:

  • select all elements that have the given attribute.
  • syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value]
  • example:
/* will match all element has class includes "class-a" */
[class="class-a"] { property: value }
/* this's same as */
.class-a { property: value } 
 
/* will match first `span` */
[id="span-a"] { property: value } 
/* this's same as */
#span-a { property: value }

Grouping selectors

This's the same as basic selector but we separate them using , to group the same set of elements that take rules style

div,
.class-b {
  /* all `div` in documents and also all element has class "class-b" */
  /* will have text color of red */
  color: red;
}

Combinator

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <span class="class-a" id="span-a">hello</span>
    <!-- 1 -->
    <div class="class-b">
      <span class="class-b">my</span>
      <!-- 2 -->
      <span class="class-a class-b">world</span>
      <!-- 3 -->
      <p>
        <span>here</span>
        <!-- 4 -->
      </p>
      <span>and here</span>
      <!-- 5 -->
    </div>
  </body>
</html>

descendant combinator:

  • select nodes that are descendants of the first elements
  • syntax: A B where A, B are basic selector
  • example: - div span { ... } will match all span that are child of div, which is 2nd and 3rd span - div .class-a {} will match span that has class class-a and the span must be child of a div , which is 3rd span - we can apply all kind of basic selector into descendant combinator to make CSS work the way we need.

child combinator:

  • selects nodes that are direct children of the first element
  • syntax: A > B
  • example:
    • div > span will match all span that are direct child of a div, which is 2nd, 3rd and 5th span the 4th span will not match because it is direct child of a p

general sibling combinator

  • select nodes that are siblings of the first element that are share same direct parent
  • syntax: A ~ B
  • example: span ~ span will match 3rd, 5th span, the 4th span will not be match because it doesn't share same parent span ~ p will match p

adjacent sibling combinator

  • same as general sibling combinator but the siblings must be immediately follows the first element
  • syntax: A + B
  • example: span + span will match 3rd span, the 5th span will not match because it's not immediately after the 2nd span span + p will match p

Pseudo selector

pseudo classes

  • select elements based on state information
  • syntax: A:pseudo { ... }
  • example: a:visited will match all a elements that have been visited by the user.

pseudo elements

  • select a specific part of the selected element
  • syntax: A::pseudo { ... }
  • example: div span:first-child will match 2nd span

Example

Most of the time, we use selector to answer the question "how to style that specific element", this section is for demonstrating this.

To understand why elements have certain styles, you can use browser dev tools. These tools allow you to inspect and analyze web pages, helping you understand the styling applied to different elements. Check out this article to learn more about inspecting web pages and gaining insights into their styling.

first spansecond span
third spanfourth span
<div class="first">
  <span class="a">first span</span>
  <span class="b">second span</span>
</div>
<div class="second">
  <span class="a b c" id="c">
    third span
  </span>
  <span class="d">fourth span</span>
</div>
* {
	/* select all element */
	font-size: 18px;
}
 
span {
	/* select all span */
	color: cyan;
	padding: 10px;
	display: inline-block;
	background-color: lightgrey;
}
 
div {
	/* select all div */
	background-color: grey;
	padding: 10px;
	margin-top: 10px;
}
 
div > span {
	/* select all span has parent of div */
	font-weight: bold;
	font-size: 22px;
}
 
.a {
	/* select all element has class "a" ( class="a" ) */
	background-color: blue;
}
 
.b {
	/* select all element has class "b" */
	color: white;
}
 
.c,
.d {
	/* select all element has class "c" or "d" */
	text-decoration: underline;
}
 
#c {
	/* select all element has id "e" */
	background-color: yellow;
	color: blue;
}

If I need to style the third span, there are several ways to do it:

  • by class:
    • either .a, .b, .c work but .a, .b will all so style the "first span" and "second span"
    • .a.b.c is better idea
  • by id: #c will work
  • by position: div:nth-child(2) span:nth-child(1), learn more about :nth-child
  • or all of above:
.a.b,
.a.b.c,
#c,
.c#c,
div:nth-child(2) span:nth-child(1) {
}