> ## Documentation Index > Fetch the complete documentation index at: https://devtools.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Introduction to CSS > Learn the fundamentals of CSS, the styling language of the web ## What is CSS? CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. While HTML provides the structure of a webpage, CSS controls its visual appearance, including layout, colors, fonts, and animations. CSS separates content from presentation, allowing you to maintain and update the look of your website without changing the underlying HTML structure. ## How CSS Works CSS works by selecting HTML elements and applying styles to them. The browser reads the CSS rules and renders the HTML elements according to the specified styles. ```css theme={null} selector { property: value; another-property: another-value; } ``` * **Selector**: Targets the HTML element(s) to style * **Property**: The aspect of the element you want to change * **Value**: The specific setting you want to apply ## Ways to Include CSS There are three ways to include CSS in your HTML documents: Applied directly to individual HTML elements using the `style` attribute. ```html theme={null}

This is a blue paragraph.

``` Inline styles have the highest specificity but make your HTML cluttered and difficult to maintain. Use sparingly. Defined within a ` ``` Stored in a separate .css file and linked to the HTML document using the `` element. ```html theme={null} ``` And in your styles.css file: ```css theme={null} p { color: blue; font-size: 16px; } ``` External CSS is the best practice for most websites as it promotes separation of concerns, reusability, and easier maintenance. ## CSS Selectors Selectors are patterns used to select and style HTML elements. Here are some common types: ### Basic Selectors Selects all elements of a specified type. ```css theme={null} p { color: blue; } ``` Selects elements with a specific class attribute. ```css theme={null} .highlight { background-color: yellow; } ``` Selects a single element with a specific id attribute. ```css theme={null} #header { background-color: black; color: white; } ``` Selects all elements. ```css theme={null} * { margin: 0; padding: 0; } ``` ### Combinators Combinators explain the relationship between selectors: ```css theme={null} /* Descendant selector (space) */ div p { color: red; /* Selects all

inside any

*/ } /* Child selector (>) */ div > p { color: blue; /* Selects all

that are direct children of

*/ } /* Adjacent sibling selector (+) */ h1 + p { font-weight: bold; /* Selects

that directly follows an

*/ } /* General sibling selector (~) */ h1 ~ p { color: green; /* Selects all

that follow an

*/ } ``` ## CSS Properties CSS offers hundreds of properties to style elements. Here are some essential categories: ### Text Styling ```css theme={null} p { color: #333; /* Text color */ font-family: Arial, sans-serif; /* Font family */ font-size: 16px; /* Font size */ font-weight: bold; /* Font weight */ text-align: center; /* Text alignment */ line-height: 1.5; /* Line height */ text-decoration: underline; /* Text decoration */ } ``` ### Box Model Every HTML element is represented as a rectangular box with content, padding, border, and margin areas. ```css theme={null} div { width: 300px; /* Content width */ height: 200px; /* Content height */ padding: 20px; /* Space between content and border */ border: 2px solid #000; /* Border around the padding */ margin: 30px; /* Space outside the border */ } ``` ### Colors and Backgrounds ```css theme={null} div { color: #0066cc; /* Text color */ background-color: #f0f0f0; /* Background color */ background-image: url('bg.jpg'); /* Background image */ background-repeat: no-repeat; /* Control image repetition */ background-position: center; /* Position background image */ opacity: 0.8; /* Element transparency */ } ``` ## The Cascade and Specificity The "cascading" in CSS refers to the way styles are applied to elements. When multiple rules target the same element, the browser uses these principles to determine which styles to apply: 1. **Importance**: Styles marked with `!important` override other styles 2. **Specificity**: More specific selectors override less specific ones 3. **Source Order**: Later styles override earlier ones Specificity hierarchy (from lowest to highest): * Element selectors (`p`, `div`) * Class selectors (`.class`), attribute selectors (`[type="text"]`), pseudo-classes (`:hover`) * ID selectors (`#id`) * Inline styles (`style=""` attribute) ## Responsive Design with CSS Responsive design ensures your website looks good on all devices. Key techniques include: ### Media Queries ```css theme={null} /* Styles for screens smaller than 768px */ @media (max-width: 768px) { body { font-size: 14px; } .container { width: 100%; } } ``` ### Flexible Layouts ```css theme={null} /* Using percentages for responsive widths */ .container { width: 80%; max-width: 1200px; margin: 0 auto; } /* Using viewport units */ .hero { height: 100vh; /* 100% of viewport height */ width: 100vw; /* 100% of viewport width */ } ``` ## CSS Units CSS provides various units for expressing lengths: * `px` (pixels) * `pt` (points) * `in` (inches) * `cm` (centimeters) * `mm` (millimeters) * `%` (percentage of parent) * `em` (relative to font-size) * `rem` (relative to root font-size) * `vw` (viewport width) * `vh` (viewport height) For responsive design, prefer relative units like `rem`, `em`, and `%` over absolute units like `px`. ## Best Practices * Use external CSS files to separate content from presentation * Follow a consistent naming convention for classes (e.g., BEM methodology) * Organize your CSS with comments and logical grouping * Minimize specificity conflicts by keeping selectors simple * Use responsive design techniques for multi-device compatibility * Consider using CSS preprocessors like Sass or Less for larger projects ## Next Steps Now that you understand the basics of CSS, you can: * Learn more about [CSS Selectors](/css/selectors) and their power * Explore the [CSS Box Model](/css/box-model) in depth * Study [CSS Typography](/css/typography) for better text styling * Master [CSS Flexbox](/css/flexbox) and [CSS Grid](/css/grid) for advanced layouts