1
h1 {
2
    /* center the text */
3
    text-align: center;
4
}
5

6
body {
7
    /* background color */
8
    background-color: blue;
9
}
10

11
#menu {
12
    /* width of the element with id="menu" */
13
    width: 300px;
14
    /* alternatively: width: 80%; */
15
    /* the two lines below are equivalent to centering */
16
    margin-left: auto;
17
    margin-right: auto;
18
}
19

20
.cls {
21
    /* width of the element with class="cls" */
22
    width: 300px;
23
}

1
.cls p {
2
    /* set values for all <p> elements inside class="cls" */
3
    display: inline-block;
4
}

1
/* set all elements that have a title attribute to blue */
2
<style>
3
    [title] {
4
        color: blue;
5
    }
6
</style>
7
<h1 title="Hello world">Hello world</h1>

1
body {
2
    background-image: url('https://example.com/images/myImg.jpg');
3
    background-repeat: no-repeat;
4
    /* the background image appears only once, otherwise multiple copies repeat until the area is filled */
5
    background-position: right top;
6
    /* the background image is in the top-right corner of the browser window */
7
    background-attachment: fixed;
8
    /* the background image is fixed and does not scroll with the page */
9
}
10

11
/* equivalent to the above */
12
body {
13
    background: url('https://example.com/images/myImg.jpg') no-repeat fixed right top;
14
}

1
<style>
2
    #gradient1 {
3
        background-image: linear-gradient(#92ff11, #48e8ef);
4
    }
5
</style>
6
<div id="gradient1"></div>

1
<style>
2
    #gradient2 {
3
        background-image: radial-gradient(#92ff11, #48e8ef);
4
    }
5
</style>
6
<div id="gradient2"></div>

1
/* text color for all hyperlinks */
2
a {
3
    color: black;
4
}
5

6
/* text color after being clicked */
7
a:visited {
8
    color: grey;
9
}
10

11
/* color on mouse hover */
12
a:hover {
13
    color: brown;
14
}

1
.box {
2
    /* actual content is 300px wide and tall */
3
    width: 300px;
4
    height: 300px;
5
    /* margin is 50px */
6
    margin: 50px;
7
    /* border is a 10px green part */
8
    border: 10px solid green;
9
    /* padding is 10px, same as the background color */
10
    padding: 10px;
11
    background-color: yellow;
12
}

1
.center2 {
2
    width: 300px;
3
    padding: 20px 0;
4
}

1
<style>
2
    .my-button {
3
        background-color: antiquewhite;
4
        position: relative;
5
        font-size: 14px;
6
        padding: 10px;
7
        width: 100px;
8
        text-align: center;
9
        /* remove the extra pseudo-element */
10
        overflow: hidden;
11
    }
12

13
    /* pseudo-element (a white cloth slightly larger than the button) */
14
    .my-button:after {
15
        content: "";
16
        background: #dadada;
17
        display: block;
18
        position: absolute;
19
        /* slightly larger to fully cover the entire button */
20
        padding-top: 120%;
21
        padding-left: 120%;
22
        margin-left: -10px;
23
        margin-top: -100%;
24
        /* initial opacity is 0 */
25
        opacity: 0;
26
        transition: all 0.4s
27
    }
28

29
    /* after the button is pressed */
30
    .my-button:active:after {
31
        /* shrink the pseudo-element to button size (gives it a transition animation) */
32
        padding: 0;
33
        margin: 0;
34
        /* opacity becomes 1, making the pseudo-element instantly visible */
35
        opacity: 1;
36
        transition: 0s
37
    }
38

39
    /* text inside the button */
40
    .my-button span {
41
        display: inline-block;
42
        position: relative;
43
        transition: 0.4s;
44
    }
45

46
    /* pseudo-element of the inner text */
47
    .my-button span:after {
48
        content: '»';
49
        position: absolute;
50
        opacity: 0;
51
        top: 0;
52
        right: -20px;
53
        transition: 0.2s;
54
    }
55

56
    /* when the mouse moves over it, the inner text shifts a bit */
57
    .my-button:hover span {
58
        padding-right: 10px;
59
    }
60

61
    /* when the mouse moves over it, the pseudo-element of the inner text shows */
62
    .my-button:hover span:after {
63
        opacity: 1;
64
        right: 0;
65
    }
66
</style>
67
<button class="my-button"><span>button</span></button>

1
.overflow {
2
    /* define a scrollable element */
3
    overflow: scroll;
4
    height: 100px;
5
}

