HTML & CSS Cookbook

Don't try to memorize this. Find something you want to do, click it, copy the example, and experiment with it.

HTML controls what is on the page. CSS controls what it looks like.

HTML

1. Add a Heading

<h1>Big Heading</h1>
<h2>Smaller Heading</h2>
<h3>Even Smaller Heading</h3>

2. Add Normal Text

<p>Put whatever you want to say here.</p>

3. Make Text Bold

<strong>This is important.</strong>

4. Make Text Italic

<em>This is italic.</em>

5. Highlight Text

<mark>Look at this!</mark>

6. Make Small Text

<small>This is the fine print.</small>

7. Start a New Line

First line<br>
Second line

8. Add a Horizontal Line

<hr>

9. Add a Quote

<blockquote>
    "The only way to learn this is to mess around."
</blockquote>

10. Show Code

<code>git push</code>

11. Add a Link

<a href="https://google.com">Go to Google</a>

12. Open a Link in a New Tab

<a href="https://google.com" target="_blank">
    Open Google
</a>

13. Make an Email Link

<a href="mailto:example@gmail.com">Email Me</a>

14. Make a Phone Link

<a href="tel:1234567890">Call Me</a>

15. Add an Image

<img src="../images/jpork.jpeg" alt="My picture">

Because this page is inside pages/, the .. means "go back one folder."

16. Change Image Size

<img src="../images/jpork.jpeg" width="300">

17. Make an Image Clickable

<a href="https://google.com">
    <img src="../images/jpork.jpeg" width="200">
</a>

18. Add an Image Caption

<figure>
    <img src="../images/jpork.jpeg" width="300">
    <figcaption>This is my picture.</figcaption>
</figure>

19. Make a Download Link

<a href="../images/jpork.jpeg" download>
    Download Picture
</a>

20. Jump Somewhere on the Page

<a href="#games">Jump to Games</a>

<h2 id="games">My Favorite Games</h2>

21. Make a Bullet List

<ul>
    <li>Pizza</li>
    <li>Games</li>
    <li>Music</li>
</ul>

22. Make a Numbered List

<ol>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

23. Put a List Inside a List

<ul>
    <li>Games
        <ul>
            <li>Minecraft</li>
            <li>Fortnite</li>
        </ul>
    </li>
</ul>

24. Group Things Together

<div>
    <h2>My Section</h2>
    <p>These things are grouped together.</p>
</div>

A div is basically a box you can put other things inside. It's especially useful when you start using CSS.

25. Create a Section

<section>
    <h2>My Games</h2>
    <p>Stuff about my games goes here.</p>
</section>

26. Create a Header

<header>
    <h1>My Website</h1>
</header>

27. Create a Footer

<footer>
    <p>Made by Thomas</p>
</footer>

28. Create Navigation

<nav>
    <a href="../index.html">Home</a>
    <a href="about.html">About</a>
</nav>

29. Add Expandable Information

<details>
    <summary>Click to reveal something</summary>
    <p>Secret information!</p>
</details>

30. Make a Table

<table>
    <tr>
        <th>Game</th>
        <th>Rating</th>
    </tr>

    <tr>
        <td>Minecraft</td>
        <td>10/10</td>
    </tr>
</table>

31. Add a Button

<button>Click Me</button>

32. Add a Text Box

<input type="text" placeholder="Type something...">

33. Add a Large Text Box

<textarea placeholder="Write something..."></textarea>

34. Add a Checkbox

<label>
    <input type="checkbox">
    I like pizza
</label>

35. Add Radio Buttons

<input type="radio" name="food"> Pizza
<input type="radio" name="food"> Tacos

36. Add a Dropdown

<select>
    <option>Pizza</option>
    <option>Tacos</option>
    <option>Burgers</option>
</select>

37. Add a Slider

<input type="range" min="0" max="100">

38. Add a Color Picker

<input type="color">

39. Add a Date Picker

<input type="date">

40. Make a Form

<form>

    <label>Name:</label>
    <input type="text">

    <button type="submit">Submit</button>

</form>

Making a form actually send information somewhere requires some additional work later.

41. Add a Video

<video controls width="500">
    <source src="myvideo.mp4" type="video/mp4">
</video>

42. Add Audio

<audio controls>
    <source src="mysong.mp3" type="audio/mpeg">
</audio>

43. Embed a YouTube Video

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    allowfullscreen>
</iframe>

YouTube also has a Share → Embed option that generates this code for you.

44. Add a Progress Bar

<progress value="70" max="100"></progress>

45. Add a Meter

<meter value="8" min="0" max="10"></meter>

46. Add Emoji

<p>Happy Birthday 🎉🎂</p>

47. Add Hover Text

<p title="You found the secret message!">
    Hover over me.
</p>

48. Give Something a CSS Class

<p class="important">
    This has a class called important.
</p>

Then CSS can target it:

.important {
    color: red;
}

49. Give Something an ID

<h2 id="games">Games</h2>

IDs can identify one specific thing on your page.

50. Leave Yourself a Comment

<!-- This won't appear on the website -->

