How to Use HTML and CSS

Want to build your own website? It might seem hard. But learning HTML and CSS can help. They're the building blocks of the web. This guide will show you how to use them. We'll start with the easy stuff and move to the trickier bits. Whether you're brand new or have some experience, you'll learn what you need to get started.

What's HTML?

HTML stands for HyperText Markup Language. It's the thing that makes the internet work. Think of it like the skeleton of a website. It gives the site its structure and holds the content. HTML uses elements called "tags." These tags tell the browser what to show. Headings? Paragraphs? Images? Links? HTML handles it all.

Understanding HTML Tags

HTML tags look like this: < and >. Most tags come in pairs. One to start, and one to end. For example: <p> starts a paragraph, and </p> ends it. The words of your paragraph go in between. Simple, right?

Read Also: How to Build a Mobile App

Here are some common HTML tags:

<!DOCTYPE html>: Tells the browser this is an HTML5 page.
<html>: The main part of your HTML page.
<head>: Info about your page. Like the title.
<title>: The title of the page. You see it in the browser tab.
<body>: All the stuff you see on the page goes here.
<h1> to <h6>: Headings! <h1> is the biggest, <h6> is the smallest.
<p>: This makes a paragraph.
<br>: Makes a line break. Like hitting "enter."
<a>: Makes a link. Use the href to say where it goes.
<img>: Shows an image. Use the src to tell it where the image is.
<ul>: Makes a list with bullet points.
<ol>: Makes a numbered list.
<li>: A single item in a list.
<div>: A section on your page. Like a box.
<span>: A small container. For a word or two.
<strong>: Makes text important (usually bold).
<em>: Makes text emphasized (usually italic).
<table>: Makes a table.
<tr>: A row in a table.
<td>: A cell in a table.
<form>: Makes a form. Where people can type stuff.
<input>: A place to type something. Like a text box.
<button>: A clickable button.
<select>: A dropdown list.
<textarea>: A big box for typing lots of text.

Let's Write an HTML Page!

Want to try it yourself? Okay! Open a text editor. Like Notepad or TextEdit. Type this code:

<!DOCTYPE html>
<html>
<head>
 <title>My First Webpage</title>
</head>
<body>
 <h1>Hello, World!</h1>
 <p>This is my first webpage using HTML.</p>
</body>
</html>

Save it as "index.html". The ".html" part is important! Open the file in your browser. You should see "Hello, World!" as a big heading. And the other sentence below it. Congrats! You made a webpage.

What's CSS?

CSS stands for Cascading Style Sheets. It's what makes your website look good. It controls colors, fonts, and how things are laid out. HTML is the structure, CSS is the style. It's like the paint and furniture in your house.

Understanding CSS Selectors

CSS uses "selectors" to pick which HTML things to style. Here are a few:

Element Selectors: Pick all things of one type. Like all <p> tags.
ID Selectors: Pick one thing with a special ID. Like #my-paragraph. IDs should only be used once per page!
Class Selectors: Pick all things with a certain class. Like .highlight. You can use classes many times.
Attribute Selectors: Pick things based on what they have. Like a link with "example.com" in it.
Pseudo-classes: Pick things based on what they're doing. Like a link when you hover over it.
Pseudo-elements: Pick a certain part of something. Like the first line of a paragraph.
Combinators: These say how selectors relate to each other.
- Descendant (space): Anything inside something. Like a <p> inside a <div>.
- Child (>): Only things directly inside something.
- Adjacent sibling (+): The thing right after another thing.
- General sibling (~): All things that follow another thing (and are at the same level).

CSS: How it Works

A CSS "rule" has two parts: a selector and a "declaration block." The selector picks the HTML thing. The declaration block says how to style it. Like this:

selector {
 property: value;
 property: value;
}

Want to make all your paragraphs blue? Try this:

p {
 color: blue;
}

How to Use CSS

There are three ways to add CSS to your HTML:

Inline CSS: Put the style right inside the HTML tag. Use the style attribute. Not great for big projects.
Internal CSS: Put the CSS in a <style> tag in the <head> of your HTML.
External CSS: Put the CSS in a separate ".css" file. Then link it to your HTML. This is the best way! Keeps things organized.

Inline CSS Example:

<p style="color: red;">This is a red paragraph.</p>

Internal CSS Example:

<!DOCTYPE html>
<html>
<head>
 <title>Internal CSS Example</title>
 <style>
  p {
 color: green;
  }
 </style>
</head>
<body>
 <p>This is a green paragraph.</p>
</body>
</html>

External CSS Example:

Make a file called "style.css." Put this inside:

p {
 color: purple;
}

Then, in your HTML, add this:

