HTML CSS Reference

By: supersimple.dev
Video: https://youtu.be/G3e-cpL7ofc

HTML Basics
<button>Hello</button> Creates a button with the text "Hello"
inside.
<p>paragraph of text</p> Creates a paragraph of text.

HTML Syntax
Syntax = rules for writing HTML code (like grammar in English).

1. Elements should have an opening tag and a matching closing tag.

2. In HTML, extra spaces and newlines are combined into 1 space.

<p>paragraph of text</p>
<p>paragraph of text</p>
<p>
paragraph of text
</p>
All 3 examples above will show the same result on the web page.

Attributes
Attributes modify how an HTML element behaves.

<a <a> = link to another website.

href="https://youtube.com href = modifies which website is
"> Link to YouTube opened when clicking this link.
</a>
<a href="https://youtube.com" target="_blank" causes the
target="_blank"> Link to YouTube link to be opened in a new
</a> tab.

CSS Basics
One way of writing CSS code is using the <style> HTML element.

<style>
button { Modifies all <button>s on the page.
background-color: Change background color to red.
red; color: white; Change text color to white.
}
</style>

CSS Syntax

CSS Properties
Here are some common CSS properties we can use:

button {
background-color: red; Sets the background color. Common values:
● Color name: red, white, black
● rgb value: rgb(0, 150, 255);
● Hex value: #0096FF
color: white; Sets the text color. Takes the same
values as background-color (color
name, rgb, hex).

height: 36px; Sets the height. Common values:

● Pixel value: 36px
● Percentage: 50%
width: 105px; Sets the width. Takes the same values as height.
 border: none; Removes the border.
border-radius: 2px; Creates rounded corners.
cursor: pointer; Changes the mouse/cursor when hovering over the
element.

border-color: red; Sets the border color.

border-style: solid; Sets the border style. Common values:
● solid
● dotted
● dashed
border-width: 1px; Sets the border
width.
}

How To Google CSS Properties

We regularly use Google to search for CSS properties that we don't know or don't
remember. When using Google, search what you're trying to accomplish.
Exampes:
"css rounded
corners" "css text
italic"
"css adjust space between lines"

CSS Values
Each CSS property has a set of values that are allowed (background-color allows
color values,
cursor allows solid, dotted, dashed, etc.)

Here are some categories of values that are useful to know:

Color Values
1. A color name: red, white, black

2. RGB value: rgb(0, 150, 255);

RGB is a more precise way of measuring color. Every color can be created
using a combination of red, green, and blue (RGB). In CSS, this is represented
by rgb(...);
Each color has a min value = 0 and a max value = 255.
rgb(0, 0, 0); = black
rgb(255, 255, 255); = white
 3. Hex value
Hex is another way to write RGB.

● Each character in Hex is base 16, which means it can have a value of 0, 1, 2,
... 8, 9, A, B, C, D, E, F (16 possible values).
● Using the first 2 characters, we can have 16 * 16 = 256 possible values from 0
- 255:
00 = 0
01 = 1
...
0F = 15
10 = 16
11 = (1 * 16) + 1 = 17
...
FF = (15 * 16) + 15 = 255
● This is the same range as RGB (0 to 255), so the first 2 characters in Hex
are used to represent red, the second 2 characters represent green, and
the third 2 characters represent blue. Usually, it's easier to use a Hex to
RGB calculator to convert.

4. RGBA value: rgba(0, 150, 255, 0.5);

Same as RGB, except with an additional a-value (alpha value). The a-value
determines how see-through the color is. 0 = complete see-through, 1 =
solid color and not
see-through, 0.5 = 50% see-through.

Measurement Values
1. Pixels: 50px, 100px
Pixels (px) are a common unit of measurement in the
digital world. For example: a 4K screen is 3840px by
2160px.

2. Percent: 50%, 100%

A relative measurement. For example, width: 50%; means 50% of the width
of the page (or if the element is inside another element, 50% of the width of
the container element).

3. em / rem: 1em, 1rem

Relative measurements that are useful for accessibility.
em = relative to the font-size of the element (2em means 2 times the font
size).
rem = relative to the font-size of the page, which is 16px by default (2rem
means 2 times the font size of the page = 2 * 16px = 32px by default).
Class Attribute
Class attribute = lets us target specific elements with CSS.

<button class="subscribe- Add a class to an element. The class name

