html-css-reference

HTML Basics

• Hello: Creates a button with the text "Hello" inside.
• paragraph of text: Creates a paragraph of text.

HTML Syntax

• Syntax: Rules for writing HTML code, similar to grammar in English.
  • Elements should have an opening tag and a matching closing tag.
  • Extra spaces and newlines are combined into one space.
  • Example:
    • paragraph of text
    • paragraph of text
    • paragraph of text
    • All three examples produce the same result on the web page.

Attributes

• Attributes modify how an HTML element behaves.
  • Link to YouTube
    • ``: Creates a link to another website.
    • href: Specifies the URL that the link opens.
  • Link to YouTube
    • target="_blank": Opens the link in a new tab.

CSS Basics

• CSS code can be written using the `` HTML element.
  • Example:

  <style>
    button {
      background-color: red;
      color: white;
    }
  </style>

*   This modifies all `` elements on the page, changing the background color to red and the text color to white.

CSS Syntax

• CSS properties are used to style HTML elements.
  • Example:

button {
  background-color: red; /* Sets the background color */
  color: white; /* Sets the text color */
  height: 36px; /* Sets the height */
  width: 105px; /* Sets the width */
}

CSS Properties

• Common CSS properties include:
  • background-color: Sets the background color.
    • Values: color name (e.g., red, white, black), rgb value (e.g., rgb(0, 150, 255)), hex value (e.g., #0096FF).
  • color: Sets the text color.
    • Values: same as background-color.
  • height: Sets the height.
    • Values: pixel value (e.g., 36px), percentage (e.g., 50%).
  • width: Sets the width.
    • Values: same as height.
  • border: Shorthand property for setting border properties.
  • border-color: Sets the border color.
  • border-style: Sets the border style.
    • Values: solid, dotted, dashed.
  • border-width: Sets the border width.
  • border-radius: Creates rounded corners.
  • cursor: Changes the mouse cursor when hovering over the element.
    • Value: pointer.

How To Google CSS Properties

• Use Google to search for CSS properties when unsure or unfamiliar.
  • Examples:
    • "css rounded corners"
    • "css text italic"
    • "css adjust space between lines"

CSS Values

• Each CSS property accepts a specific set of values.

Color Values

• Color Name: red, white, black.
• RGB Value: rgb(0, 150, 255).
  • RGB: More precise way of measuring color using a combination of red, green, and blue.
  • Each color has a min value = 0 and a max value = 255.
    • rgb(0, 0, 0) = black
    • rgb(255, 255, 255) = white
• Hex Value: 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.
• 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

• Pixels: 50px, 100px
  • Pixels (px) are a common unit of measurement in the digital world (e.g., 4K screen is $3840px$ by $2160px$).
• Percent: 50%, 100%
  • A relative measurement (e.g., width: 50% means 50% of the width of the page or the container element).
• em / rem: 1em, 1rem
  • Relative measurements useful for accessibility.
  • em: Relative to the font-size of the element (e.g., 2em means 2 times the font size).
  • rem: Relative to the font-size of the page, which is 16px by default (e.g., 2rem means $2 * 16px = 32px$ by default).

Class Attribute

• Class attribute: Lets us target specific elements with CSS.

<button class="subscribe-button">SUBSCRIBE</button>

*   Adds a class to an element. The class name can be anything without spaces.

.subscribe-button { ... }

*   Targets all elements on the page with `class="subscribe-button"`

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

*   Multiple elements can have the same class.

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

*   An element can have multiple classes, separated by a space.

button { ... }
.youtube-button { ... }
.subscribe-button { ... }

*   Elements can be targeted by multiple CSS selectors.

CSS Pseudo-Classes

• .subscribe-button:hover { ... }
  • Styles apply only when hovering over an element with class="subscribe-button".
• .subscribe-button:active { ... }
  • Styles apply only when clicking on an element with class="subscribe-button".

Intermediate CSS Properties

• opacity: 0.5;
  • Sets how see-through an element is (0.5 = 50% see-through).
  • opacity: 0; (complete see-through, invisible).
  • opacity: 1; (not see-through, default value).
• transition: ;
  • Transitions smoothly when changing styles (often used when hovering).
    • transition: background-color 1s; transitions background color over 1 second.
    • transition: color 0.15s; transitions text color over 0.15 seconds.
    • transition: ; transitions multiple properties (separated by commas).
    • transition: background-color 0.15s, color 0.15s; transitions both background color and text color over 0.15 seconds.
• box-shadow: ;
  • Creates a shadow.
    • box-shadow: 3px 4px 5px black; creates a shadow 3px to the right, 4px to the bottom, with 5px of blur, and black color.
    • box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.15); creates a shadow 3px to the right, 4px to the bottom, with no blur, and a faint black color.

Chrome DevTools

• Allows viewing and modifying HTML and CSS directly in the browser.
• To open DevTools: right-click > Inspect.

CSS Box Model

