CSS Guide – Introduction, First Steps, and Further Reading

A guided journey to understand what CSS is, why it is important, and how to start using it correctly.

What is CSS and what is it for
From "what is it" to "how to use it"
Chapter 1 – How to connect CSS to HTML
Chapter 2 – CSS Selectors and Specificities
Chapter 3 – Fundamental Properties of CSS
Insights

🔗 Do you like Techelopment? Check out the site for all the details!

What is CSS and what is it used for

CSS (Cascading Style Sheets) is the language that defines the graphic appearance of web pages. While HTML deals with structure and content, CSS controls presentation and style: colors, fonts, spacing, layout, transitions, and animations.

Improve readability: Typography and spacing make content clearer.
Separate content and style: Tidier, easier-to-maintain code.
Reusable: The same style sheet can serve multiple pages.
Responsive: Design that adapts to different screens and devices.

Quick example

HTML without CSS:

<h1>Welcome</h1>
<p>This is an unstyled page.</p>

HTML with a touch of style (inline for demonstration):

<h1 style="color: blue; text-align: center;">Welcome</h1>
<p style="font-size: 18px; color: gray;">This is a styled page!</p>

From "what it is" to "how to use it"

Knowing that CSS "dresses" HTML is the beginning. To use it well, you need to learn: how to link it to pages, how to select the right elements, and which properties to apply to achieve the desired result. In the next chapters, you'll see the first fundamental steps, with examples and best practices.

Chapter 1 – How to Link CSS to HTML

There are three main methods, each with pros and cons. In real projects, you'll almost always use the external style sheet.

1) Inline CSS (in the `style` attribute)

Write declarations directly on the element. Useful for testing or micro-overriding, not recommended long-term.

<p style="color: red; font-weight: bold;">Bold red text</p>

Pros: Very fast, no external files required.
Cons: Difficult to maintain; very high specificity; mixes structure and style.

2) Internal CSS (`<style>` block in the <head>)

Useful for isolated pages, HTML emails, or single-page prototypes.

<head>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; } 
    p { color: #333; } 
  </style>
</head>

3) External CSS (.css file linked with `<link>`)

This is approach cRecommended for websites and apps: Cleanly separate content and styles, enable caching and reuse.

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

Recommended file structure

/assets/css/
   base.css /* reset/normalize, variables, basic typography */
   components.css /* buttons, cards, badges, etc. */
   layout.css /* grids, containers, header/footer */
   pages.css /* any page-specific rules */

Best Practices

Prefer external CSS for maintenance and performance (browser caching).
Avoid inlining except in exceptional cases (AB testing, HTML emails, small fixes).
Organize rules by responsibility (base, components, layout).
Use absolute or correct relative paths for CSS files and resources (images, fonts).

Chapter 2 – CSS Selectors and Specifics

Selectors tell the browser which elements should be styled. Understanding specificity avoids conflicts and “visual bugs.” Remember: the more “targeted” the selector, the more weight it has.

Basic Selectors

Per element: affects all tags in the element.

p { color: blue; }

Per class: reusable across multiple elements.

.highlighted { background: yellow; }
<p class="highlighted">Highlighted text</p>

By ID: Must be unique on the page.

#title { font-size: 24px; }
<h1 id="title">Homepage</h1>

By attribute: Filter based on the presence/value of the attribute.