<h1>This WILL appear.</h1>

CSS

The examples below normally go inside style.css.

For example:

p {
    color: blue;
}

means "make every paragraph blue."

51. Change Text Color

p {
    color: blue;
}

52. Change Text Size

h1 {
    font-size: 50px;
}

53. Change the Font

body {
    font-family: Georgia, serif;
}

54. Make Text Bold

p {
    font-weight: bold;
}

55. Center Text

h1 {
    text-align: center;
}

56. Make Text Uppercase

h2 {
    text-transform: uppercase;
}

57. Space Out Letters

h1 {
    letter-spacing: 5px;
}

58. Change Line Spacing

p {
    line-height: 1.8;
}

59. Add a Text Shadow

h1 {
    text-shadow: 2px 2px 5px gray;
}

60. Remove Link Underlines

a {
    text-decoration: none;
}

61. Change Background Color

body {
    background-color: lightblue;
}

62. Add a Background Image

.header {
    background-image: url("images/jpork.jpeg");
}

63. Make a Background Fill an Area

.header {
    background-image: url("images/jpork.jpeg");
    background-size: cover;
    background-position: center;
}

64. Make a Gradient

.cool-background {
    background: linear-gradient(to right, blue, purple);
}

65. Make Something Transparent

.picture {
    opacity: 0.5;
}

1 is completely visible. 0 is completely invisible.

66. Change Width

.box {
    width: 300px;
}

67. Change Height

.box {
    height: 200px;
}

68. Set a Maximum Width

main {
    max-width: 900px;
}

This is what your current website uses so the text doesn't stretch across a gigantic monitor.

69. Add Inside Spacing

.box {
    padding: 30px;
}

Padding adds space inside the box.

70. Add Outside Spacing

.box {
    margin: 30px;
}

Margin adds space outside the box.

71. Center a Box

.box {
    width: 500px;
    margin: auto;
}

72. Make Something Screen Height

.hero {
    min-height: 100vh;
}

100vh means 100% of the height of the browser window.

73. Add a Border

.box {
    border: 2px solid black;
}

74. Round Corners

.box {
    border-radius: 15px;
}

75. Make a Circle

.circle {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50%;
}

76. Add a Shadow

.box {
    box-shadow: 0 4px 10px gray;
}

77. Change Border Color

.box {
    border: 3px solid red;
}

78. Resize Images

img {
    width: 300px;
}

79. Round an Image

img {
    border-radius: 20px;
}

80. Make a Profile Picture

.profile-picture {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
}

81. Crop an Image Nicely

img {
    width: 300px;
    height: 200px;
    object-fit: cover;
}

82. Center an Image

img {
    display: block;
    margin: auto;
}

83. Put Things Side by Side

.container {
    display: flex;
}

HTML:

<div class="container">
    <p>Left</p>
    <p>Middle</p>
    <p>Right</p>
</div>

84. Center Things

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

85. Add Space Between Things

.container {
    display: flex;
    gap: 20px;
}

86. Stack Things Vertically

.container {
    display: flex;
    flex-direction: column;
}

87. Make a Grid

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

HTML:

<div class="grid">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

88. Make a Card

.card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px lightgray;
}

Then:

<div class="card">
    <h2>Minecraft</h2>
    <p>One of my favorite games.</p>
</div>

89. Change Something When Hovered

a:hover {
    color: red;
}

90. Make the Mouse a Pointer

.thing {
    cursor: pointer;
}

91. Make Changes Smooth

.box {
    transition: 0.3s;
}

.box:hover {
    background-color: blue;
}

92. Make Something Grow on Hover

.picture {
    transition: 0.3s;
}

.picture:hover {
    transform: scale(1.1);
}

93. Rotate Something

.picture {
    transform: rotate(10deg);
}

94. Hide Something

.secret {
    display: none;
}

95. Style One Class

HTML:

<p class="important">Important message</p>

CSS:

.important {
    color: red;
    font-weight: bold;
}

The . means you're targeting a class.

96. Style One ID

HTML:

<h1 id="birthday">Happy Birthday!</h1>

CSS:

#birthday {
    color: purple;
}

The # means you're targeting an ID.

97. Style Links Inside Navigation

nav a {
    color: white;
}

This means "style every a that's inside a nav."

98. Make a Button Look Better

button {
    background-color: blue;
    color: white;

    padding: 10px 20px;

    border: none;
    border-radius: 8px;

    cursor: pointer;
}

You can also give it a hover effect:

button:hover {
    background-color: darkblue;
}

99. Make Navigation Stick to the Top

nav {
    position: sticky;
    top: 0;
}

100. Change Styles on Phones

@media (max-width: 600px) {

    h1 {
        font-size: 30px;
    }

    main {
        padding: 20px;
    }

}

Everything inside this section only happens when the screen is 600 pixels wide or smaller.

That's Enough to Build a Lot

You absolutely do not need to memorize these 100 things. Professional programmers often spend a good amount of time looking up how to use commands they haven't used before or in a long time

Go mess around on the Test Page. Or go make your own page