button"> SUBSCRIBE (the text between the "...") can be
</button> anything you want, but no spaces.
.subscribe-button { Target all elements on the page with
... class="subscribe-button"
}

<button class="youtube- Multiple elements can have the same class

button"> SUBSCRIBE
</button>
<button class="youtube-
button"> JOIN
</button>

<button class="youtube-button subscribe- An element can have

button"> SUBSCRIBE multiple classes,
</button> separated by space

button Elements can be targeted by multiple CSS

{ selectors. Here, all 3 CSS selectors will target
... the button above.
}

.youtube-button {
...
}

.subscribe-button {
...
}

CSS Pseudo-
Classes These styles only apply when hovering
.subscribe-button:hover over an element with
{ class="subscribe-button"
...
}

.subscribe- ...
button:active {
These styles only apply element with class="subscribe-button"
when clicking on an
}
Intermediate CSS Properties
.subscribe-button {
opacity: 0.5; Sets how see-through an element is: 0.5 = 50% see-
through.
opacity: 0 = complete see-through (invisible).
0; 1 = not see-through (this is the default value).
opacity:
1;

transition: <property> <duration>; Transition smoothly when changing

styles
(often used when hovering).
transition: background-color 1s; Transition background color over 1
transition: color 0.15s; second. Transition text color over
transition: <property1> 0.15 seconds.
<duration1>, Transition multiple properties by
<property2> <duration2>, separating them with a comma.
...;
transition: background-color Transition both background color and
0.15s, color 0.15s; text color over 0.15 seconds.

box-shadow: <h-position> <v-position> <blur> <color>;

box-shadow: 3px 4px 5px black; Creates a shadow that's 3px to the right
of
the element, 4px to the bottom, with
5px of blur, and color of black.

box-shadow: 3px 4px 0 rgba(0, 0, 0, Creates a shadow that's 3px to

0.15); the right, 4px to the bottom,
} with no blur, and a very faint
black color.

Chrome DevTools
Lets us view (and modify) the HTML and CSS of a website directly in the
browser. To open the DevTools: right-click > Inspect.
CSS Box Model
● Determines how much space an element takes up.
● Determines how far away elements are from each other.

1. Margin = space on the outside 2. Padding = space

on the inside 3. Border

.join-button {
margin-right: Add 10px of space on the outside of the element.
10px; margin-left:
10px; margin-top:
10px; margin- Normal margin pushes things away from an element.
bottom: 10px;
margin-right: -20px; Negative margin pulls things towards an element like

this:

margin: 10px; Shorthand for adding 10px of margin on all

sides. margin: 10px 20px; Add 10px of margin top & bottom and 20px
left & right margin: <top> <left & right> <bottom>;
margin: <top> <right> <bottom> <left>;

padding-right: Add 10px of space on the inside of the element.

10px; padding-left:
10px; padding-top:
10px; padding-
bottom: 10px;
padding-right: -20px; Negative padding has no effect.

padding: 10px; Shorthand for adding 10px of padding on all

sides. padding: 10px 20px; Add 10px of padding top & bottom and 20px
left & right padding: <top> <left & right> <bottom>;
padding: <top> <right> <bottom> <left>;

border-width: 1px; Sets the border width.

border-style: solid; Sets the border style (to a solid color).
border-color: red; Sets the border color.
 border: <width> <style> Shorthand for the 3 properties above.
<color>; border: 1px solid
red;
}
Text Styles
.title {
font-family: Arial; Change the font.
font-family: Roboto, Verdana, A font-stack: if Roboto is not available,
Arial; it will fall back to Verdana. If Verdana
is not available it will fall back to Arial.

font-size: 30px; Change text size.

font-weight: Change text thickness.
bold; font- Another way to specify font-weight. We can use:
weight: 700; 100, 200, 300, ..., 900. bold = 700, regular = 400,
semibold = 500
font-style:
italic;
text-align: center; Other values we can use: left, right,
justified line-height: 24px; Adjust space between lines of text.
text-decoration: Underlines the
underline; text- text. Removes
decoration: none; underline.
}

<p> by default have margin-top and margin-bottom. A common practice is to:

1. Reset the default margins.

p {
margin-top: 0;
margin-bottom: 0;
}

2. Then apply more precise margins.

.title {
margin-bottom: 16px;
}

Text Elements (also called Inline Elements)

● Text elements (<strong>, <u>, <span>, <a>) appear within a line of text.
<p>
This is a <strong>text element</strong>
</p>
Useful if we want to style only a part of the text.