• Determines how much space an element takes up and how far away elements are from each other.
  1. Margin = space on the outside
  2. Padding = space on the inside
  3. Border
• Margin

.join-button {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

*   Adds 10px of space on the outside of the element.
*   Normal margin pushes things away from an element.
*   `margin-right: -20px;` Negative margin pulls things towards an element.
*   `margin: 10px;` Shorthand for 10px margin on all sides.
*   `margin: 10px 20px;` 10px top & bottom, 20px left & right.
*   `margin:    ;`
*   `margin:  ;`

• Padding

.join-button {
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

*   Adds 10px of space on the inside of the element.
*   Negative padding has no effect.
*   `padding: 10px;` Shorthand for 10px padding on all sides.
*   `padding: 10px 20px;` 10px top & bottom, 20px left & right.
*   `padding:    ;`
*   `padding:  ;`

• Border

border-width: 1px;
border-style: solid;
border-color: red;
border : ; /* Shorthand */

*   `border-width`: Sets the border width.
*   `border-style`: Sets the border style (e.g., solid color).
*   `border-color`: Sets the border color.
*   `border: 1px solid red;` Shorthand for the three properties above.

Text Styles

.title {
  font-family: Arial;
  font-family: Roboto, Verdana, Arial; /* Font stack */
  font-size: 30px;
  font-weight: bold;
  font-weight: 700; /* Another way to specify font-weight */
  font-style: italic;
  text-align: center;
  line-height: 24px;
  text-decoration: underline;
  text-decoration: none; /* Removes underline */
}

• font-family: Changes the font.
  • A font-stack: if Roboto is not available, it will fall back to Verdana, then Arial.
• font-size: Changes text size.
• font-weight: Changes text thickness.
  • Can use: 100, 200, 300, …, 900 (bold = 700, regular = 400, semibold = 500).
• font-style: Sets the font style to italic.
• text-align: Aligns the text.
  • Other values: left, right, justified.
• line-height: Adjusts space between lines of text.
• text-decoration: Adds or removes underline from the text.
• ` elements by default havemargin-topandmargin-bottom`.
  1. Reset default margins:

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

2.  Apply more precise margins:

.title {
  margin-bottom: 16px;
}

Text Elements (Inline Elements)

• Text elements (,, ,) appear within a line of text.

This is a <strong>text element</strong>

*   Useful if we want to style only a part of the text.

• `` is the most generic text element (it doesn't have any default styles).
• We can style text elements using a class:

This is a text element

.shop-link {
  text-decoration: underline;
}

HTML Structure

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
  ...
</body>
</html>

• ``: Tells the browser to use a modern version of HTML.
• ``: Contains everything not visible like the title and description (metadata), links to fonts and CSS stylesheets.
• ``: Contains everything visible like buttons, text, images, etc.

Elements in the Head Section

<head>
  <title>Title in the tab</title>
  <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=swap">
  <link rel="stylesheet" href="styles.css">
</head>

• ``: Sets the title in the tabs.
  1. Search "google fonts" in Google.
  2. Pick the fonts and styles that you like.
  3. Copy the code that Google provides into .
• ``: Loads a CSS file to the page.

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": Goes into fold1, then fold2, and looks for styles.css.

Images

<img src="image.png">

• Loads 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;
  height: 300px;
  object-fit: cover;
  object-fit: contain;
  object-position: left;
  object-position: right;
  object-position: top;
  object-position: bottom;
}

• 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 width * height area.

Inputs

<input type="text">

• Creates a text box.

<input type="text" placeholder="Search">

• Adds a placeholder (a label) to the text box.

<input type="checkbox">

• Creates a checkbox.

<input class="search-bar" type="text">

.search-bar {
  font-size: 30px;
}

.search-bar::placeholder {
  font-size: 30px;
}

• Changes the font-size when typing into the text box.
• Changes the font-size of the placeholder.

CSS Display Property

.element {
  display: block;
  display: inline-block;
  vertical-align: middle;
  display: inline;
}

• 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).

`` Element

• `` is a container. We generally put other elements (including other ````s) inside (nesting).

  Name
  <input type="text">



  Quantity

    1
    2

  Submit

.container {
  display: inline-block;
  width: 200px;
}

• ``s allow us to group elements together and create more complex layouts.

Nested Layouts Technique

• Two 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 …
• Creating Vertical Layouts:
  • Use `s withdisplay: block` (most common).
  • Use flexbox with flex-direction: column.
  • Use CSS grid with 1 column.
• Creating Horizontal Layouts:
  • Use `s withdisplay: inline-block` (not recommended).
  • Use flexbox with flex-direction: row.
  • Use CSS grid with multiple columns.

Inline CSS Styles

• Using the style="..." attribute:

<div style="background-color: red; color: white;"> ... </div>

• Inline style = CSS is written within a line of HTML.
• Inline styles only affect the element with the style="..." attribute (no selectors are needed).

CSS Grid

.grid {
  display: grid;
  grid-template-columns: 100px 100px;
  column-gap: 20px;
  row-gap: 40px;
}

• display: grid: Turns an element into a grid container.
• grid-template-columns: Sets how many columns are in the grid and how wide the columns are.
• column-gap: Sets the space between the columns.
• row-gap: Sets the space between 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 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

• The columns will take up an equal amount of the remaining space (since they're both 1fr).

.grid {
  display: grid;
  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.

.grid {
  justify-content: center;
  justify-content: space-between;
  align-items: center;
}

• justify-content: center: Aligns the columns horizontally in the center.
• justify-content: space-between: Spreads out the columns evenly horizontally.
• align-items: center: Aligns the columns vertically in the center.

Flexbox

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-content: space-between;
  align-items: center;
  align-items: space-between;
}

• display: flex: Turns an element into a flexbox container.
• flex-direction: row: 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 horizontally.
• justify-content: space-between: Spreads out the elements in the flexbox evenly across the horizontal space.
• align-items: center: Centers the elements in the flexbox vertically.
• align-items: space-between: Spreads out elements evenly in the vertical space.

.element-inside-flexbox {
  width: 100px;
  flex: 1;
  flex-shrink: 0;
  width: 0;
}

• width: 100px: Sets the width of the flexbox element to 100px.
• flex: 1: 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.

  Flexbox element 1
  Flexbox element 2
  Flexbox element 2

• Creates a flexbox where elements are placed horizontally (flex-direction: row is the default so it's not mandatory to have that in the CSS).
  • This element has a width of 100px.
  • This element takes up 1/3 of the remaining space.
  • This element takes up 2/3 of the remaining space.

.flexbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: space-between;
  align-items: center;
  align-items: space-between;
}

• flex-direction: column: Lays out elements vertically inside the flexbox.
  • justify-content and align-items are reversed.
• justify-content: center: Centers elements vertically inside the flexbox.
• justify-content: space-between: Spreads out elements evenly in the vertical space.
• align-items: center: Centers elements horizontally.
• align-items: space-between: Spreads out elements evenly horizontally.

CSS Position

• Create elements that stick to the page while scrolling.
• Create elements that appear on top of other elements.

.element {
  position: static;
}

• position: static: This is the default value that every element starts with (displays normally).

Position Fixed

.fixed {
  position: fixed;
  top: 0;
  bottom: 10px;
  left: 50px;
  right: 100px;
  width: 100px;
  height: 100px;
}

• position: fixed: Positions the element in the browser window (sticks to the page while scrolling).
  • 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 100px.
  • height: 100px: Sets the element's height 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 {
  position: absolute;
  top: 0;
  bottom: 10px;
  left: 50px;
  right: 100px;
  width: 100px;
  height: 100px;
}

• position: absolute: Positions the element on the page (it will scroll with the page and will not stick when scrolling).
  • 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: Sets the element's width to 100px.
  • height: 100px: Sets the element's height to 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 (e.g., a "Close" button in the top-right corner).

  X

• The position: absolute element will be placed in the top-right of the position: fixed element.

Position Relative

.relative {
  position: relative;
  top: 10px;
  bottom: 10px;
  left: 50px;
  right: 100px;
  width: 100px;
  height: 100px;
}

• position: relative: The element will appear normally (as if it's position: static). We can then push it around with 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 100px.
  • height: 100px: Sets the element's height 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).

  3

• 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: fixed;
  z-index: 2;
}

.absolute {
  position: absolute;
  z-index: 1;
}

.static {
  position: static;
}

• This element will appear in front of the position: absolute element because it has a higher z-index.
• This element will appear at the back since it's position: static.

Responsive Design

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

@media (max-width: 750px) {
  .element {
    width: 350px;
  }
}

• Only apply the CSS code below when screen width is between 0px - 750px.

@media (min-width: 750.02px) and (max-width: 1000px) {
  .element {
    width: 450px;
  }
}

• Only apply this CSS code when screen width is between 750px - 1000px.

@media (min-width: 1000.02px) {
  .element {
    width: 600px;
  }
}

• Only apply this CSS code when the screen width is over 1000px.
• We generally use a gap of 0.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 ``s at the same time.

With Space

.class1 img {
  ...
}

• Target `s that are inside elements withclass="class1"`

.class1 img,
.class2 .tooltip {
  ...
}

• Target `s that are inside elements withclass="class1"AND.tooltipinside elements withclass="class2"`.

.class2:hover .tooltip {
  ...
}

• Target .tooltip only when hovering over elements with class="class2".

Inheritance

• A text property set on the outer element will be passed down into inner elements:

  Paragraph

• This paragraph will have red text.
• For global text styles (styles we want on the entire page), we can set them on the ``:

body {
  font-family: Roboto, Arial;
  color: rgb(20, 20, 20);
}

• All elements on the page by default will use font-family: Roboto, Arial and color: rgb(20, 20, 20). This can be overridden.

CSS Specificity

• If multiple CSS selectors change the same property on the same