What is the difference between HTML and CSS?

HTML defines the structure of a page; CSS handles design and styling.

How do I set up a dev environment?

VS Code and a web browser are enough to get started.

Can I build a website with only HTML and CSS?

Yes—for static sites HTML and CSS are enough. Dynamic behavior needs JavaScript.

HTML & CSS for Beginners — Complete Guide

2026년 2월 13일 · 14분 읽기 · 수정 2026년 3월 29일 Beginner Tutorial

이 글의 핵심

Start with HTML and CSS: set up VS Code, learn document structure, link stylesheets, and build a simple portfolio page—concepts, examples, and devtools in one tutorial.

Introduction

What are HTML and CSS?

HTML (HyperText Markup Language) defines the structure of a web page. CSS (Cascading Style Sheets) defines its appearance.

HTML = framing (structure)
CSS = interior design (style)
JavaScript = wiring (behavior)

Highlights:

HTML: headings, paragraphs, images, links, and other content structure
CSS: colors, sizing, layout, animation, and presentation
Browsers: Chrome, Firefox, Safari, and others run your pages
Simplicity: markup and style—not a general-purpose programming language

1. Development environment

Install VS Code

Download from the official VS Code site
Recommended extensions:
- Live Server: live reload in the browser
- HTML CSS Support: better completions
- Prettier: consistent formatting

Your first HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first web page</title>
</head>
<body>
    <h1>Hello!</h1>
    <p>This is my first web page.</p>
</body>
</html>

Document structure: <!DOCTYPE html> tells the browser this is an HTML5 document. lang="en" helps search engines, accessibility (screen readers), and font selection. meta charset avoids mojibake; viewport sets the baseline for mobile layout. How to open it:

Save as index.html
Double-click or open in a browser
Or use Live Server from VS Code

2. Basic HTML structure

Required pieces

<!DOCTYPE html>          <!-- HTML5 doctype -->
<html lang="en">         <!-- language -->
<head>
    <!-- metadata -->
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <!-- visible content -->
</body>
</html>

Separation of roles: head holds settings and metadata you do not see on the page; body is what users see. Stylesheets (link rel="stylesheet") and scripts usually go at the end of head or before </body> to control load order.

Common tags

<!-- Headings -->
<h1>Largest heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<!-- Paragraph -->
<p>Paragraph text.</p>
<!-- Link -->
<a href="https://example.com">Link text</a>
<!-- Image -->
<img src="image.jpg" alt="Description of the image">
<!-- List -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<!-- Horizontal rule -->
<hr>
<!-- Line break -->
<br>

3. CSS basics

Ways to add CSS

Option 1: inline styles

<p style="color: red; font-size: 20px;">Red text</p>

Option 2: internal stylesheet

// 실행 예제
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

Option 3: external stylesheet (recommended)

<!-- index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

/* style.css */
p {
    color: green;
    font-size: 16px;
}

Basic CSS syntax

selector {
    property: value;
    property: value;
}

Example:

/* Tag selector */
h1 {
    color: navy;
    font-size: 32px;
}
/* Class selector */
.highlight {
    background-color: yellow;
}
/* ID selector */
#header {
    background-color: #333;
    color: white;
}

4. Build a simple page

Project layout

my-website/
├── index.html
├── style.css
└── images/
    └── logo.png

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Jane Doe</h1>
        <p>Web developer</p>
    </header>
    <main>
        <section id="about">
            <h2>About</h2>
            <p>Hi! I am Jane, learning web development.</p>
        </section>
        <section id="skills">
            <h2>Skills</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </section>
        <section id="contact">
            <h2>Contact</h2>
            <p>Email: jane@example.com</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2026 Jane Doe. All rights reserved.</p>
    </footer>
</body>
</html>

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
}
header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem;
}
header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}
section {
    margin-bottom: 2rem;
}
h2 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
ul {
    list-style-position: inside;
}
li {
    margin: 0.5rem 0;
}
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

5. Practical examples

Example 1: Business card page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Business card</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: Arial, sans-serif;
        }
        .card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            text-align: center;
            max-width: 400px;
        }
        .card h1 {
            color: #333;
            margin-bottom: 0.5rem;
        }
        .card p {
            color: #666;
            margin: 0.5rem 0;
        }
        .card .email {
            color: #667eea;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Jane Doe</h1>
        <p>Frontend developer</p>
        <p class="email">jane@example.com</p>
        <p>Seoul, South Korea</p>
    </div>
</body>
</html>

Example 2: Simple blog post

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog post</title>
    <style>
        body {
            max-width: 700px;
            margin: 0 auto;
            padding: 2rem;
            font-family: system-ui, sans-serif;
            line-height: 1.8;
        }
        article {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        .meta {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
        }
        p {
            margin-bottom: 1rem;
        }
        .highlight {
            background-color: #fff3cd;
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <article>
        <h1>Getting started with HTML and CSS</h1>
        <div class="meta">March 29, 2026 | Jane Doe</div>
        
        <p>
            <span class="highlight">HTML</span> and 
            <span class="highlight">CSS</span> are the foundation of the web.
        </p>
        
        <p>
            Structure with HTML, style with CSS, and you can ship attractive static pages.
        </p>
        
        <p>
            Mastering these two is enough for many static sites.
        </p>
    </article>
</body>
</html>

6. Developer tools

Chrome DevTools

Open: F12 or Ctrl+Shift+I (Mac: Cmd+Option+I) Useful panels:

Elements: inspect and tweak HTML/CSS live
Console: run JavaScript snippets
Network: inspect requests
Sources: debug scripts Workflow:

Right-click an element → Inspect
Edit styles in the Elements panel
Click color values to open the color picker

Summary

Takeaways

HTML: structure (tags)
CSS: presentation (rules)
Environment: VS Code + a browser
Skeleton: <!DOCTYPE html> → <html> → <head> + <body>
CSS placement: inline, internal, or external (prefer external)

Next steps

Frequently Asked Questions (FAQ)

Q. When would I use this in practice?

A. Start with HTML and CSS: set up VS Code, learn document structure, link stylesheets, and build a simple portfolio page—c…

Q. What should I read before this?

A. Follow the previous article or related articles links at the bottom of each post to learn in sequence.

Q. Where can I study this more deeply?

A. Check cppreference and the relevant library’s official documentation. The reference links at the end of the article are also worth using.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.