How can CSS style a web page?

1. Separating content and design

HTML for structure, CSS for style

HTML describes what the content is. CSS describes how the content should look. This makes your pages easier to change and reuse.

<!-- HTML -->
<h1 class="title">Welcome to my page</h1>
<p>This is a paragraph of text.</p>

CSS style
<style>
.title{
  color: blue;
  font-family: Arial, sans-serif;
}
</style>

The same HTML can look very different when you change the CSS rules.

In this example the HTML and CSS are shown together, but in a real project the CSS is often kept in a separate file.

2. Where can you put CSS?

Inline, internal and external CSS

There are three common ways to use CSS:

Inline: inside an HTML tag using the style attribute.
Internal: inside a <style> block in the <head>.
External: in a separate .css file linked with <link>.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

On Playcode123 we often use an external file like styles.css so many pages can share the same design.

For small tests in the Sandbox it is fine to use an internal <style> block inside the <head> of your HTML page.

3. Practice

What can you try yourself?

Change the background color of the page.
Make headings larger and paragraphs slightly smaller using font-size.
Add some space around elements with margin and padding.

Copy a simple HTML page into the Sandbox, then add a <style> block or link a CSS file and see how the layout changes.

4. What to do next?

Continue your CSS and JavaScript learning path

After you understand the basic idea of CSS, continue with these steps:

Practise more CSS: go to the CSS codes page and try the ready-made CSS examples in the Sandbox.
Combine HTML and CSS: start with a simple HTML page and slowly add more CSS rules to see how each rule changes the page.
Get ready for interactivity: read the “How can JavaScript make a web page interactive?” explanation to see what JavaScript can add on top of HTML and CSS.
Practise with assignments: open the HTML, CSS and JavaScript exercises (PDF) and try to style your own small web pages.

Take it step by step: first learn HTML structure, then use CSS for colors and layout, and finally use JavaScript to make your pages interactive.