diff --git a/pages/hack-school/CSS_images/bold_arial_text.png b/pages/hack-school/CSS_images/bold_arial_text.png
new file mode 100644
index 0000000..8cccefc
Binary files /dev/null and b/pages/hack-school/CSS_images/bold_arial_text.png differ
diff --git a/pages/hack-school/CSS_images/box_with_border.png b/pages/hack-school/CSS_images/box_with_border.png
new file mode 100644
index 0000000..1b1e7e2
Binary files /dev/null and b/pages/hack-school/CSS_images/box_with_border.png differ
diff --git a/pages/hack-school/CSS_images/centered_underlined_uppercase_text.png b/pages/hack-school/CSS_images/centered_underlined_uppercase_text.png
new file mode 100644
index 0000000..288d1d7
Binary files /dev/null and b/pages/hack-school/CSS_images/centered_underlined_uppercase_text.png differ
diff --git a/pages/hack-school/CSS_images/floating_image.png b/pages/hack-school/CSS_images/floating_image.png
new file mode 100644
index 0000000..42e36a0
Binary files /dev/null and b/pages/hack-school/CSS_images/floating_image.png differ
diff --git a/pages/hack-school/CSS_images/hover_button.png b/pages/hack-school/CSS_images/hover_button.png
new file mode 100644
index 0000000..e81e44c
Binary files /dev/null and b/pages/hack-school/CSS_images/hover_button.png differ
diff --git a/pages/hack-school/CSS_images/indexed_list.png b/pages/hack-school/CSS_images/indexed_list.png
new file mode 100644
index 0000000..913f8a2
Binary files /dev/null and b/pages/hack-school/CSS_images/indexed_list.png differ
diff --git a/pages/hack-school/CSS_images/indexed_splits.png b/pages/hack-school/CSS_images/indexed_splits.png
new file mode 100644
index 0000000..f0466eb
Binary files /dev/null and b/pages/hack-school/CSS_images/indexed_splits.png differ
diff --git a/pages/hack-school/CSS_images/left_centered_text.png b/pages/hack-school/CSS_images/left_centered_text.png
new file mode 100644
index 0000000..4deb531
Binary files /dev/null and b/pages/hack-school/CSS_images/left_centered_text.png differ
diff --git a/pages/hack-school/CSS_images/margin_text.png b/pages/hack-school/CSS_images/margin_text.png
new file mode 100644
index 0000000..091ba2c
Binary files /dev/null and b/pages/hack-school/CSS_images/margin_text.png differ
diff --git a/pages/hack-school/CSS_images/orange_box.png b/pages/hack-school/CSS_images/orange_box.png
new file mode 100644
index 0000000..aa09aac
Binary files /dev/null and b/pages/hack-school/CSS_images/orange_box.png differ
diff --git a/pages/hack-school/CSS_images/orange_color_text.png b/pages/hack-school/CSS_images/orange_color_text.png
new file mode 100644
index 0000000..e00d995
Binary files /dev/null and b/pages/hack-school/CSS_images/orange_color_text.png differ
diff --git a/pages/hack-school/CSS_images/padding_div_example.png b/pages/hack-school/CSS_images/padding_div_example.png
new file mode 100644
index 0000000..d209dc7
Binary files /dev/null and b/pages/hack-school/CSS_images/padding_div_example.png differ
diff --git a/pages/hack-school/CSS_images/semi_transparent_text.png b/pages/hack-school/CSS_images/semi_transparent_text.png
new file mode 100644
index 0000000..e13387f
Binary files /dev/null and b/pages/hack-school/CSS_images/semi_transparent_text.png differ
diff --git a/pages/hack-school/CSS_images/shadowed_box.png b/pages/hack-school/CSS_images/shadowed_box.png
new file mode 100644
index 0000000..a0b2f82
Binary files /dev/null and b/pages/hack-school/CSS_images/shadowed_box.png differ
diff --git a/pages/hack-school/CSS_images/tenpx_margin_text.png b/pages/hack-school/CSS_images/tenpx_margin_text.png
new file mode 100644
index 0000000..1cc0c6d
Binary files /dev/null and b/pages/hack-school/CSS_images/tenpx_margin_text.png differ
diff --git a/pages/hack-school/css.mdx b/pages/hack-school/css.mdx
index 15938cc..031a577 100644
--- a/pages/hack-school/css.mdx
+++ b/pages/hack-school/css.mdx
@@ -18,7 +18,7 @@ This method is handy for making quick style changes to specific elements, but it
not recommended for extensive styling due to its lack of separation between content and presentation.
```html copy showLineNumbers
-
Come to Hack School next week!
+
Come to Hack School Next Week!
```
### Internal CSS
@@ -30,13 +30,13 @@ It allows you to define CSS rules that apply only to the specific HTML document.
-
Come to Hack School next week!
+
Come to Hack School Next Week!
```
### External CSS
@@ -48,7 +48,7 @@ and maintainability, as you can reuse the same stylesheet across multiple HTML f
styles.css:
```css copy showLineNumbers
h2 {
- color: red;
+ color: orange;
text-align: center;
}
```
@@ -59,7 +59,7 @@ index.html:
-
Come to Hack School next week!
+
Come to Hack School Next Week!
```
### Selectors
@@ -84,6 +84,10 @@ index.html:
```
+This is how it would look like:
+
+
+
* 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 `#`,
@@ -116,36 +120,50 @@ index.html:
- **Color**: `color` - Changing the text color, background color, or border color of elements.
```html copy showLineNumbers
-
Text with blue color
+
Text with orange color
```
+
+
- **Font**: `font-family`, `font-size`, `font-weight`, `font-style`, etc. - Modifying the font family, size, weight, style, and other typography-related properties.
```html copy showLineNumbers
Bold Arial 16px text
```
+
+
- **Margins**: `margin` - Adjusting the space around an element, controlling the gap between elements.
```html copy showLineNumbers
Content with a 20px margin
```
+
+
- **Padding**: `padding` - Adding space inside an element's boundaries, creating space between content and borders.
```html copy showLineNumbers
Content with 10px padding
```
+
+
- **Borders**: `border`, `border-width`, `border-style`, `border-color` - Styling borders around elements, controlling their width, style (solid, dashed, dotted, etc.), and color.
```html copy showLineNumbers
Box with black 1px solid border
```
+
+
- **Width and Height**: `width`, `height` - Specifying the dimensions of an element, allowing control over its size.
```html copy showLineNumbers
-
+
```
- **Background**: `background-image`, `background-color`, `background-position`, etc. - Setting background images, colors, and positioning for elements.
```html copy showLineNumbers
```
+
+
- **Text**: `text-align`, `text-decoration`, `text-transform` - Controlling text alignment, text decoration (underline, overline, etc.), and text transformation (uppercase, lowercase, capitalize).
```html copy showLineNumbers
Centered, underlined, uppercase text
```
+
+
- **Display**: `display` - Changing how elements are displayed (block, inline, flex, grid, etc.) and how they interact with other elements.
```html copy showLineNumbers
@@ -153,26 +171,39 @@ index.html:
Item 2
```
+
+
- **Positioning**: `position`, `top`, `bottom`, `left`, `right` - Controlling the positioning of elements on the page using properties like position, top, bottom, left, right, etc.
```html copy showLineNumbers
Positioned at 50px from top and 100px from left
```
+
+
- **Float**: `float` - Floating elements to either the left or right side of their container.
```html copy showLineNumbers
```
+
+
- **Opacity**: `opacity` - Adjusting the transparency of elements and their content.
```html copy showLineNumbers
Semi-transparent content
```
+
+
- **Transitions and Animations**: `transition`, `animation` - Applying smooth transitions and animations to elements.
```html copy showLineNumbers
```
+
+
- **Shadows**: `box-shadow`, `text-shadow` - Adding box shadows or text shadows to elements for visual effects.
```html copy showLineNumbers
```
+
+
- **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).
```
+
+
- **Opacity**: `opacity` - Adjusting the transparency of elements and their content.
```html copy showLineNumbers