Introduction to CSS

Introduction to CSS – If you’re ready to make your websites look attractive and well-designed, you’re in the right place!
In this tutorial, we’ll walk you through CSS — starting from the absolute basics to more advanced styling concepts — explained in a clear, simple, and beginner-friendly way.

 Whether you’re completely new to CSS or want to sharpen your styling skills, this guide is built just for you.
We’ll focus on practical, real-world examples to help you understand how CSS works and how to use it effectively to design modern web pages.

By the end of this tutorial, you’ll have a solid understanding of CSS and be prepared to combine it with HTML and JavaScript to create visually stunning, interactive websites.
Let’s dive into CSS!

Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheets.

Let’s break down this term word by word:

  • Cascading means priority order. If there are multiple styles written for the same element, CSS follows rules to decide which style will win and apply. This is called CSS Specificity and Cascade Order.
  • Style means the visual appearance like colors, spacing, layout, font, border, size, etc.
  • Sheet means a file or code block that contains style rules.

Therefore,

CSS is used to control the style and layout of web pages.

HTML is used to create the structure (like text, images, headings, links).

CSS is used to design or style that structure (like colors, font sizes, spacing, layout, etc.).

Example:

If HTML says:

<p>This is a paragraph.</p>

CSS says:

p {

  color: blue;

  font-size: 20px;

}

This will make the paragraph text blue and 20px in size.

Difference between HTML CSS and JS

Difference between CSS, HTML, and JavaScript

FeatureHTMLCSSJavaScript
PurposeCreates structure and contentApplies design, layout, and visual stylingAdds interactivity and dynamic behavior
Language TypeMarkup LanguageStyle Sheet LanguageProgramming Language
File Extension.html.css.js
Browser RoleTells browser what to showTells browser how it should lookTells browser how it should behave
Example<h1>Title</h1>h1 { color: red; }alert(“Hello”);
ExecutesParsed as markupParsed and applied during renderingExecuted by browser’s JavaScript Engine

Types of CSS

1. Inline CSS

  • CSS is written directly inside the HTML tag using the style attribute.
  • It only affects that specific element.

Syntax:

<tag style=”property: value;”>content</tag>

Style

  • It is an attribute of tag for CSS.

Property

  • Property means what you want to change about the selected element.
  • Example: color, font-size, background-color, margin, etc.

Value

  • Value is how you want to change that property.
  • Example: If the property is color, the value could be blue, red, #000, rgb(0,0,0), etc.

; (Semicolon)

  • It ends the line. It’s like saying: “I’m done with this instruction.”
  • You must use it after every property: value pair.

Example:

<pstyle="color: blue; font-size: 16px;">This is inline styled text.</p>

Use Case:

  • When you want to apply a quick change to one element only.

Limitation of Inline CSS:

  • Difficult to maintain
  • Hard to reuse
  • Not clean for large websites

2. Internal CSS

  • CSS is written in the same HTML file, inside the <style> tag.
  • The <style> tag is placed inside the <head> tag.

Syntax:

<head>
  <style>
    selector {
      property: value;
    }
</style>
</head>

Selector

  • Selector tells the browser which HTML element you want to style.
  • Example: h1, p, .class, #id
    These tell: “Hey browser, apply the style to this element.”

Example:

<head>
  <style>
    h1 {
      color: green;
      font-size: 30px;
    }
  </style>
</head>

Use Case:

  • Good for small webpages
  • When CSS is only for that page

Limitations of Internal CSS

  1. Applies to a Single Page Only
    Internal CSS affects only the page where it is written. It cannot be reused across multiple HTML files.
  2. Code Duplication
    If you want the same styling on multiple pages, you have to copy and paste the same CSS code in each file, which leads to redundancy.
  3. Not Scalable for Large Projects
    For big websites with many pages, managing internal CSS becomes difficult and inefficient.
  4. Increases Page Size
    CSS written in the HTML file increases the overall size of the HTML document, which can slow down page loading.
  5. Poor Separation of Concerns
    It mixes content (HTML) and design (CSS) in the same file, making the code harder to organize and maintain.

3. External CSS

  • CSS is written in a separate file with .css extension.
  • This file is linked using <link> tag in the <head> of HTML.

Syntax (in HTML file):

<head>
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

This line is used to connect your HTML page with a CSS file so that you can style your website using that CSS file.

