Skillsfuture Training
Enrichment Classes
Academic Tutoring
About Us
Skillsfuture Training
Enrichment Classes
Academic Tutoring
About Us

Basic Workshop 2

This is the companion guide for the AWS Build On Singapore 2020 Basic Workshop 2.

CSS

CSS - also stands for Cascading Style Sheets, is a separate language that allows us to control the appearance of our HTML file. In order to do so, we need to create a separate file in your project folder and that file ends with the CSS file extension.

Linking your CSS file to your HTML file

<link rel='stylesheet' href='styles.css'>

rel attribute indicates the relation of the linked file to your HTML file while href indicates the location of the linked file - in this case our CSS file.

Basic CSS syntax

body {
	color: red;
}

body - CSS selector - important to select a specific element(s) for styling.

{ ... } - All CSS rules should be within the curly braces. This indicates that you're applying these CSS rules to elements defined by the CSS selector before the curly braces.

color: red; - A simple CSS rule - setting the value red to the CSS rule color. Note that each CSS rule should end with a semicolon (;) and each new rule should be written in a new line.

CSS selectors & combinators

Selector Description
body Type selector - simply just use the name of the tag/node that you want to select i.e. body, p, a, li
.foo Class selector - a leading period will match elements based on the contents of their class attribute
#foo ID selector - a leading hash/pound symbol will match elements based on the contents of their id attribute
p a Descendant combinator as indicated by the presence of a single space character separating two selectors will match the second selector if they have an ancestor element matching the first selector
p > a Child combinator as indicated by the greater-than-sign (>) in the middle of two selectors will match the second selector that are the direct children of elements matched by the first selector
p, a You can combine multiple selectors into a selector list; technical selector lists are basically a list of multiple selectors. Useful for when you want to use a same set of CSS rules to affect a group of elements but difficult to select using a single selector
:hover Pseudo-selector that allows you to apply CSS rules on an element only when user hovers on top of the element using mouse

Cascade & Specificity

Cascade and Specificity are core features of CSS and it's very important to understand how these work in case your CSS rules doesn't work as expected.

CSS stands for Cascading Style Sheets; stylesheets cascade which simply means the order of CSS rules matter. This is only when they both have equal specificity.

Specificity is calculated depending on the selector's selection.

Selector Specificity value
Type selector (0, 0, 1)
Class selector (0, 1, 0)
ID selector (1, 0, 0)

Box model

box model

Color Space Sample code
Blue margin margin: 20px 30px 40px 50px; (clockwise from top to bottom)
Red border border: 1px solid black
Yellow padding padding: 20px 30px 40px 50px; (clockwise from top to bottom)
hello content HELLO

CSS common rules

Rules Description
height Controls the height of the content box. Commonly used unit: px, %, em, vh, vw
width Controls the width of the content box. Commonly used unit: px, %, em, vh, vw
margin Controls how far away this element from neighboring elements. Commonly used unit: px, %, em, vh, vw
padding Controls how much gutter area the box should space out from content area. Commonly used unit: px, %, em, vh, vw
border Controls the border of the box. Commonly used unit: px, %, em, vh, vw
border-radius Creates rounded corners. Values large enough will create pills or circle elements depending on the proportion of the element
display Controls how the element shoud flow in the document. Values: block, inline, inline-block, none, flex
align-text Controls how text in an element should align themselves. Values: left, right, center, justify
background-color Controls background color of content area and padding. Values: gray, #fff, rgb(0, 0, 0), rgba(0, 0, 0, 0)
font-weight Controls the weight of a font. Values: normal, bold, bolder, lighter, 100~900
font-family Controls the font of an element's text. Values: Takes in font names, multipe ones as fallback system.
font-size Controls font size of an element's text. Commonly used unit: px, %, em
color Controls color of text in the element. Values: similar to values in background-color
display Controls how the element shoud flow in the document. Values: block, inline, inline-block, none, flex
flex-direction Controls direction of flex for an element's children. Values: row, row-reverse, column, column-reverse
justify-content Controls spacing of flexed children in the flex-direction's main axis. Values: flex-start, flex-end, space-around, space-between, space-evenly
align-items Controls position of flexed children in the flex-direction's cross axis. Values: flex-start, flex-end, center
align-self Property for flexed children. Controls position of itself in the container's flex-direction's cross axis. Meant to override the container's align-item's value, if there's any. Value: flex-start, flex-end, center
opacity Controls transparency of the element. Values: 0 to 1

Useful CSS resources