Hack School
Week 1: CSS

Week 1: CSS

What is CSS?

CSS (Cascading Style Sheets) is a fundamental web technology used to control the presentation and layout of HTML documents. It provides a powerful set of rules and properties that allow developers to customize the appearance of HTML elements, making it an essential tool for building visually appealing and responsive web applications.

Applying CSS to HTML Components

CSS can be applied to HTML components in various ways. Here are some common methods:

Inline CSS

Inline CSS involves adding styles directly to an HTML element using the "style" attribute. This method is handy for making quick style changes to specific elements, but it's generally not recommended for extensive styling due to its lack of separation between content and presentation.

<h2 style="color: orange; text-align: center;">Come to Hack School Next Week!</h2>

Internal CSS

Internal CSS is placed within the <style> tags in the <head> section of the HTML document. It allows you to define CSS rules that apply only to the specific HTML document.

<head>
  <style>
    h2 {
      color: orange;
      text-align: center;
    }
  </style>
</head>
 
<h2>Come to Hack School Next Week!</h2>

External CSS

External CSS involves creating a separate CSS file with all the styles and linking it to the HTML document using the <link> tag. This method promotes better code organization and maintainability, as you can reuse the same stylesheet across multiple HTML files.

styles.css:

h2 {
    color: orange;
    text-align: center;
}

index.html:

<head>
    <link rel="stylesheet" href="styles.css">
</head>
 
<h2>Come to Hack School Next Week!</h2>

Selectors

  • Universal Selector: Selects all HTML elements. The universal selector is represented by an asterisk *.
  • Element Selector: Selects HTML elements by their tag name. For example, the p selector targets all <div> elements.

styles.css:

* {
    padding: 4px;
}

index.html:

<div>
    <p> The padding of this div is 4 px!</p>
</div>
<div>
    <h3> The padding of this div is also 4 px!</p>
</div>

This is how it would look like:

padding_div_example

  • Class Selector: Selects HTML elements by their class attribute. Class selectors start with a dot ., followed by the class name. For example, the .important selector targets all elements with the class "important."
  • ID Selector: Selects a single HTML element by its ID attribute. ID selectors start with a hash #, followed by the ID name. For example, the #special selector targets the element with the ID "special."

styles.css:

#navbar {
    background-color: black;
    font-size: 16px;
}
 
.blue {
    color: blue;
}

index.html:

<div id="navbar">
    <ul>
        <li class="blue"><a href="home.asp">Blue Home</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li class="blue"><a href="about.asp">Blue About</a></li>
    </ul>
</div>

Common Properties that CSS can Modify

  • Color: color - Changing the text color, background color, or border color of elements.
<p style="color: orange;">Text with orange color</p>

orange_color_text

  • Font: font-family, font-size, font-weight, font-style, etc. - Modifying the font family, size, weight, style, and other typography-related properties.
<p style="font-family: Arial, sans-serif; font-size: 16px; font-weight: bold;">Bold Arial 16px text</p>

bold_arial_text

  • Margins: margin - Adjusting the space around an element, controlling the gap between elements.
<div style="margin: 20px;">Content with a 20px margin</div>

margin_text

  • Padding: padding - Adding space inside an element's boundaries, creating space between content and borders.
<div style="padding: 10px;">Content with 10px padding</div>

tenpx_margin_text

  • Borders: border, border-width, border-style, border-color - Styling borders around elements, controlling their width, style (solid, dashed, dotted, etc.), and color.
<div style="border: 1px solid black; width: 100px; height: 50px;">Box with black 1px solid border</div>

box_with_border

This is how margins, padding, and borders all come together!

css_box_model

  • Width and Height: width, height - Specifying the dimensions of an element, allowing control over its size.
<div style="width: 200px; height: 100px; background-color: lightgray;""></div>
  • Background: background-image, background-color, background-position, etc. - Setting background images, colors, and positioning for elements.
<div style="width: 200px; height: 100px; background-color: orange;"></div>

orange_box

  • Text: text-align, text-decoration, text-transform - Controlling text alignment, text decoration (underline, overline, etc.), and text transformation (uppercase, lowercase, capitalize).
<p style="text-align: center; text-decoration: underline; text-transform: uppercase;">Centered, underlined, uppercase text</p>

centered_underlined_uppercase_text

  • Display: display - Changing how elements are displayed (block, inline, flex, grid, etc.) and how they interact with other elements.
<div style="display: flex; justify-content: space-between;">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

indexed_splits

  • Positioning: position, top, bottom, left, right - Controlling the positioning of elements on the page using properties like position, top, bottom, left, right, etc.