● <span> is the most generic text element (it doesn't have any default styles).

● We can style text elements using a class:

<p>
This is a <span class="shop-link">text element</span>
</p>

.shop-link {
text-decoration: underline;
}
The HTML Structure
<!DOCTYPE Tells the browser to use a modern version of HTML.
html>
<html> <head> contains everything that's not visible like the title and
<head> description (a.k.a. metadata) as well as links to fonts and CSS
... stylesheets.
</head>
<body> <body> contains everything that's visible like buttons, text,
... images, etc.
</body>
</html>

Elements in the Head Section

<head>
<title>Title in the tab</title> Sets the title in the tabs

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;500&display=sw ap">
^
Loads a font from Google onto the page. 1) Search "google fonts" in Google. 2)
Pick the fonts and styles that you like. 3) Copy the code that Google provides
into <head>

<link rel="stylesheet" href="styles.css"> Loads a CSS file to the page

</head>

Filepaths
href="styles.css" Looks for a file called styles.css beside the
HTML file.
href="fold1/styles.css" Looks for a folder called fold1 beside the HTML
file, then
goes into the folder and looks for styles.css.
href="fold1/fold2/styles.css" Go into fold1, go into fold2, look for
styles.css

Images
<img src="image.png"> Loads an image image.png beside the HTML file.
<img src="pics/image.png"> Loads image.png in the pics folder.
<img class="image" src="pics/image.png">

.image {
width: 300px; Resizes the image to a width of 300px. Height will
also
resize to keep the image's dimensions.
height: 300px; If both width and height are set, the image may
stretch.
object-fit: cover; Enlarges the image to cover the entire width *
height area
without stretching or distorting.
object-fit: contain; Shrinks the image so that it's contained in the width
*
height area.
 object-position: Determines where the image is positioned in the
left; object- width *
position: right; height area.
object-position: top;
object-position:
bottom;
}

Inputs
<input type="text"> Creates a text box.
<input type="text" Add a placeholder (a label) to the text
placeholder="Search"> box.
<input type="checkbox"> Creates a checkbox.
<input class="search-bar" type="text">

.search-bar {
font-size: 30px; Changes the font-size when typing into the text box.
}
.search-
bar::placeholder { Changes the font-size of the placeholder.
font-size: 30px;
}

CSS Display Property

.element {
display: block; Element will take up the entire line in its
container. display: inline-block; Element will only take up as much
space as needed. vertical-align: middle; Determines vertical alignment
of inline-block elements. display: inline; Element will appear within a
line of text (a text element).
}

<div> Element
<div> is a container. We generally put other elements (including other <div>s)
inside (nesting).

<div class="container">
<p>Name</p> .container {
<input type="text"> display: inline-block; width: 200px;
</div>
<div class="container">
<p>Quantity</p>
<div>
<button>1</button>
<button>2</button>
</div>
<button>Submit</
button>
</div>
<div>s allow us to group create more complex layouts.
elements together and
}
Nested Layouts Technique
There are 2 types of layouts:

1. Vertical Layout 2. Horizontal Layout

Most designs can be created using:

● Vertical layout inside horizontal layout inside vertical
layout ... OR
● Horizontal layout inside vertical layout inside horizontal layout ...

To Create the Vertical Layouts

● Use <div>s with display: block (most common)
● Use flexbox (explained later) with flex-direction: column
● Use CSS grid (explained later) with 1 column

To Create the Horizontal Layouts

● Use <div>s with display: inline-block (not recommended)
● Use flexbox with flex-direction: row
● Use CSS grid with multiple columns
Inline CSS Styles
Another way of writing css, using the style="..." attribute:

<div style="
background-color: ● Inline style = CSS is written within a line of HTML.
red; color: white; ● Inline styles only affect the element with the
"> style="..." attribute (no selectors are
... needed).
</div>

CSS Grid
.grid {
display: grid; Turns an element into a grid
grid-template-columns: 100px container. Sets how many columns
100px; are in the grid and how wide the
columns are.
column-gap: Sets space between the
20px; row-gap: columns. Sets space between
40px; the rows.
}

