We use cookies to enhance your experience on the site

CSS Module Summary

Congratulations, traveler! We've walked together through the entire module dedicated to CSS - the styling language that transforms raw HTML hieroglyphs into beautiful paintings on temple walls. Time for a brief summary of the most important concepts you've mastered.

What You Can Already Do

CSS Basics

Creating CSS rules with a selector, property, and value
Linking CSS with HTML through
```
<link>
```
and
```
<style>
```
CSS comments:
```
/* comment */
```
You understand that CSS stands for Cascading Style Sheets - "cascading" means styles can override each other

Selectors - Precisely Pointing to Elements

Element selectors:
```
h1
```
,
```
p
```
,
```
div
```
- like pointing to a type of hieroglyph
Class selectors:
```
.class
```
- like pointing to a group of scribes with the same specialization
ID selectors:
```
#identifier
```
- like pointing to a specific pharaoh by name
Descendant selectors:
```
div p
```
,
```
.container h2
```
- elements inside other elements
Grouping selectors:
```
h1, h2, h3 { ... }
```
- one rule for many elements
Advanced selectors:
```
+
```
,
```
>
```
,
```
~
```
, attribute selectors - precise control

Colors and Fonts

Colors: names (
```
red
```
), hex (
```
#ff0000
```
), rgb (
```
rgb(255, 0, 0)
```
), hsl
Fonts:
```
font-family
```
,
```
font-size
```
,
```
font-weight
```
Importing fonts from Google Fonts
Text formatting:
```
text-align
```
,
```
text-decoration
```
,
```
text-transform
```

Box Model - Anatomy of an Element

The CSS box model is the foundation of layout, just like stone blocks are the foundation of a pyramid:

```
padding
```
- internal spacing (like the distance between the wall and the sarcophagus)
```
margin
```
- external spacing (like the space between pyramids)
```
border
```
- border (like defensive walls of a temple)
```
box-sizing: border-box
```
- predictable dimensions (modern standard)

Display and Positioning

```
display: block
```
,
```
inline
```
,
```
inline-block
```
,
```
none
```

position: static

relative

absolute

fixed

sticky

```
z-index
```
- element layers (like successive layers of paint on a temple wall)

Cascade and Specificity

Order of style sources - the cascade decides which style wins
Selector specificity: element (1) < class (10) < ID (100) < inline (1000) < !important
Property inheritance - child elements can inherit styles from parents

Pseudo-classes and Pseudo-elements

```
:hover
```
,
```
:focus
```
,
```
:active
```
,
```
:visited
```
- reaction to user interaction
```
:first-child
```
,
```
:nth-child()
```
,
```
:last-child
```
- selection based on position
```
::before
```
,
```
::after
```
- adding decorative content
```
::first-line
```
,
```
::first-letter
```
- styling text fragments

Egyptian Analogies

In this module, we compared CSS to the art of decorating Egyptian temples:

Selectors are like pointing to which wall you want to decorate
Properties and values are like choosing pigment colors and patterns
Box Model is like planning the space around each painting
Cascade is like overwriting older paintings with newer layers
Specificity is like hierarchy - the pharaoh's order (ID) outweighs an official's opinion (class)

What's Next?

You've mastered the basics of CSS, which are the foundation of every beautiful website. In the following modules, you'll learn even more powerful tools:

Flexbox - flexible element arrangement
CSS Grid - creating complex layout grids
CSS Animations - bringing page elements to life
Responsive Design - adapting to different screens

Final Project

Below you'll find an editor where you can test all the CSS techniques you've learned. Create a page about Egyptian gods, using as many CSS properties from this module as possible! Use different selectors, colors, fonts, box model, and positioning.

Go to CodeWorlds→