SettingsEn | 中
Web Development Basics
Intro to CSS
by Dexter Leung, Sep-24, 2017

Intro to CSS

CSS is the abbreviation of Cascading Style Sheet. A style sheet can be used to describe the presentation of a markup document like HTML document. The standard of CSS is also prepared and documented by W3C.

We usually prepare a CSS style sheet in a seperate file (.css). This is also a plain text but only in CSS syntax. As discussed in Chapter 2, the .css file can be used in an HTML document through a <link> element, where the mentioned CSS styleshet would be responsible for the presentation of that HTML document:
<link rel="stylesheet" href="/stylesheet.css" type="text/css" />

CSS Syntax

CSS Rules

What it means by a CSS Rule is that how you would need to style which HTML element(s). Therefore, in a rule, you need to state a selector (which element(s) to be styled), and a declaration block (what styles to be applied). We would first write the selector in CSS Selector syntax, then a declaration block within a pair of {} braces.

Example 1
CSS Rules
CSS
Copy All
#ele1 { color: green; background-color: black; }
.class1 {
font-weight: 800;
color: #ff0000;
}

There are 2 rules in Line 1 and Line 3 which are common indentations as you can see:
Rule 1: The selector and declaration block are on the same line.
Rule 2: The declaration block starts on the same line of selector, but spans across multiple lines.

It's up to you whether the selector and declaration block is on the same line in a rule. However, after a selector, a declaration block should be followed by a blank or new line. Similarly, after a declaration block, you can start a new rule by placing a selector after a a blank or new line.

Element Class List & ID

Before we talk more on how to use CSS selectors, let's jump back and discuss more on HTML elements. As we discussed, all elements to be shown on the webpage would be put within the <body> element. Therefore, all the CSS selectors would select the elements inside, or the <body> itself.

We have tag names to identify the types of HTML elements with the usage defined by W3C.
However, when it comes to styling, we often have some classes of elements that would look similar, while some unique elements may have their specific styles. Therefore, all the elements could have attributes of class and id. These attributes allow us to specify the nature of specific elements, where tag names would be a too broad to label them with only the HTML functionality definition.

In class attribute, there can be one or more class name stated in its value, where each class name is space-separated. This also infers that a class name cannot include a space character. For example, <p class="passageParagragh highlighted">
The element above have 2 classes, passageParagragh and highlighted. Wih class names, we can specify the presentation of different classes in different styles.

Although different element types can have the same class name, it does not make any sense for us to do so because they are usually with different natures of functionality.

In id attribute, there can only be one value, and it should be unique among all elements within one HTML document. An ID cannot include a space character as well. Since id is used to identify one specific element, it's seldom to put this attribute in body or main elements because they are already the only element within an HTML document.

CSS Selectors

