CSS: The Presentation Layer
CSS is like the skin or clothes of a webpage. It styles the HTML elements to make them visually appealing.
Key Concepts:
- Selectors:
- CSS applies styles to HTML elements using selectors. A selector is a way to “select” the HTML elements you want to style.
- Example:
p { color: blue; }
- Here, the selector is
p
, and it applies the style to all<p>
elements on the page.
- Example:
- CSS applies styles to HTML elements using selectors. A selector is a way to “select” the HTML elements you want to style.
- Properties and Values:
- CSS comprises of properties (what you want to change) and values (how you want to change it). Example:
h1 { color: red; font-size: 30px; }
color
is the property andred
is the value.font-size
is the property and30px
is the value.
- CSS comprises of properties (what you want to change) and values (how you want to change it). Example:
- The Box Model:
- Every HTML element is treated as a box by the browser. The box model defines the size of these boxes. It consists of:
- Content: The actual content inside the element (text, images, etc.)
- Padding: Space between the content and the border.Border: The border around the padding and content.
- Margin: Space outside the border between this element and others. Example:
div { margin: 20px; padding: 10px; border: 1px solid black; }
- Visualizing the Box Model:
graph TD;
Margin --> Border;
Border --> Padding;
Padding --> Content;
- Every HTML element is treated as a box by the browser. The box model defines the size of these boxes. It consists of:
- Cascading:
- CSS stands for Cascading Style Sheets because styles can “cascade” from one rule to another.
- More specific rules override less specific ones. For example, a style applied directly to an element will override a style applied to the entire page.