Introduction to CSS · Astro Tech Blog

CSS

CSS (Cascading Style Sheets) is the language used to style and layout web pages. While HTML provides the structure, CSS controls how that structure looks — colors, fonts, spacing, positioning, and more.

What Can CSS Do?

CSS can transform a plain HTML page into a visually engaging experience:

Demo: CSS in Action
HTML
<p class="plain">Plain HTML</p>
<p class="styled">Styled with CSS</p>
CSS
.plain {
font-size: 1rem;
color: #64748b;
}
.styled {
font-size: 1.5rem;
color: #6366f1;
font-weight: bold;
padding: 12px 20px;
background: #eef2ff;
border-radius: 8px;
border-left: 4px solid #6366f1;
}
Live Output Window

CSS is Declarative

You describe what you want, not how to do it. The browser figures out the rendering:

h1 {
  color: navy;
  font-size: 2rem;
  text-align: center;
}

This tells the browser: “Make all <h1> elements navy, 2rem, and centered.”

Separation of Concerns

CSS separates content (HTML) from presentation (styles). This makes code easier to maintain, reuse, and update.