CSS Basic Concepts
Before diving deep into CSS syntax, it's crucial to understand some core concepts behind it. These concepts form the foundation of how CSS works.
1. Cascade
"Cascade" is the source of CSS's name and one of its most important features. It defines how to resolve conflicts when multiple style rules apply to the same element, determining which style takes effect. The cascade follows a priority order:
- Origin: Browser default styles < User custom styles < Developer-defined styles.
- Importance: Adding
!importantto a style rule makes it highest priority. For examplecolor: red !important;. - Specificity: Refers to the "precision" of a selector. The more specific a selector, the higher its priority. For example, an ID selector (
#my-id) has higher priority than a class selector (.my-class), and class selectors have higher priority than element selectors (div). - Source Order: If the above three rules are the same, the rule defined last in the stylesheet will take effect.
2. Inheritance
Inheritance means that child elements automatically get some CSS property values from their parent elements. This saves us from having to set styles individually for every element on the page.
- Inheritable properties: Usually text-related properties are inheritable, such as
color,font-family,font-size,line-height,text-align, etc. - Non-inheritable properties: Usually box model-related properties are non-inheritable, such as
width,height,padding,margin,border, etc.
For example, if you set a font color for the <body> element, all child elements on the page (like paragraphs, headings) will inherit this color by default, unless you specify other colors for them individually.
3. Box Model
In CSS, every HTML element can be seen as a rectangular box. This "box" consists of four parts, from inside to outside:
- Content: The core of the box, displaying actual content like text, images. Its size is controlled by
widthandheightproperties. - Padding: The transparent area surrounding the content area. It's located between content and border. Controlled by
paddingrelated properties. - Border: The lines surrounding the padding area. Controlled by
borderrelated properties. - Margin: The transparent area surrounding the border. It's used to control the distance between elements. Controlled by
marginrelated properties.
Understanding the box model is crucial for page layout.
4. Block-level vs. Inline Elements
HTML elements can generally be divided into two basic types:
Block-level Elements:
- Always start on a new line.
- Width defaults to 100% of their parent container.
- Can set
width,height,marginandpadding. - Common block-level elements include
<div>,<p>,<h1>-<h6>,<ul>,<li>,<form>, etc.
Inline-level Elements:
- Don't start a new line, display alongside other inline elements.
- Width is determined by their content.
- Usually cannot set
widthandheight. Verticalmarginandpaddingdon't work as expected. - Common inline elements include
<span>,<a>,<img>,<strong>,<em>, etc.