❃ Tess' HTML & CSS Cheat Sheet ❃

Flexbox

Flex Container

Use the display property to define a flex container. Flex, inline-flex.

display: flex;

✦ 'justify-content' Property

justify-content is used to space items along the main axis.

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-around;

justify-content: space-between;

justify-content: space-evenly;

see more:

justify-content - mozilla

✦ 'align-items' Property

align-items is used to space items along the cross axis.

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;

align-items: self-end;

see more:

align-items - mozilla

✦ 'flex-wrap' Property

flex-wrap specifies that elements should shift along the cross axis if the flex container is not large enough.

flex-wrap: wrap;

1
2
3

flex-wrap: nowrap;

1
2
3

flex-wrap: wrap-reverse;

1
2
3

see more:

flex-wrap - mozilla

✦ 'align-content' Property

align-content is used to space rows along the cross axis.

flex-wrap: wrap;

align-content: flex-start;

1
2
3
4
5
6
7

flex-wrap: wrap;

align-content: flex-end;

1
2
3
4
5
6
7

flex-wrap: wrap;

align-content: center;

1
2
3
4
5
6
7

flex-wrap: wrap;

align-content: baseline;

1
2
3
4
5
6
7

see more:

flex-wrap - mozilla

Flex Items

✦ 'flex-grow' Property

flex-grow is used to specify how much space (and in what proportions) flex items absorb along the main axis.
Defaults to 0, so flex items will not grow unless declared.
Resize window to see them grow.

all ➛

flex-grow: 1;

middle box ➛

flex-grow: 1;

side boxes ➛

flex-grow: 2;

middle box ➛

flex-grow: 1;

see more:

flex-grow - mozilla

✦ 'flex-shrink' Property

flex-shrink is used to specify how much flex items shrink and in what proportions along the main axis.
Defaults to 1, so flex items will shrink even if undeclared.
Resize window to see them shrink.

side boxes ➛

flex-shrink: 3;

side boxes ➛

flex-shrink: 0;

middle box ➛

flex-shrink: 2;

see more:

flex-shrink - mozilla

✦ 'flex-basis' Property

flex-basis is used to specify the initial size of an element styled with flex-grow and/or flex-shrink. main axis.
Defaults to 0, so flex items will not grow unless declared.
Resize window to see.

side boxes ➛

flex-grow: 3;

middle box ➛

flex-basis: 60px;

side boxes ➛

flex-shrink: 3;
flex-basis: 150px;

see more:

flex-basis - mozilla

✦ 'flex' Property

flex is used to specify flex-grow, flex-shrink, and flex-basis in one declaration.

➛ One value, unitless number: flex-grow . flex-basis is then equal to 0.

flex: 2;

➛ One value, width/height: flex-basis

flex: 10em;
flex: 30%;
flex: min-content;

➛ Two values: flex-grow | flex-basis

flex: 1 30px;

➛ Two values: flex-grow | flex-shrink

flex: 2 2;

➛ Three values: flex-grow | flex-shrink | flex-basis

flex: 2 2 10%;

right & middle box ➛

flex: auto;

left box ➛

flex: initial;

auto
auto
initial

right box ➛

flex: 4;

middle box ➛

flex: 2;

left box ➛

flex: 1;

4
2
1

right box ➛

flex: 1 1 8em;

middle box ➛

flex: 2 2 8em;

left box ➛

flex: 4 4 8em;

see more:

flex - mozilla

HTML Table

Table Tags

Tag Name Description
<table> Table The wrapper element for all HTML tables.
<thead> Table Head The set of rows defining the column headers in a table.
<tbody> Table Body The set of rows containing actual table data.
<tr> Table Row The table row container.
<td> Table Data The table row container.
<tfoot> Table Foot The set of rows defining the footer in a table.

Table Attributes

Attribute Name Description
colspan Column Span Defines how many columns a td element should span.
rowspan Row Span Defines how many rows a td element should span.

see more:

tables - mozilla

Grid

grid-template: repeat(13) / repeat(17);

One
Two
Three
Four
Five
Six
seven
eight
nine
ten

see more:

grid - mozilla
grid-template-area - mozilla

Fonts

Importing

✦ using css @font-face rule