<div style="position: absolute; top: 50px; left: 100px;">Positioned at 50px from top and 100px from left</div>

left_centered_text

  • Float: float - Floating elements to either the left or right side of their container.
<img src="image.jpg" style="float: left; margin-right: 10px;" alt="Floating image">

floating_image

  • Opacity: opacity - Adjusting the transparency of elements and their content.
<div style="opacity: 0.7;">Semi-transparent content</div>

semi_transparent_text

  • Shadows: box-shadow, text-shadow - Adding box shadows or text shadows to elements for visual effects.
<div style="box-shadow: 2px 2px 5px gray; text-shadow: 1px 1px 2px black;">Shadowed box and text</div>

shadowed_box

  • Flexbox and Grid: display: flex, display: grid, etc. - Utilizing CSS layout systems like Flexbox and Grid to create responsive and flexible layouts (see section below).

Flexbox Layout

What is Flexbox?

CSS Flexbox is a powerful layout system used to create flexible and responsive web designs. It provides an intuitive way to arrange elements within a container and control their alignment, distribution, and order.

Flex Container and Flex Items

A Flex Container is an element to which you apply the CSS property display: flex; or display: inline-flex;. This makes it a container for Flex Items, which are the child elements within the Flex Container. Flex Items are flexibly arranged inside the container.

Main Axis and Cross Axis

Flexbox operates along two axes: the "Main Axis" and the "Cross Axis." The Main Axis represents the primary direction of Flex Items' alignment, and the Cross Axis is perpendicular to it.

Flex Container Properties

1. flex-direction

The flex-direction property determines the direction of the Main Axis. It has four possible values:

  • row: Flex Items are placed horizontally in a row from left to right (default).
  • row-reverse: Flex Items are placed horizontally in a reversed order from right to left.
  • column: Flex Items are placed vertically in a column from top to bottom.
  • column-reverse: Flex Items are placed vertically in a reversed order from bottom to top.

2. justify-content

The justify-content property aligns Flex Items along the Main Axis. It offers various values to control the spacing between Flex Items:

  • flex-start: Items are aligned to the start of the container (default).
  • flex-end: Items are aligned to the end of the container.
  • center: Items are centered within the container.
  • space-between: Items are evenly distributed with the first item at the start and the last item at the end.
  • space-around: Items are evenly distributed with equal space around them.
  • space-evenly: Items are evenly distributed with equal space around and at the start and end.

3. align-items

The align-items property aligns Flex Items along the Cross Axis. It has the following values:

  • flex-start: Items are aligned to the start of the container.
  • flex-end: Items are aligned to the end of the container.
  • center: Items are centered along the Cross Axis.
  • baseline: Items are aligned based on their text baselines.
  • stretch: Items are stretched to fill the container along the Cross Axis (default).

4. flex-wrap

The flex-wrap property determines whether Flex Items should wrap to a new line when they exceed the Flex Container's width. It has three possible values:

  • nowrap: Items are displayed in a single line (default).
  • wrap: Items wrap to a new line as necessary.
  • wrap-reverse: Items wrap to a new line in reverse order.

5. Quick Speed Hack

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Flexbox Example Usage:

Creating the content using index.html:

<div class="table">
  <div class="row header">
    <div class="cell">Header 1</div>
    <div class="cell">Header 2</div>
    <div class="cell">Header 3</div>
  </div>
  <div class="row">
    <div class="cell">Cell 1</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3</div>
  </div>
</div>

Now we can style the table cells, area and the rows using Flexbox by adding the following code in style.css

Styling the table cells:

.cell {
  width: 100px;
  padding: 10px;
  border: 1px black solid;
  background-color: #f1f1f1;
}

Styling the table area:

.table {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #1e90ff;
}

Styling the rows:

.row {
  display: flex;
  flex-direction: row;
}

Flex Item Properties

1. flex-grow, flex-shrink, and flex-basis

These properties are collectively known as the "flex shorthand." They control the growth, shrinking, and initial size of Flex Items.

  • flex-grow: Determines how much an item should grow relative to other items when extra space is available.
  • flex-shrink: Determines how much an item should shrink relative to other items when there is not enough space.
  • flex-basis: Specifies the initial size of an item before any available space is distributed.

2. order

The order property allows you to change the order in which Flex Items appear within the Flex Container without changing their source order in the HTML.

css_flex_box

Games to Learn Flexbox:

Coding Fantasy (opens in a new tab)

Flexbox Froggy (opens in a new tab)

Week 1: HTMLWeek 2: JavaScript