CSS Setup & Syntax

Inline, Internal, External CSS, and Syntax.

Introduction

In the previous chapter, you learned what CSS is and why it is important. In this chapter, we will focus on how to write CSS, basic syntax, and the different ways to apply CSS to an HTML document.

This chapter is very important because every CSS concept you learn later depends on understanding syntax and setup properly. We will keep everything simple and practical.

CSS Syntax Explained

CSS follows a very clear and readable structure. Every CSS rule is made of three main parts:

selector {
  property: value;
}
Example:
h1 {
  color: blue;
}
Explanation:
  • Selector: h1 → tells CSS which HTML element to target
  • Property: color → tells what you want to change
  • Value: blue → tells how you want to change it

Each rule ends with a semicolon (;). Curly braces {} group the styles for a selector.

Multiple Properties Example
p {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

This applies three styles to all <p> tags:

  • Text color
  • Font size
  • Line spacing

CSS Comments

Comments are used to explain code. Browsers ignore comments.

Syntax:

/* This is a CSS comment */

Example:

/* Main heading style */
h1 {
  color: green;
}

Comments are useful when:

  • Working in teams
  • Revisiting code later
  • Explaining complex styles

Ways to Apply CSS

There are three main ways to apply CSS to HTML:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Let’s understand each one clearly.

1. Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

Example:

<h1 style="color: red; font-size: 28px;">
  Welcome to VINAR TECH
</h1>
Advantages:
  • Quick for small changes
  • Easy to test styles
Disadvantages:
  • Not reusable
  • Makes HTML messy
  • Hard to maintain
  • Not recommended for real projects
Use inline CSS only for testing or very small changes.

2. Internal CSS

Internal CSS is written inside the <style> tag in the <head> section of an HTML file.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    h1 {
      color: blue;
    }
  <style>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>
Advantages:
  • Better than inline CSS
  • Good for single-page websites
  • Easy to understand
Disadvantages:
  • Not reusable across multiple pages
  • Increases page size

Internal CSS is useful for small websites or demos, but not ideal for large projects.

3. External CSS (Best Practice)

External CSS is written in a separate .css file and linked to HTML.

Step 1: Create a CSS file (styles.css)

body {
  background-color: #f5f5f5;
}

h1 {
  color: #2c3e50;
}

Step 2: Link it in HTML

<link rel="stylesheet" href="styles.css">
Advantages:
  • Clean separation of code
  • Reusable across pages
  • Easy maintenance
  • Faster loading (browser caching)
Disadvantages:
  • Slightly more setup

External CSS is the industry standard and recommended approach.

CSS File Naming Rules

  • Use .css extension
  • Use lowercase names
  • Avoid spaces
  • Use hyphens if needed
Good examples:
  • style.css
  • main-layout.css
  • responsive.css
Bad examples:
  • Style File.css
  • MyCSS.css

CSS Rule Ordering

CSS is applied from top to bottom.

Example:

p {
  color: red;
}

p {
  color: blue;
}

Final color will be blue because it appears later. This is part of CSS cascading behavior.

Basic CSS Properties Overview

Some commonly used properties you should remember:

  • color – text color
  • background-color – background color
  • font-size – text size
  • font-family – font style
  • margin – space outside element
  • padding – space inside element
  • border – border around element

Example:

.box {
  background-color: white;
  padding: 20px;
  border: 1px solid #ddd;
}

Common Beginner Mistakes

  • Forgetting semicolons
  • Misspelling property names
  • Using inline CSS everywhere
  • Mixing HTML and CSS logic
  • Writing CSS without structure

Example mistake: color red

Correct: color: red;

Best Practices for Writing CSS

  • Always use external CSS for projects
  • Keep code readable and well-spaced
  • Group related styles together
  • Add comments where needed
  • Avoid repeating styles unnecessarily

Real-World Example

Imagine a website with 20 pages. If you use inline CSS, you must update styles on every page.

With external CSS:

  • Change one file
  • Entire website updates

This is why external CSS is powerful and professional.

Chapter Summary

In this chapter, you learned:

  • CSS syntax and structure
  • How to write CSS rules
  • CSS comments
  • Inline, internal, and external CSS
  • Why external CSS is best
  • Common mistakes and best practices
Introduction to CSS Back to Index CSS Selectors