<link>
  • This is an HTML tag.
  • It is self-closing (doesn’t need an end tag like </link>).
  • It is used to link external resources (like CSS files) to your HTML file.
rel="stylesheet"
  • rel means relationship.
  • "stylesheet" tells the browser that the file we are linking is a CSS file used for styling.
type="text/css"
  • This tells the browser what type of file it is.
  • "text/css" means it’s a CSS file written in text format.
  • It’s technically optional now in modern HTML because browsers assume this by default, but it’s still valid.
href="style.css"
  • href means hyperlink reference.
  • It tells the browser where to find the CSS file.
  • "style.css" is the name of the CSS file we are linking.
    It must be in the same folder as your HTML file.

Example style.css:

p {
  color: red;
  font-size: 18px;
}

Use Case:

  • Best for larger websites
  • Code is clean, organized, and reusable

Advantages:

  • Easy to maintain
  • One file can style multiple pages
  • Reduces HTML file size

Components of CSS:

components of CSS
PartExplanationExample
SelectorTells which HTML element to targetp, h1, .box, #main
PropertyWhat style you want to change (like color, font)color, font-size, margin
ValueHow you want the style to appearblue, 20px, center
DeclarationOne line of property and valuecolor: red;
Rule SetFull block of selector and declarationsp { color: red; }

Example:

  p {
  color: blue;
  font-size: 18px;
}

Explanation:

  • p:  This means apply styles to all <p> tags
  • color: blue; : Makes the text color blue
  • font-size: 18px;: Sets the font size to 18 pixels

Conclusion

Understanding CSS is fundamental to modern web development. While HTML provides the structural foundation of a webpage and JavaScript adds dynamic behavior, CSS controls how everything looks and feels.

It separates content from design, making web pages more manageable, scalable, and visually consistent.

By learning the different types of CSS—inline, internal, and external—you gain flexibility in how you apply styles based on your project’s needs.

Grasping CSS syntax, including selectors, properties, and values, is the first step toward building responsive, professional, and maintainable web interfaces.

Mastering these basics lays the groundwork for advanced topics like layout systems, animations, and responsive design.

Most Important Questions

1. Why is CSS used when HTML can already display text and images on a page?

HTML only defines what elements exist on a page, but it cannot define how they should appear. CSS is used to control the appearance, like layout, color, size, spacing, and font. This separation helps in making design changes without touching the content.

2. How does separating CSS from HTML help in maintaining a website?

When CSS is in a separate file, changes can be made in one place and reflect across all HTML pages. This reduces repetition, keeps code cleaner, and makes long-term maintenance easier.

3. If HTML defines the structure and CSS defines the style, why not combine them into one file always?

Combining them using inline or internal CSS makes the HTML bulky and hard to manage. External CSS keeps style logic centralized, reduces file size, and improves performance through caching.

4. When should a developer choose inline CSS instead of external or internal CSS?

Inline CSS can be used for quick testing or when one specific element needs a unique style that won’t be reused. It should be avoided in long-term projects due to poor maintainability.

5. How can multiple elements on different pages share the same design without repeating code?

By writing the styles once in an external CSS file and linking that file to all the HTML pages. This allows all elements with the same class or tag to inherit the same style automatically.

6. How does CSS syntax ensure that browsers correctly apply styles to elements?

CSS uses a fixed structure: selector, property, and value. This format allows the browser to know exactly which element to target, what aspect of the style to change, and how it should look.

7. What happens if a CSS rule is missing a closing brace or semicolon?

The browser will ignore that rule or stop reading the CSS at the point of the error. This can cause styles to break or not apply correctly, so proper syntax is necessary for reliable rendering.

8. How can you apply the same CSS rule to multiple types of elements in one line?

By separating selectors with commas in the CSS rule. For example, h1, h2, p { color: blue; } applies the same color to all h1, h2, and p elements.

9. What is the benefit of writing multiple properties inside a single CSS rule set?

It allows complete styling of an element in one place, making the code more readable and organized. For example, font size, color, and margin can all be applied in one block for a tag.

10. Why is it important to learn and understand CSS syntax before writing real-world styles?

Without knowing the correct structure and usage, styles may not apply or behave as expected. Understanding syntax helps avoid bugs and makes your CSS compatible across all browsers.

📣 Follow us for more updates:

Follow on LinkedIn Join WhatsApp Channel
Scroll to Top