There are a few types of basic selectors that you may need to know:

  1. tagName
    If you just write some words, this simply refers to a tag name. If so, all elements of this type would be styled by the following declaration block.
  2. .className
    If you start with a dot (.), this means you're referring to a class of elements. If so, all elements with this class name would be styled by the following declaration block.
  3. #elementID
    If you start with a hash (#), this means you're referring to an element ID. If so, the element with this ID would be styled by the following declaration block.

Sometimes, you may need to select the element with a combo of tagname / classname / id criteria.

  1. AND (fulfill both or more selectors)
    If you would like to specify cases like "p elements with class name highlighted", or "elements with classname highlighted and temporary", you can just use the above basic selectors, but with no space or line seperated. For example, p.highlighted and .highlighted.temporary simply answer the 2 questions.
    As a results, elements fulfilled all the combined selectors would be styled with the following declartion block.
  2. OR (fulfill either selectors)
    If you would like to specify cases like "p or article elements would be styled", or "elements with classname important or urgent would be styled", you can use a comma (,) to sepearate the selectors. For example, p, article and .important, .urgent simply answer the 2 questions.
    As a results, all of the elements fulfilled either one selector would be styled with the following declartion block.

As we discussed, HTML elements are always nested, where some elements can be the children of another one. So, how can we select some specific elements that is only within a parent or ancestor element?

  1. Children
    Using a Larger Than angle bracket (>) can label the relationship between 2 selectors, combining the result as the selection of one selector which is the children of another selector.
    For example, p.highlighted > span would select any span elements which are the children of any p elements with class name highlighted.
  2. Descendant
    Sometimes, you may need to select deeper or any descendant of a certain element type. Unlike using > which you can only select the children (immediate descendant), using a blank space can label a descendant relationship between 2 selectors.
    For example, article .highlighted would select any elements with class name highlighted which are the descendent of any article elements.

And finally, there is a selector to select all elements:

  • All (*)
    Using an asterisk (*) can select all elements.
    For example, #info > * would select all elements which are the children of the element with ID info.
Example 2
CSS Selectors
HTML
Copy All
<ol>
<li>Download Emoji Viewer</li>
<li class="important highlighted">Open the App</li>
<li>View the Emoji</li>
</ol>
<p>
How to make a drink for summer? Here is <span class="highlighted">my recipe</span>:
</p>
<ul>
<li class="important">Pineapples - 6oz</li>
<li>Coconut - <span class="highlighted">3oz</span></li>
<li class="important">Milk - 12oz</li>
</ul>
Interactive Demo

Try to choose one of the selectors below, or input your own selector, to select the elements in this Example.

li ul > li .important .important.highlighted ul, .highlighted p, li.highlighted ul *
  1. Download Emoji Viewer
  2. Open the App
  3. View the Emoji

How to make a drink for summer? Here is my recipe:

  • Pineapples - 6oz
  • Coconut - 3oz
  • Milk - 12oz

Style Declarations

We can have a list of style declarations within a declaration block inside a pair of braces {}. A style declaration is a property and value pair. The value and property is separated by a colon :. Each style declaration is separated by a semi-colon ;. It's a good practice for you to end each declaration with a semi-colon.

Comments

As if in HTML documents, we can write comments where the content of it are not used for presentation and only for our remarks use. Each comment starts with /* and ends with */. You can have multiple lines of content within it.

Example 3
CSS Declarations & Comments
CSS
Copy All
/* A CSS Rule is written below */
.highlighted {
font-weight: 800;
background-color: yellow; /* Paint the background to yellow as if highlighted */
}

In this Example, we have 2 declarations in this rule of sepecifying the style of elements with class name highlighted.
The first declaration has propertyfont-weight with value 800;
while the second declaration has propertybackground-color with value yellow.

We'll discuss the types of CSS properties later on, and how to put the values on it to style our HTML document.

Selector Inheritance

All the children elements will be inherited with the CSS declarations of their parent elements by default. That is, all the descendent elements will be styled the same as the selected elements unless specified.

Rule Order for Selector Effectiveness

The same selected elements with the same CSS declaration rules will be determined by the rule order. A later defined CSS declaration would be effective for the same selected element.

Selector Specificity

Different written CSS Selectors may apply on part of the same elements. Rather than rule order or inheritance, the final presentation will be determined by the selector specificity. The specifiy is based on the following rule:

  1. Number of ID Selectors
  2. Number of Class Selectors (& Attribute / Pseudo-Classes Selectors to be discussed later on)
  3. Number of Element Type Selectors
Example 4
CSS Specificity
HTML
Copy All
<div class="uncle">
<div id="hiUncle">Hi Uncle!</div>
<div class="uncleSay">
<p id="hiApple">Hi Apple!</p>
<p id="hiPineapple">Hi Pineapple!</p>
<div id="bye">Bye!</div>
</div>
</div>
Example 4
CSS Specificity
CSS
Copy All
.uncle .uncleSay { background-color: black ; color: white ; }
.uncle .uncleSay { background-color: white ; color: black ; }
/* The same selector with later order will be presented:
so it will be painted with white background with black text color. */
.uncle>div { color: red ; }
/* The specificity of this is less than Line 2,
so it will only be effective for the first div that is not .uncleSay , and make the text red. */
/* Try to understand yourself below */
.uncleSay p { background-color: palegreen ; color: darkblue ; }
.uncle .uncleSay p { background-color: pink ; }
#hiPineapple { background-color: yellow ; }
Demonstration
Hi Uncle!

Hi Apple!

Hi Pineapple!

Bye!

Values and Functions

Common Values

Before we talk more on different CSS properties and values, let's understand more about "What are values". Values is just the assigned information to a specific property. Each CSS properties have different values by their own definitions. There are some general types of CSS values:

  1. <String>
    This is just some words, and should be double-quoted(""). Properties like font-family, content, etc. may use it.
    Example: "Times New Roman"
  2. <Integer>
    This is simply an integer, with no special measurements on it. Properties like z-index, column-count, etc. may use it.
    Example: 8, 29
  3. <Number>
    This is simply a number, with no special measurements on it. It's not common to see CSS Values using numbers (because most of them needs unit of measure), but some functions may need numbers as parameters (to be discussed).
    Example: 8.29, 12.28
  4. <Percentage>
    This is simply a percentage, and should be ended with a % sign. It's not common to see CSS Values using numbers, but some functions may need percentages as parameters (to be discussed).
    Example: 100%, 50%
  5. <Length>
    Length is commonly used for presentational use, and it is followed by a valid type of unit of measure (to be discussed later). Properties like width, font-size, etc. may use it.
    Example: 8px, 1.5em

Functions

A function is a specified actions to give you a value. To initiate such action, you need to write and start with a function name and immediately (without any white space or new line) followed by a pair of brackets. Within the brackets, you can have parameters (input variables) that you would have a different returned value (result).

The expression of a function usually like this: functionName(parameter1, parameter2, parameter3 ... ). In CSS, there are many functions that can be used, and the logics are defined by W3C. Therefore, you can always have reference that what kinds of functions are available, what parameters are allowed in each functions, and what values will be reutrned from each functions.

Expressing Value Definitions

In order to be clear about what type of values are available for each property, I'd follow the W3C approach on expressing the definition for you. Each kind of value would be bracketed using a pair of angle-bracket <value-type>.

Sometimes, only a few values are allowed in a properties. The list of values would be expressed separated by a single bar, and you can only choose either values as the property value.
For example, normal|italic|oblique: you can fill in either values for the discussing CSS property, like normal.

Sometimes, only multiple values are allowed in a properties. The list of values would be expressed separated by a double bar, and you can only write down the property values with space separated.
For example, <length>||<length>: you should fill in 2 lengths for the discussing CSS property, like 3px 2px.

Sometimes, these expressions may be grouped and repeated. The group would be enclosed by a pair of [], and if it can be repeated, it will be followed by a # and the CSS values should be used with comma separated.
There are different cases how will the value be presented if it's repeated, and you'd look up definitions of different property definitions.
For example, [normal|italic|oblique]||<length>: you can fill in the value like this: normal 15cm.

You may have reference on W3C Value Definition Specification, and more examples are tabled for your reference.