.grid {
display: grid;
grid-template-columns: 100px 1fr; 1fr = the column will take up the
remaining
amount of space in the grid container.
grid-template-columns: 1fr 1fr; The columns will take up an equal amount of
the
remaining space (since they're both 1fr).
grid-template-columns: 1fr 2fr; The number in front of fr = relatively how
much
space the column gets. Here, the 2nd
column gets twice the amount of space as
the 1st.

justify-content: center; Aligns the columns horizontally in the

justify-content: space- center. Spread out the columns evenly
between; align-items: horizontally. Aligns the columns vertically in
center; the center.
}

For more examples, see grid.html.

Flexbox display: flex;

flex-direction: row;
.flexbox {
Turns an element into a
flexbox container.
Lays out elements
horizontally inside
the flexbox. Usually
we don't need to
specify flex-
direction: row;
because it is the
default value.
 justify-content: center; Centers the elements in the flexbox
justify-content: space- horizontally. Spreads out the elements in
between; the flexbox evenly across the horizontal
space.

align-items: center; Centers the elements in the flexbox

align-items: space- vertically. Spreads out elements evenly in
between; the vertical space.
}

.element-inside-flexbox
{ width: 100px; Sets the width of the flexbox element to
flex: 1; 100px. Take up the remaining amount of
space. The value 1 determines relatively how
much space.
flex-shrink: 0;
Don't shrink the element when resizing.
width: 0;
Allow the element to shrink down when
resizing.
}

<div style=" Creates a flexbox where elements are placed

display: flex; horizontally (flex-direction: row; is the
flex-direction: default so it's not mandatory to have that in
row; "> the CSS)
<p style="width:
100px;"> Flexbox This element has a width of 100px.
element 1
</p>
<p style="flex: 1;"> This element takes up 1/3 of the remaining
Flexbox element 2
</p>
<p style="flex: 2;"> space. This element takes up 2/3 of the
Flexbox element 2
</p>
</div> remaining space.

flex-direction: column;
.flexbox {
display: flex; Lays out elements vertically inside the flexbox.
flex-direction: Also,
column; justify-content and align-items are reversed.

justify-content: center; Centers elements vertically inside the

justify-content: space- flexbox. Spreads out elements evenly in
between; the vertical space.
 align-items: center; Centers elements horizontally.
align-items: space- Spreads out elements evenly horizontally.
between;
}

For more examples, see flexbox.html.

CSS Position
● Create elements that stick to the page while scrolling.
● Create elements that appear on top of other elements.

.element {
position: This is the default value that every element starts with.
static; position: static; causes the element to display
} normally.

Position Fixed
.fixed { Positions the element in the browser window (sticks to
position: the page while scrolling).
fixed;

top: 0; Places the element 0px from the top of the browser
window.
bottom: 10px; 10px from the bottom of the browser
window. left: 50px; 50px from the left of the browser
window. right: 100px; 100px from the right of the browser
window.
● If you set opposite directions (top/bottom or
left/right),
the element will stretch.

top: -5px; Using negative pixels places the element beyond the top
edge.

width: 100px; Sets the element's width to

height: 100px. Sets the element's height
100px; to 100px.
} ● When using width/height the element will not resize
with
the page.
● When using top/bottom/left/right the element
will resize with the page.

Position Absolute
.absolute { Positions the element on the page (it will scroll with the
position: page and will not stick when scrolling).
absolute;

top: 0; Places the element 0px from the top of the page.
bottom: 10px; 10px from the bottom of the
page. left: 50px; 50px from the left of the
page. right: 100px; 100px from the right of the
page.

width: 100px; 100px;

height: }
S s the element's width to 100px.
e Sets the element's height to
t 100px.

Position Absolute Inside Position Fixed

● When a position: absolute element is inside a position: fixed
element, it will be positioned relative to the fixed element.
● This rule also applies to any position value that is not position: static.
● This lets us place elements in the corners of other elements. For
example, a "Close" button in the top-right corner.
<div style="
position: fixed;
width: 100px;
">
<button style="
position: The position: absolute element will be
absolute; top: 0; placed in the top-right of the position: fixed
right: 0; element.
">
X
</button>
</div>

Position Relative
.relative { The element will appear normally (as if it's position:
position: static). We can then push it around with
relative; top/bottom/left/right.

top: 10px; Places the element 10px from the top of its original
position
(pushes it down by 10px). Unlike margin, it won't push the
rest of the page down.
bottom: 10px; Places the element 10px from the bottom of its original
position
(pushes it up by 10px).
left: 50px; Places the element 50px from the left of its original
position.
right: 100px; Places the element 100px from the right of its original
position.

width: 100px; Sets the element's width to

height: 100px. Sets the element's height
100px; to 100px.
}

Position Absolute Inside Position Relative

● When a position: absolute element is inside a position: relative
element, it will be positioned relative to the relative element.
● Useful if we want to display an element normally (using position: relative),
but still
be able to place other elements in the corner (using position: absolute).

<div style=" right: 0; ">

position: 3
relative; width: </button>
100px; </div>
">
<button style="
position:
absolute; top: 0;
The position:
absolute element
will be placed in the
top-right of the
position: relative
element.
z- index
Determines which elements appear in front and behind:
● Elements with a higher z-index appear in front of elements with a lower
z-index. The default z-index is 0.
● Elements with position: static; always appear at the back. z-index has
no effect.
● If the z-index is equal or both elements are position: static, the
element that was written later in the code will appear in front.

.fixed {
position: This element will appear in front of the position:
fixed; z- absolute;
index: 2; element because it has a higher z-index.
}
.absolute {
position:
absolute; z-
index: 1;
}
.static { This element will appear at the back since it's position:
position: static.
static;
}

For more examples, see position.html.

Responsive Design
Responsive design = making the website look good on any screen size.

@media (max-width: Only apply the CSS code below when

750px) { screen width is between 0px - 750px.
.element {
width:
350px;
}
}
@media (min-width: 750.02px) and (max-width: 1000px) {
.element {
width: Only apply this CSS code when screen
450px; width is between 750px - 1000px.
}
}
@media (min-width: 600px;
1000.02px) {
.element {
width:
Only apply this CSS code when the screen width is over 1000px.
}
}

We generally use a gap of .02px between the ranges (like above) because the
browser can support fractional screen widths like 750.50px.
Advanced CSS Selectors
With Comma
.class1, .class2 { ... } Target multiple classes at the same time.
.class1, p { ... } Target a class and all <p>s at the same time.

With Space
.class1 img { ... } Target <img>s that are inside elements with
class="class1"

.class1 img, Target <img>s that are inside elements with

.class2 .tooltip { ... class="class1" AND .tooltip inside
} elements with class="class2".

.class2:hover .tooltip { ... } Target .tooltip only when hovering over

elements
with class="class2".

For a full list of selectors, check out CSS Selectors.

Inheritance
A text property set on the outer element will be passed down into inner elements:
<div style="color: red;">
<p>Paragraph</ This paragraph will have red text.
p>
</div>

For global text styles (styles we want on the entire page), we can set them on
the <body>: body {
font-family: Roboto, All elements on the page by default
Arial; color: rgb(20, will use font-family: Roboto, Arial
20, 20); and color: rgb(20, 20, 20). This
} can be overridden.

CSS Specificity
If multiple CSS selectors change the same property on the same element (see
example below), CSS Specificity determines which selector "wins" (which style gets
applied).

body { color: black;

} p { color: red; }
.title { color: green; }

<body> </p>
<p class="title"> </body>
Paragraph of
text.
In this example, the
.title selector has
the highest priority
(according to CSS
Specificity) so the
text will be green.
CSS Specificity Rules
Here's the full set of CSS Specificity Rules (you don't need to memorise all of these).

Usually, you just need to know a few useful rules and search Google for more if
needed:
1. Inline CSS has higher priority than .class selectors.
2. .class selectors have higher priority than element name selectors (p).
3. Element name selectors (p) have higher priority than inheritance (from body).
4. If 2 selectors have the same priority, the one that is written later wins.

General Rule of Thumb

A CSS selector that's more specific (targets a more specific set of elements) has
higher priority.

Semantic Elements
Elements that work the same way as <div>. However, they also give the HTML
meaning when screen readers, search engines, or other devices read the website.

Common semantic elements include:

<header>, <nav>, <main>, <section>, etc.

Here's a list of Semantic Elements. They'll be covered in more detail in the

accessibility course.

Comments
Let us write code that the browser ignores. Useful for documenting how the code
works.

<!-- This is a comment Syntax for a comment in HTML: <!-- ... -->
-->
<p class="title">
Paragraph of text.
</p>

/* This is a comment Syntax for a comment in CSS: /* ... */

*/
.title {
color: green;
}

Other CSS Properties

Here are some other CSS properties that were covered in the course.

.tooltip {
 pointer-events: none; Disables all interactions with the mouse (clicks, hovers,
etc.)
white-space: Prevents the text inside the element from
nowrap; wrapping to multiple lines.
}