CSS (Cascading Style Sheets)
CSS, or Cascading Style Sheets, is a stylesheet language used to define the look and layout of a webpage. It is a cornerstone technology of the web, alongside HTML and JavaScript, and allows you to control how HTML elements are displayed on a screen, paper, or in other media.
Key Features of CSS:
- Styling:
- CSS applies styles like colors, fonts, margins, borders, padding, and more to HTML elements.
- It can transform a plain HTML structure into a visually appealing design.
- Separation of Content and Design:
- HTML is used for content structure, while CSS handles the presentation. This separation simplifies web design and maintenance.
- Responsive Design:
- CSS enables responsive layouts using techniques like media queries, which adapt web pages to various screen sizes and devices.
- Selectors:
- CSS uses selectors to target HTML elements. Common types include:
- Element selector:
p(targets all<p>tags) - Class selector:
.classname(targets elements with a specific class) - ID selector:
#idname(targets elements with a specific ID) - Universal selector:
*(targets all elements)
- Element selector:
- CSS uses selectors to target HTML elements. Common types include:
- Box Model:
- CSS treats each HTML element as a rectangular box consisting of four areas: content, padding, border, and margin.
- Cascade and Specificity:
- Styles can “cascade” from multiple sources (e.g., external stylesheets, internal
<style>tags, inline styles). - Specificity determines which styles are applied if there’s a conflict.
- Styles can “cascade” from multiple sources (e.g., external stylesheets, internal
Types of CSS:
- Inline CSS: Defined directly within an HTML element using the
styleattribute. - Internal CSS: Written within a
<style>tag in the<head>section of an HTML document. - External CSS: Saved in a
.cssfile and linked to an HTML file.
Example:
HTML:
CSS (styles.css):
Advanced Features:
- Animations: With
@keyframesand animation properties. - Flexbox and Grid: Modern layout techniques for complex designs.
- Custom Properties (Variables): Reusable values defined with
--variable-name.