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!
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 CSS, HTML, and JavaScript
| Feature | HTML | CSS | JavaScript |
| Purpose | Creates structure and content | Applies design, layout, and visual styling | Adds interactivity and dynamic behavior |
| Language Type | Markup Language | Style Sheet Language | Programming Language |
| File Extension | .html | .css | .js |
| Browser Role | Tells browser what to show | Tells browser how it should look | Tells browser how it should behave |
| Example | <h1>Title</h1> | h1 { color: red; } | alert(“Hello”); |
| Executes | Parsed as markup | Parsed and applied during rendering | Executed by browser’s JavaScript Engine |
Types of CSS
1. Inline CSS
- CSS is written directly inside the HTML tag using the
styleattribute. - 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 beblue,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: valuepair.
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
- Applies to a Single Page Only
Internal CSS affects only the page where it is written. It cannot be reused across multiple HTML files. - 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. - Not Scalable for Large Projects
For big websites with many pages, managing internal CSS becomes difficult and inefficient. - Increases Page Size
CSS written in the HTML file increases the overall size of the HTML document, which can slow down page loading. - 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
.cssextension. - 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"
relmeans 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"
hrefmeans 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:
| Part | Explanation | Example |
| Selector | Tells which HTML element to target | p, h1, .box, #main |
| Property | What style you want to change (like color, font) | color, font-size, margin |
| Value | How you want the style to appear | blue, 20px, center |
| Declaration | One line of property and value | color: red; |
| Rule Set | Full block of selector and declarations | p { color: red; } |
Example:
p {
color: blue;
font-size: 18px;
}
Explanation:
p: This means apply styles to all<p>tagscolor: blue;: Makes the text color bluefont-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.