CSS Fundamentals

This guide covers essential concepts of CSS, designed for beginners and as a quick reference for developers looking to strengthen their foundational knowledge.

📜 What is CSS?

CSS (Cascading Style Sheets) is the language used to define the look and feel of a web page. It controls the layout, colors, fonts, and other visual elements of a website. CSS is an essential part of web development alongside HTML and JavaScript. While HTML is responsible for structuring content, CSS is used for styling it, and JavaScript adds interactivity.

CSS provides the styling and visual presentation for the HTML structure.

🕰️ History of CSS

CSS was first introduced in 1996 by Håkon Wium Lie, an innovator in web design, alongside the development of HTML. Prior to CSS, HTML was used to style pages using tags like <font>, <center>, etc. CSS enabled the separation of content from presentation, providing greater flexibility, control, and efficiency in web design.

The first version of CSS that allowed basic styling capabilities like font, color, and layout.

Introduced more advanced features, such as absolute positioning and the ability to style media types.

Expanded the language to include new features like transitions, animations, and flexible layouts.

✍️ CSS Syntax

CSS syntax consists of selectors and declarations. A basic CSS rule is written like this:

selector {
  property: value;
}

Selector: Defines which HTML element is being targeted (e.g., p, .class-name, #id-name).
Property: Specifies which style is being applied (e.g., color, font-size, margin).
Value: Defines the specific value for the property (e.g., red, 16px, 20px).

For example:

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

This will make all <p> elements have blue text and a font size of 16px.

🖋️ Inline, Internal, and External CSS

CSS can be applied in three ways:

Inline CSS

Inline CSS is applied directly within an HTML element using the style attribute:

<p style="color: red;">This text is red.</p>

Internal CSS

Internal CSS is placed within the <style> tag in the <head> section of the HTML document:

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

External CSS

External CSS is linked through an external .css file:

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

External CSS is the most efficient way to apply styles, as it keeps your HTML clean and allows styles to be reused across multiple pages.

🧑‍💻 CSS Cascade and Specificity

The CSS cascade is the order in which styles are applied to an element. It follows a hierarchy of importance and applies styles from the most specific to the least specific.

Inline styles have the highest specificity.
ID selectors are more specific than class selectors.
Class selectors are more specific than element selectors.

When two styles conflict, the more specific rule wins. If they have the same specificity, the latter one in the CSS file wins.

For example:

p {
  color: blue;
}
 
#special {
  color: green;
}
 
<p id="special">This text will be green.</p>

In this case, the text will be green because the ID selector #special is more specific than the element selector p.

🧪 Try Yourself

import './styles.css';

function App() {
return (
  <div className="App">
    <h1>Hello, CSS World!</h1>
    <p>This is a basic example of how CSS works with React.</p>
  </div>
);
}

export default App;

Open Sandbox

🎯 Conclusion

CSS is a powerful tool for styling web pages and plays an essential role in modern web development. Understanding the basics like CSS syntax, selectors, and how the cascade and specificity work are key to mastering the language. As you continue your journey with CSS, learning advanced features like Flexbox, Grid, and animations will further enhance your web design skills.

CSS Fundamentals

On this page