<!DOCTYPE html>
<html>
<head>
 <title>External CSS Example</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <p>This is a purple paragraph.</p>
</body>
</html>

Common CSS Things

Here are some CSS properties you'll use a lot:

color: The color of the text.
font-family: The font of the text.
font-size: How big the text is.
background-color: The color behind something.
width: How wide something is.
height: How tall something is.
margin: Space around something.
padding: Space inside something.
border: A line around something.
text-align: How to line up text. Left, right, or center.
display: How something shows up on the page.
position: Where something is on the page.

Website Layout Basics

HTML gives the structure. CSS gives the style. For a basic website layout, use these HTML5 tags:

<header>: The top of the page. Logo and navigation usually go here.
<nav>: A list of links.
<main>: The main content of your page.
<article>: A self-contained thing. Like a blog post.
<aside>: Stuff on the side. Like a sidebar.
<footer>: The bottom of the page. Copyright info usually goes here.

Here's what the HTML might look like:

<!DOCTYPE html>
<html>
<head>
 <title>Basic Website Layout</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <header>
 <h1>My Website</h1>
 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>
 </header>
 <main>
 <article>
 <h2>Article Title</h2>
 <p>This is the main content of the article.</p>
 </article>
 <aside>
 <h3>Sidebar</h3>
 <p>This is the sidebar content.</p>
 </aside>
 </main>
 <footer>
 <p>© 2023 My Website</p>
 </footer>
</body>
</html>

And the CSS:

body {
 font-family: sans-serif;
 margin: 0;
 padding: 0;
}

header {
 background-color: #333;
 color: white;
 padding: 1em;
 text-align: center;
}

nav ul {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 justify-content: center;
}

nav li {
 margin: 0 1em;
}

nav a {
 color: white;
 text-decoration: none;
}

main {
 display: flex;
 padding: 1em;
}

article {
 flex: 3;
}

aside {
 flex: 1;
 background-color: #f0f0f0;
 padding: 1em;
}

footer {
 background-color: #333;
 color: white;
 text-align: center;
 padding: 1em;
}

Copy and paste those into their files. Boom! You have a basic website.

Make it Fit Any Screen!

Want your site to look good on phones and computers? That's called "responsive design." CSS media queries are how you do it. They let you change the styles based on the screen size.

How to Use Media Queries

Media queries use the code>@media</code rule. Like this:

@media (max-width: 768px) {
 / Styles for screens smaller than 768px /
 body {
 font-size: 14px;
 }
}

That code says: "If the screen is smaller than 768 pixels wide, make the text smaller." You can use all sorts of things to target different devices.

Here's a complete example:

/ Default styles for larger screens /
body {
 font-family: sans-serif;
 margin: 0;
 padding: 0;
}

header {
 background-color: #333;
 color: white;
 padding: 1em;
 text-align: center;
}

nav ul {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 justify-content: center;
}

nav li {
 margin: 0 1em;
}

nav a {
 color: white;
 text-decoration: none;
}

main {
 display: flex;
 padding: 1em;
}

article {
 flex: 3;
}

aside {
 flex: 1;
 background-color: #f0f0f0;
 padding: 1em;
}

footer {
 background-color: #333;
 color: white;
 text-align: center;
 padding: 1em;
}

/ Media query for screens smaller than 768px /
@media (max-width: 768px) {
 nav ul {
 flex-direction: column;
 align-items: center;
 }

 nav li {
 margin: 0.5em 0;
 }

 main {
 flex-direction: column;
 }

 article {
 flex: 1;
 }

 aside {
 flex: 1;
 }
}

Level Up Your CSS!

Okay, you know the basics. Now for some cool tricks!

CSS Flexbox

Flexbox makes it easy to arrange things. Especially for making them line up nicely.

CSS Grid

CSS Grid is like a super-powered table. It lets you put things exactly where you want them.

CSS Transitions and Animations

Make things move! Transitions let you change styles smoothly. Animations let you make complex moving pictures.

CSS Preprocessors (Sass, Less)

These add extra features to CSS. Like variables and mixins. They can help you write better code.

Good Habits for Good Code

Want to be a great coder? Follow these tips:

Use Semantic HTML: Use the right HTML tags for the right things. Helps with accessibility and search engines.
Keep it Clean: Pick good names for your CSS classes and IDs. And keep your CSS organized.
Check Your Work: Use online tools to check for mistakes in your HTML and CSS.
Make it Fast: Smaller files mean faster websites. Use tools to shrink your CSS and images.
Make it Accessible: Everyone should be able to use your website. Even people with disabilities.
Test, Test, Test: Check your site in different browsers and on different devices.