A Simple CSS Tutorial to Start Your Web Design Journey

Tpoint Tech·2025년 6월 9일

If you've ever looked at a website and wondered how it looks so polished and visually appealing, chances are CSS had a lot to do with it. CSS, or Cascading Style Sheets, is a fundamental technology used in web design to control how HTML elements are displayed on screen. Whether you're building a personal blog, an online store, or a portfolio, learning CSS is your first step toward creating professional-looking websites.

In this beginner-friendly CSS tutorial, we’ll cover the basics you need to get started. No prior experience required—just curiosity and a desire to learn!

What Is CSS?

CSS stands for Cascading Style Sheets. It’s a stylesheet language used to describe the presentation of an HTML document. While HTML provides the structure and content of a webpage, CSS is responsible for its design—things like layout, colors, fonts, and spacing.

With CSS, you can:

Change the background color of your page
Adjust fonts and text size
Create spacing between elements
Align elements on the screen
Build responsive designs that work on all devices

How CSS Works

CSS works by selecting HTML elements and applying style rules to them. You can write CSS in three main ways:

Inline – directly within an HTML element
Internal – inside a <style> tag within the <head> of your HTML document
External – in a separate .css file linked to your HTML

For beginners, external stylesheets are best because they keep your code organized and reusable.

Here’s a simple example of a CSS rule:

h1 {
  color: blue;
  font-size: 32px;
}

This rule changes all <h1> headings on your page to blue text with a font size of 32 pixels.

Setting Up Your First CSS File

Let’s walk through the steps to set up CSS with an HTML file:

Create an HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, world!</h1>
  <p>Welcome to my first styled page.</p>
</body>
</html>

Create a CSS file (styles.css):

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  padding: 20px;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  color: #666;
  line-height: 1.5;
}

Save both files in the same folder, then open the HTML file in a browser. You’ll see your styled content!

Understanding Selectors, Properties, and Values

In CSS, you work with selectors, properties, and values.

Selector: targets the HTML element (e.g., h1, p, .classname, #id)
Property: the style attribute you want to change (e.g., color, font-size)
Value: the setting you apply to the property (e.g., red, 16px)

Example:

p {
  color: red;
}

This turns all paragraph text red.

Common CSS Properties You Should Know

Here are a few commonly used CSS properties:

Property	What it Does
`color`	Changes text color
`background-color`	Sets background color
`font-size`	Controls text size
`font-family`	Changes font style
`margin`	Adds space outside elements
`padding`	Adds space inside elements
`border`	Adds a border around an element
`text-align`	Aligns text (left, center, right)

Adding Classes and IDs

You can apply styles to specific elements using classes and IDs.

Class:

<p class="highlight">This is a special paragraph.</p>

.highlight {
  background-color: yellow;
}

ID:

<h2 id="main-title">Welcome</h2>

#main-title {
  font-size: 40px;
  color: darkblue;
}

Use classes when you want to style multiple elements.
Use IDs when styling a unique element.

A Simple CSS Project: Style a Basic Web Page

Let’s try putting it all together. Create a simple webpage with a styled header and paragraph.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome to My Web Design Journey</h1>
  <p class="intro">Learning CSS is the first step to building awesome websites!</p>
</body>
</html>

CSS (style.css):

body {
  background-color: #ffffff;
  font-family: Verdana, sans-serif;
  margin: 40px;
}

h1 {
  color: #2c3e50;
  text-align: center;
}

.intro {
  font-size: 18px;
  color: #34495e;
  text-align: center;
}

When you open this in your browser, you'll see a clean, styled page—your first step into web design!

What’s Next?

Once you're comfortable with basic CSS, here are a few topics you can explore next:

Flexbox: for creating flexible layouts
CSS Grid: for advanced grid-based designs
Media Queries: for making your site mobile-friendly
Animations and Transitions: for adding interactive effects

Final Thoughts

Learning CSS might seem overwhelming at first, but with practice, it becomes second nature. Start small, experiment often, and don’t be afraid to break things. Every web designer starts with the basics—and you're already on your way.

By understanding how CSS works and practicing simple styling techniques, you’re building the foundation for more advanced web design skills.

Happy coding—and enjoy the journey!

Tpoint Tech

Tpoint Tech is a leading online platform dedicated to providing high-quality tutorials on programming,