1
<style>
2
    .container {
3
        /* ancestor element is non-static */
4
        position: relative;
5
        width: 300px;
6
        height: 300px;
7
        border: 1px solid black;
8
    }
9

10
    .box {
11
        width: 100px;
12
        height: 100px;
13
        background-color: #f5f5f5;
14
        border: 1px solid #ccc;
15
    }
16
</style>
17
<div class="container">
18
    <div class="box" style="position: relative; top: 20px; left: 20px;">Relative</div>
19
    <div class="box" style="position: absolute; top: 60px; left: 60px;">Absolute</div>
20
</div>

1
<style>
2
    .multi-col-container {
3
        column-count: 3; /* define three columns */
4
        column-gap: 20px; /* column spacing */
5
        column-rule: 1px solid #ccc; /* column dividing line */
6
    }
7
</style>
8
<div class="multi-col-container">
9
    <p>
10
        This is Twilight Maple's monkey den. What's being demonstrated now is the multi-column layout. This is Twilight Maple's monkey den. What's being demonstrated now is the multi-column layout. This is Twilight Maple's monkey den. What's being demonstrated now is the multi-column layout. This is Twilight Maple's monkey den. What's being demonstrated now is the multi-column layout. This is Twilight Maple's monkey den. What's being demonstrated now is the multi-column layout. This is Twilight Maple's monkey den. What's being demonstrated now is the multi-column layout. This is Twilight Maple's monkey den. What's being demonstrated now is the multi-column layout.
11
    </p>
12
</div>

1
<style>
2
    /* Example: equal-height card layout (cross-axis stretch + dynamic wrapping) */
3
    .card-container {
4
        display: flex;
5
        flex-wrap: wrap; /* allow wrapping */
6
        gap: 1rem;
7
        padding: 2rem;
8
    }
9

10
    .card {
11
        flex: 1; /* dynamically fill remaining space */
12
        min-width: 150px; /* minimum width constraint to ensure readability */
13
        background: #f5f5f5;
14
        padding: 1.5rem;
15
        border-radius: 8px;
16
    }
17

18
    /* Example: vertical centering */
19
    .centered-section {
20
        display: flex;
21
        min-height: 300px; /* needs a height to vertical-center */
22
        background: #e0e0e0;
23
    }
24

25
    .centered-content {
26
        margin: auto; /* horizontal and vertical centering */
27
        text-align: center;
28
    }
29
</style>
30
<!-- Example: card layout -->
31
<div class="card-container">
32
    <div class="card">
33
        <h3>Card 1</h3>
34
        <p>Dynamic-width card; different content heights but equal container height</p>
35
    </div>
36
    <div class="card">
37
        <h3>Card 2</h3>
38
        <p>Achieves equal width via flex:1, auto-wraps to respond to screen size</p>
39
        <p>Extra paragraph to show the height difference</p>
40
    </div>
41
    <div class="card">
42
        <h3>Card 3</h3>
43
        <p>Minimum width constraint ensures readability</p>
44
    </div>
45
</div>
46
<!-- Example: vertical centering -->
47
<section class="centered-section">
48
    <div class="centered-content">
49
        <h2>Centered</h2>
50
        <p>Centered without computing margins</p>
51
    </div>
52
</section>

1
<style>
2
    .dashboard {
3
        display: grid;
4
        grid-template-columns: repeat(3, 1fr); /* define three columns, each equal width */
5
        grid-template-rows: repeat(2, 100px) 200px; /* define three rows: first two are 100px, last is 200px */
6
        gap: 10px; /* grid gap */
7
        width: 100%;
8
        max-width: 900px;
9
        background-color: #fff;
10
        padding: 10px;
11
        border-radius: 8px;
12
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
13
    }
14

15
    .item {
16
        background-color: #e0e0e0;
17
        display: flex;
18
        justify-content: center;
19
        align-items: center;
20
        font-size: 1.2em;
21
        color: #333;
22
        border-radius: 4px;
23
    }
24

25
    /* adjust a specific module's size and position */
26
    .item-1 {
27
        grid-column: 1 / 3; /* span from column 1 to column 2 (excluding column 3) */
28
        grid-row: 1 / 2; /* occupy row 1 */
29
        background-color: #ffcccb;
30
    }
31

32
    .item-2 {
33
        grid-column: 3 / 4;
34
        grid-row: 1 / 3; /* span from row 1 to row 2 */
35
        background-color: #d4edda;
36
    }
37

