This is the companion guide for the AWS Build On Singapore 2020 Basic Workshop 2.
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.
<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.
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.
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 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) |
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 |
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 |