Glossary
HTMLCSSJavaScriptPythonSwiftTypeScriptSQLReact

CSS

What is CSS: Syntax, Usage, and Examples

CSS (Cascading Style Sheets) lets you control the look and feel of a website. It styles HTML elements by defining colors, fonts, layouts, and animations. Without CSS, web pages would be plain and unstyled.

How to Use CSS

You can apply CSS in three ways: inline, internal, and external. Each method affects how you manage styles across your project.

1. Inline CSS (Directly in an HTML Element)

You apply inline CSS inside an HTML tag using the style attribute. 

<p style="color: blue; font-size: 18px;">This text is styled with inline CSS.</p

Inline CSS works well for quick changes, but it’s not practical for large projects because it makes styles hard to manage.

2. Internal CSS (Inside an HTML File)

You define internal CSS inside a <style> block within the <head> section of an HTML file. 

<head>
  <style>
    p {
      color: green;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>This paragraph is styled using internal CSS.</p>
</body>

Internal CSS is helpful when styling a single page, but it’s not ideal for multi-page websites since you’d have to duplicate styles in each file.

3. External CSS (In a Separate File)

The best way to manage CSS for a website is to store styles in an external file. This keeps HTML clean and makes styling consistent across multiple pages. 


/* styles.css */
h1 {
  color: red;
  font-family: Arial, sans-serif;
}


<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Styled using an external CSS file.</h1>
</body>

External CSS makes your site easier to maintain and improves performance by allowing browsers to cache stylesheets.

When to Use CSS

You should use CSS whenever you want to enhance the design and usability of a website.

1. Consistent Styling Across Pages

Instead of repeating styles in each HTML file, you can use CSS to keep elements like headers, footers, and buttons consistent.

2. Making Websites Responsive

With CSS, you can create layouts that adapt to different screen sizes. Media queries let you define styles for desktops, tablets, and mobile devices. 

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

3. Adding Animations and Effects

CSS can animate elements without JavaScript. 

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

button {
  animation: fadeIn 2s ease-in-out;
}

4. Customizing Forms and Buttons

You can make forms and buttons match your website’s style. 

input {
  border: 2px solid #333;
  padding: 8px;
  border-radius: 5px;
}

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

5. Improving Readability

CSS lets you fine-tune typography, making content easier to read. 

p {
  font-size: 16px;
  line-height: 1.6;
}

Examples of CSS

Changing Text Color and Size 

h1 {
  color: purple;
  font-size: 30px;
}

Creating a Flexbox Layout

Use display: flex to create a flexible layout, allowing elements to align dynamically within the container. 

.container {
  display: flex;
  justify-content: space-between;
}

Adding a Hover Effect to Buttons

Improve user interaction by changing the button's background color when hovered over. 

button:hover {
  background-color: darkblue;
}

Learn More About CSS

What is CSS Used For?

CSS makes websites look polished and professional. You can use it to:

  • Define colors, fonts, and spacing.
  • Create responsive layouts.
  • Add animations and transitions.
  • Customize user interfaces.

What is the HTML Tag?

An HTML tag is a keyword enclosed in angle brackets (< >) that defines elements on a page. CSS uses these tags as selectors to apply styles.

Example: 

h1 {
  color: red;
}

What is CSS Code?

CSS code consists of rules that tell the browser how to display HTML elements. Each rule has:

  • Selectors (which elements to style).
  • Properties (what to change).
  • Values (how to style it).

Example: 

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

What is a CSS File?

A CSS file (.css) contains style rules for multiple web pages. You link it to HTML files to keep styles organized.

Example of linking a CSS file: 

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

What is CSS Profile?

A CSS profile refers to a specialized set of styles for different media types, like print or mobile.

Example of print-specific CSS: 

@media print {
  body {
    font-size: 12pt;
  }
}

What is CSS Abstraction?

CSS abstraction helps you write cleaner, reusable styles. You can use CSS Variables, SASS, or BEM (Block Element Modifier) to structure styles better.

Example using CSS Variables: 

:root {
  --primary-color: blue;
}

h1 {
  color: var(--primary-color);
}

What is a CSS Snippet?

A CSS snippet is a small, reusable piece of code that simplifies styling tasks.

Example of a responsive navigation bar: 

.navbar {
  display: flex;
  justify-content: space-between;
}

What Does Embedded CSS Do?

Embedded CSS (internal CSS) applies styles within an HTML document using the <style> tag.

Example: 

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

What is the Inline Method for CSS Styles?

Inline CSS applies styles directly inside an HTML tag.

Example: 

<p style="color: red;">This paragraph is styled with inline CSS.</p>

What is Custom CSS?

Custom CSS lets you override default styles and create personalized designs.

Example of overriding styles: 

body {
  background-color: black;
  color: white;
}

What is CSS in Web Design?

CSS is essential in web design for structuring layouts, animations, and responsiveness. Frameworks like Bootstrap and Tailwind CSS simplify CSS styling.

As AI continues to influence web design, developers are exploring AI-powered styling techniques and automation. If you're interested in this evolving field, check out our AI-Driven Development course.

Example using Bootstrap: 

<button class="btn btn-primary">Click Me</button>

Best Practices for Writing CSS

  • Use external stylesheets for maintainability.
  • Avoid inline styles unless necessary.
  • Use classes instead of styling individual elements.
  • Organize styles with comments.
  • Test responsiveness with media queries.

CSS transforms a plain HTML document into an interactive, visually appealing website. Whether you’re applying simple styles or building a complex layout, mastering CSS helps you create a seamless and engaging user experience.

If you’re ready to improve your styling skills, check out our CSS course for hands-on practice with real-world examples.

Learn CSS for Free
Start learning now
button icon
To advance beyond this tutorial and learn CSS by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.

Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.

You can code, too.

Company

Careers

Blog

Jobs

Product

Glossary

Code Compilers

Terms of Use

Privacy Policy

Useful

Press Kit

Imprint

Help

Follow us

© 2025 Mimo GmbH