38
    .item-3 {
39
        grid-column: 1 / 2;
40
        grid-row: 2 / 3;
41
        background-color: #d1ecf1;
42
    }
43

44
    .item-4 {
45
        grid-column: 2 / 3;
46
        grid-row: 2 / 3;
47
        background-color: #fff3cd;
48
    }
49

50
    .item-5 {
51
        grid-column: 3 / 4;
52
        grid-row: 3 / 4;
53
        background-color: #d4edda;
54
    }
55

56
    .item-6 {
57
        grid-column: 1 / 4; /* span all columns */
58
        grid-row: 3 / 4;
59
        background-color: #f8d7da;
60
    }
61
</style>
62
<div class="dashboard">
63
    <div class="item item-1">Item 1</div>
64
    <div class="item item-2">Item 2</div>
65
    <div class="item item-3">Item 3</div>
66
    <div class="item item-4">Item 4</div>
67
    <div class="item item-5">Item 5</div>
68
    <div class="item item-6">Item 6</div>
69
</div>

1
<style>
2
    .flash-div {
3
        width: 100px;
4
        height: 100px;
5
        background: red;
6
        /* use the animation, infinite loop playback */
7
        animation: flash 5s infinite;
8
    }
9

10
    /* define the animation */
11
    @keyframes flash {
12
        0% {
13
            background: red;
14
        }
15
        50% {
16
            background: yellow;
17
        }
18
        100% {
19
            background: red;
20
        }
21
    }
22
</style>
23
<div class="flash-div"></div>

1
<style>
2
    .transition {
3
        width: 100px;
4
        height: 100px;
5
        background: red;
6
        /* define a transition that, after a 1s delay, changes the width over 1s with a linear timing function */
7
        transition: width 1s linear 1s;
8
    }
9

10
    .transition:hover {
11
        width: 200px;
12
    }
13
</style>
14
<div class="transition"></div>

1
@media not|only media-type and (restrictions) {
2
    CSS code
3
}

1
<style>
2
    .my-media {
3
        width: 100px;
4
        height: 100px;
5
        background-color: antiquewhite;
6
    }
7

8
    /* applied when the screen width is less than or equal to 1000px */
9
    @media screen and (max-width: 1000px) {
10
        .my-media {
11
            width: 100px;
12
            height: 100px;
13
            background-color: black;
14
        }
15
    }
16
</style>
17
<div class="my-media"></div>

1
p:first-child i {
2
    /* match all <i> elements inside the <p> element that is the first child of its parent */
3
    color: blue;
4
}

1
p::after {
2
    content: " - tail";
3
    color: red;
4
}

1
<style>
2
    ul {
3
        /* remove the list bullet marker */
4
        list-style-type: none;
5
        /* remove the list's inner and outer margins */
6
        margin: 0;
7
        padding: 0;
8
        /* set width to 25% of the page */
9
        width: 25%;
10
        background-color: #f1f1f1;
11
        /* set the list to fixed positioning */
12
        position: fixed;
13
        /* overflow the element box; show a scrollbar if overflowing */
14
        overflow: auto;
15
    }
16

17
    li a {
18
        /* block-level, each element on its own line */
19
        display: block;
20
        color: #000;
21
        padding: 8px 16px;
22
        /* remove text decoration (underline) */
23
        text-decoration: none;
24
    }
25

26
    li a:active {
27
        background-color: #4CAF50;
28
        color: white;
29
        /* remove text decoration (underline) */
30
        text-decoration: none;
31
    }
32

33
    li a:hover:not(:active) {
34
        /* during the unselected, mouse-hover phase */
35
        background-color: #555;
36
        color: white;
37
        /* remove text decoration (underline) */
38
        text-decoration: none;
39
    }
40
</style>
41
<ul>
42
    <li><a>Menu Home</a></li>
43
    <li><a>Projects</a></li>
44
</ul>

1
<style>
2
    ul {
3
        width: 100%;
4
        list-style-type: none;
5
        margin: 0;
6
        padding: 0;
7
        background-color: #f1f1f1;
8
        /* hide scrollbar */
9
        overflow: hidden;
10
        /* flex layout */
11
        display: flex;
12
    }
13

14
    /* set an extra li layout */
15
    li {
16
        /* float the element to the left */
17
        float: left;
18
        /* flex layout splits equally */
19
        flex: 1;
20
    }
21

22
    li a {
23
        color: #000;
24
        padding: 15px 0;
25
        display: block;
26
        text-decoration: none;
27
        /* horizontally center text */
28
        text-align: center;
29
    }
30

31
    /* same as below */
32
    li a:active {
33
        background-color: #4CAF50;
34
        color: white;
35
        text-decoration: none;
36
    }
37

38
    li a:hover:not(:active) {
39
        background-color: #555;
40
        color: white;
41
        text-decoration: none;
42
    }
43
</style>
44

45
<ul>
46
    <li><a>Menu Home</a></li>
47
    <li><a>Projects</a></li>
48
</ul>

1
<style>
2
    /* dropdown button style */
3
    .dropbtn {
4
        background-color: #4CAF50;
5
        color: white;
6
        padding: 16px;
7
        font-size: 16px;
8
        /* remove border */
9
        border: none;
10
        /* use a pointer cursor (turn the mouse into a hand) */
11
        cursor: pointer;
12
    }
13

14
    /* container <div> - positions the dropdown content */
15
    .dropdown {
16
        /* relative position */
17
        position: relative;
18
    }
19

20
    /* dropdown content (hidden by default) */
21
    .dropdown-content {
22
        /* hidden */
23
        display: none;
24
        /* absolute position */
25
        position: absolute;
26
        background-color: #f9f9f9;
27
        min-width: 160px;
28
        /* add a background shadow to the dropdown content */
29
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
30
        /* if right-aligned (currently left-aligned) */
31
        /* right:0; */
32
    }
33

34
    /* dropdown menu links (content) */
35
    .dropdown-content a {
36
        color: black;
37
        padding: 12px 16px;
38
        text-decoration: none;
39
        display: block;
40
    }
41

42
    /* change the dropdown link color on mouse hover */
43
    .dropdown-content a:hover {
44
        background-color: #f1f1f1
45
    }
46

47
    /* show the dropdown menu on mouse hover */
48
    .dropdown:hover .dropdown-content {
49
        display: block;
50
    }
51

52
    /* change the dropdown button's background color once the dropdown content is shown */
53
    .dropdown:hover .dropbtn {
54
        background-color: #3e8e41;
55
    }
56
</style>
57

58
<div class="dropdown">
59
    <button class="dropbtn">Dropdown Menu</button>
60
    <div class="dropdown-content">
61
        <a>Option 1</a>
62
    </div>
63
</div>

1
<style>
2
/* tooltip element */
3
.tooltip {
4
    position: relative;
5
    display: inline-block;
6
    border-bottom: 1px dotted black;
7
}
8

9
/* tooltip text */
10
.tooltip .tooltiptext {
11
    visibility: hidden;
12
    width: 120px;
13
    background-color: black;
14
    color: #fff;
15
    text-align: center;
16
    /* box rounded corners */
17
    border-radius: 6px;
18
    padding: 5px 0;
19
    position: absolute;
20
    /* stacking level, meaning above most other elements */
21
    z-index: 1;
22
    /* offset relative to the normal position (5px up because padding is 5px) */
23
    top: -5px;
24
    /* means positioned at 110% of the containing element's width (i.e. slightly beyond the right edge), showing the tooltip to the right of the trigger element */
25
    left: 110%;
26

27
    For the left side use right: 110%
28
    For the top use bottom: 100% but also set centering: left: 50%; margin-left: -60px; (half the offset width)
29
    For the bottom use top: 100% but also set centering: left: 50%; margin-left: -60px; (half the offset width)
30

31
    /* fade in: start from opacity 0 */
32
    opacity: 0;
33
    transition: opacity 1s;
34
}
35
/* triangle style, worth remembering */
36
.tooltip .tooltiptext::after {
37
    /* use the after pseudo-element to add content after the element, here a triangle */
38
    content: ""; /* no text needed */
39
    position: absolute;
40
    /* vertically centered */
41
    top: 50%;
42
    /* the right edge of the element is at 100% of its containing block's width, on the left side of the tooltip */
43
    right: 100%;
44
    margin-top: -5px;
45
    border-width: 5px;
46
    border-style: solid;
47
    /* order is top right bottom left; leveraging CSS border behavior, when adjacent border colors differ a beveled effect is produced */
48
    border-color: transparent black transparent transparent;
49
}
50
.tooltip:hover .tooltiptext {
51
    visibility: visible;
52
    /* fade in: opacity becomes 1 */
53
    opacity: 1;
54
}
55
</style>
56

57
<div class="tooltip">Move mouse here
58
  <span class="tooltiptext">Tooltip text</span>
59
</div>