CSS Introduction

CSS

CSS (Cascading Style Sheets) controls how HTML elements look — colors, fonts, spacing, layout.

HTML = structure. CSS = design. Together they create beautiful web pages.

3 Ways to Add CSS

Inline — style attribute on element
Internal — <style> tag in <head>
External — separate .css file (recommended!)

Example — CSS

/* External CSS file: style.css */
h1 {
    color: #4f46e5;
    font-size: 2rem;
    text-align: center;
}

p {
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.6;
}

Result

Styled Heading

This paragraph is styled with CSS. Notice the color, size, and spacing.

NextCSS Selectors

Interview Questions — CSS Introduction

5 questions commonly asked in interviews

Q1 What is CSS? Beginner

CSS stands for Cascading Style Sheets. It is used to style HTML elements and control layout, colors, fonts, spacing, and design.

Q2 What are the types of CSS? Beginner

There are three types: inline CSS, internal CSS, and external CSS.

Q3 What is external CSS? Beginner

External CSS is written in a separate .css file and linked to HTML using the <link> tag.

Q4 What does cascading mean in CSS? Intermediate

Cascading means styles are applied based on priority, specificity, and order.

Q5 Why is CSS important? Intermediate

CSS separates design from content and makes websites attractive, responsive, and easier to maintain.

Frequently Asked Questions

Common doubts about CSS Introduction

Yes, HTML can work without CSS, but the page will look plain.

External CSS is best for large websites because it is reusable and easy to maintain.

Yes, multiple CSS files can be linked in one HTML document.

No, CSS is a stylesheet language used for presentation.

Yes, CSS media queries, flexbox, and grid help create responsive layouts.

Test Your Knowledge

5 questions · Earn 50 XP

0 / 5

Q1 What does CSS stand for?

Q2 Which tag links external CSS?

Q3 Which CSS type is written inside HTML tag?

Q4 Which property changes text color?

Q5 Which property changes background color?

More on CSS Introduction

Cheatsheet, tips, resources & what to learn next

Quick Cheatsheet

Inline CSS

<p style="color:red;">Hello</p>

Internal CSS

<style>
p { color: blue; }
</style>

External CSS

<link rel="stylesheet" href="style.css">

Text Color

p { color: red; }

Background Color

body { background-color: #f5f5f5; }

Pro Tips

Use external CSS for better maintainability.

Avoid too much inline CSS.

Keep CSS class names meaningful.

Use comments to organize large CSS files.

Use browser developer tools to test CSS quickly.

Resources

MDN CSS Basics Docs

W3Schools CSS Practice

freeCodeCamp CSS Practice

CSS Tricks Docs

CSS Full Course Video

Up Next

CSS Selectors CSS Colors CSS Box Model CSS Flexbox CSS Grid