input[type="text"] { border: 1px solid #aaa; }

Advanced combinators and selectors

/* Descendant (space) */
article p { margin-bottom: 1rem; }

/* Direct child (>) */
nav > a { text-decoration: none; }

/* Adjacent sibling (+) */
h2 + p { margin-top: -0.25rem; }

/* Generic siblings (~) */
.card ~ .card { margin-top: 1rem; }

/* Pseudo-classes and pseudo-elements */
button:hover { transform: translateY(-1px); }
input:focus { outline: 2px solid #5b9; }
p::first-line { text-transform: uppercase; }

Specificity in Brief

Specificity determines which rule wins when multiple rules hit the same element. Order (from strongest to weakest - hence the name "cascading"):

Inline styles (e.g., style="...")
ID selectors (e.g., #header)
Classes / pseudo-classes / attributes (e.g., .btn, :hover, [type="text"])
Elements / pseudo-elements (e.g., p, ::before)

The lowest declared rule (with the same specificity) overwrites the previous one thanks to the "cascade".

Example of a resolved conflict

p { color: black; } /* low specificity */
.highlight p { color: green; } /* more specific (class + element) */
#main p { color: purple; } /* even more specific (ID + element) */

Important Notes

!important forces the rule but should be used rarely: it complicates debugging.
Inheritance propagates some properties (e.g., font-family, color) to children.
Prefer simple and predictable selectors; avoid very long chains.

Chapter 3 – Fundamental CSS Properties

Properties are the “instructions” applied to elements. Here you'll find the ones you'll use every day, with examples and practical tips.

Color and Background

p {
  color: #333; /* text color */
  background-color: #f7f7f7; /* background color */
  background-image: url('/img/pattern.png'); /* background image (optional) */
  background-repeat: repeat;/* repeat | no-repeat | repeat-x | repeat-y */ 
  background-position: center; /* position */ 
  background-size: cover; /* cover | contain | car */
}

Typography

body { 
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; 
  font-size: 16px; /* base size */ 
  line-height: 1.6; /* line height for readability */ 
  letter-spacing: 0; /* letter spacing (usually 0) */
}
h1 { font-size: clamp(2rem, 3vw, 3rem); } /* fluid and responsive title */
em { font-style: italic; }
strong { font-weight: 700; }

Box model: margin, padding, border

.card { 
  box-sizing: border-box; /* include padding+border in width calculation */ 
  width: 100%; 
  max-width: 640px; 
  margin: 1rem auto; /* outer space */ 
  padding: 1rem; /* internal space */ 
  border: 1px solid #ddd; /* edge */ 
  border-radius: 12px; /* rounded corners */
}

Display and flow

.badge { display: inline-block; padding: .25rem .5rem; }
.block { display: block; }
.inline { display: inline; }
.hidden { display: none; }

Dimensions and useful units

.container {
  width: min(90vw, 1200px); /* maximum limit and viewport adaptation */
  min-height: 50vh; /* 50% of viewport height */
}
:root {
  --sp: 1rem; /* base space variable */
}
.section { padding: calc(var(--sp) * 2); }

Interactive states and transitions

.btn {
  background: #0a66c2;
  color: white;
  padding: .75rem 1rem;
  border-radius: 8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.btn:active { transform: translateY(0); }

Visual Accessibility

Make sure you have sufficient contrast between text and background (WCAG AA).
Don't rely on color alone to communicate states (use icons/text too).
Keep :focus visible for interactive elements.

:focus-visible {
  outline: 3px solid #5ab;
  outline-offset: 2px;
}

Common mistakes to avoid

Forgetting box-sizing: border-box; and messing up layout calculations.
Using !important as a shortcut: creates technical debt.
Too specific or nested selectors: makes overriding difficult.
Incorrect units (px everywhere): evaluate rem, em, vw, vh for responsiveness.

Insights

Want to go beyond the basics? Here's a collection of thematic articles to explore advanced CSS concepts and improve your frontend design.

Responsive Design – Practical techniques for adapting sites to desktops, tablets, and smartphones.
Viewport – What it is, how it works, and why it's essential for responsive design.
Media Query– Adapt layouts, fonts, and images to different screen widths.
Techniques for Centering a Div– Always a hot topic 😀.
Box shadow and Drop shadow– Shadows for boxes and images, with examples of modern and realistic effects.
CSS Variables – How to create and reuse variables (--variable) for cleaner, more modular code.
Custom CSS Properties – How to create custom CSS properties.
Units of Measurement – Difference between px, em, rem, vh, vw and modern related units.
Pixels in CSS should be avoided – Don't worry.. I'll explain why.
Function attr() – How to read values from HTML attributes directly in CSS.
Directive @view-transition – Create smooth transitions between pages and states with the new CSS standard.

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog