Introduction to CSS

What Is CSS?

CSS stands for Cascading Style Sheets. It is the language used to describe how HTML content should look when displayed in a browser. While HTML gives a page its structure and meaning, CSS controls visual details such as colors, fonts, spacing, borders, and layout.

Keeping presentation rules in a stylesheet makes it easier to maintain a consistent appearance across multiple pages. A single CSS file can style the homepage, articles, and other documents without repeating the same formatting in every HTML file.

How CSS Rules Work

A CSS rule normally contains a selector followed by a declaration block. The selector identifies which elements to style, and each declaration supplies a property and value. For example, p { color: blue; } makes the text in paragraph elements blue.

Selectors can target element names, classes, IDs, and other characteristics. A class selector such as .cta-button can style a particular group of links without changing every link on the page.

Adding CSS to HTML

CSS can be written in an external stylesheet, inside a <style> element, or directly on an HTML element using the style attribute. External stylesheets are especially useful when several pages share the same design.

This website uses an external stylesheet at /css/styles.css. Each page connects to it with a <link> element in the document's <head>. Because the path begins with a slash, the stylesheet can be found from pages in different directories.

The Cascade and Inheritance

The cascade is the process browsers use to determine which CSS declaration applies when more than one rule could affect the same element. Factors include the rule's origin, importance, specificity, and order.

Some properties, such as color and font-family, are inherited by child elements unless another value is specified. Understanding the cascade and inheritance helps explain why a page looks a certain way and makes styles easier to troubleshoot.

Layout, Spacing, and Responsive Design

CSS controls how elements are sized and positioned. The box model describes the content, padding, border, and margin of an element. Modern layout systems such as Flexbox and Grid make it possible to arrange content in rows, columns, and more complex patterns.

Responsive design allows a page to adapt to different screen sizes. Media queries can apply different rules depending on the available width or other device characteristics. On this website, the navigation changes from a horizontal menu to a collapsible hamburger menu on smaller screens.

How CSS Works with HTML and JavaScript

HTML identifies the content and structure of a document, CSS defines its presentation, and JavaScript can change content or respond to user interactions. Each technology has a different role, but they are often used together.

For example, the navigation links on this site are HTML elements. CSS determines their colors, spacing, and arrangement, while JavaScript opens and closes the mobile menu when its button is selected.

Continue Exploring Web Development

CSS makes it possible to give HTML pages a consistent visual design without changing the underlying content. Continue to the JavaScript article to learn how websites can respond to user actions.