(formats include:'ttf', 'woff2', 'truetype, 'opentype', 'embedded-opentype', and 'svg')

(this kind of seems like this just doesnt work with certain fonts. soz 🤷🏻‍♀️ )

@font-face {
font-family: 'Great Font (Luminari)';
src: local('Font-Regular'), url(./fonts/Font-Regular.ttf) format('ttf');
}

font-family: 'HWT Arabesque W00 Regular', serif;

Great Font (Luminari)

see more:

@font-face - mozilla

✦ using css @import rule

Should be at the top of css file (above styles it's needed for)

Should not be nested

@import url("https://the-font-you-want");

Then just use with font-family :

font-family: 'HWT Arabesque W00 Regular', serif;

HWT Arabesque W00 Regular

see more:

@import - mozilla

✦ <link>

Add a link to the head of the html.

<link
href="https://the-font-you-want" rel="stylesheet">

Then just use with font-family :

font-family: 'Sansita', sans-serif;

Sansita

see more:

<link> - mozilla

SASS

Syntax

✦ variables

be consistent in your naming convention

$color-1: #94a7ff;
$color-2: #f394ff;
$color-3: #fdad52;
$border-standard: 5px solid $color-2;
$border-alternate: 5px solid $color-3;

✦ nesting

.sassyParent {
background-color: $color-1;
border : {
top: $border-standard;
}
.sassyChild {
background-color: $color-3;
}
}

✦ & : parent selector

.sassyContainer {
&:hover{
background-color: $color-3;
.sassyChild {
background-color: $color-1;
}
}
.sassyChild {
background-color: $color-3;
&:hover{
background-color: $color-2;
}
}
}

✦ Mixin : @mixin @include

In Sass, a mixin lets you make groups of CSS declarations that you want to reuse throughout your site.

Mixin can (& should) take an argument(s) ($argument)

Mixin arguments can be assigned a default value in mixin definition.

@mixin border-dashed($width, $color: #fff) {
border: {
color: $color;
width: $width;
style: dashed;
}
}

span {
@include border-dashed(3px);
//only passes non-default argument
}

p {
@include border-dashed(3px, green);
//passes both arguments
}

div {
@include border-dashed(color: purple, width: 5px);
//passes out of order but explicitly defined
}

✦ interpolation

@mixin photo-content($file) {
content: url(#{$file}.jpg);
//string interpolation
}

Logic

✦ Functions & operations

Fade-out function

fade-out makes a color more transparent by taking a number between 0 and 1 and decreasing opacity, or the alpha channel, by that amount

$faded-color-2: fade-out($color, $amount);

Fade-in function

The fade-in color function changes a color by increasing its opacity:

$color-3: fade-in($color, $amount);

Adjust-hue function

fade-out makes a color more transparent by taking a number between 0 and 1 and decreasing opacity, or the alpha channel, by that amount

$color2: adjust-hue($color, $degrees);

numeric operations

$color: #010203 + #040506;
height: $width/2;
line-height: $width/6;
border-radius: $width/30;
font-size: $width/6/2;

Particulars for / as a division operator:

width: $variable/6; //division
line-height: (600px)/9; //division
margin-left: 20-10 px/ 2; //division
font-size: 10px/8px; //not division

✦ Flow Control Rules

@if @else

@if rule executes a block of code if a specified expression is true and skips it if the expression is false.

@if $expression-that-returns-true-or-false { ... }

width: if( $condition, $value-if-true, $value-if-false);

@mixin deck($suit) {
@if($suit == diamonds or $suit == spades){
color: blue;
}
@else-if($suit == clovers or $suit == hearts ){
color: red;
}
@else{
//some rule
}
}
Heart ♥︎
Spade ♠︎
Clover ♣︎
Diamond ♦︎
Unknown Suit ❁

@each

The @each rule simplifies applying styles or running code for each item in a list or each pair in a map .

With Lists :

It’s great for repetitive styles that only have a few variations between them.

It’s usually written :

@each <variable> in <expression> { ... }

where the expression returns a list . The block is evaluated for each element of the list in turn, which is assigned to the given variable name.

$sizesList: 1rem, 2rem, 3rem;
@each $size in $sizesList {
.ball-#{$size} {
width: $size;
height: $size;
border-radius: $size;
background-color: #94a7ff;
}
}

With Maps :

You can also use @each to iterate over every key/value pair in a map by writing it:

@each <key-variable>, <value-variable> in <expression> { ... }

The key is assigned to the first variable name,
and the element is assigned to the second .

$ballColorsList : ('one': $color-1, 'two': $color-2, 'three': $color-3);
@each $name, $color in $ballColorsList {
.ballColor-#{$name} {
background-color: $color;
}
}

@for

The @for rule iterates over a range of numbers, starting from the result of the first expression and going up to (excluding) or through (including) the result of the second expression.
It evaluates a block of code for each number in the range,
with the current number assigned to the specified variable .

@for <variable> from <expression> to <expression> { ... }

or

@for <variable> from <expression> through <expression> { ... }

$total: 10; //Number of .ray divs in our html

$step: 360deg / $total; //Used to compute the hue based on color-wheel

.ray {
height: 30px;
}
@for $i from 1 through $total {
.ray:nth-child(#{$i}) {
background: adjust-hue($color-1, $i * $step);
width: if($i % 2==0, 300px, 350px);
margin-left: if($i % 2==0, 0px, 50px);
}
}

@while is necessary for a few particularly complex stylesheets, you’re usually better off using either @each or @for if either of them will work. They’re clearer for the reader, and often faster to compile as well.

see more:

@Sass Flow Control Rules

see more:

@Sass documentation