CSS Modules
CSS (Cascading Style Sheets) is a language used to style and layout web pages. It controls the color, font, spacing, positioning, and many other aspects of HTML elements.
CSS syntax consists of a selector and a declaration block:
property: value;
}
Example:
Selectors are used to target HTML elements. Common selectors:
- Element selector:
p - Class selector:
.classname - ID selector:
#idname - Universal selector:
* - Attribute selector:
input[type="text"]
Comments in CSS are written like this:
Colors can be defined using names, HEX, RGB, RGBA, HSL, and HSLA values.
color: #ff0000;
color: rgb(255,0,0);
color: rgba(255,0,0,0.5);
color: hsl(0, 100%, 50%);
The box model describes the design and layout of elements:
- Content
- Padding
- Border
- Margin
Links can be styled using the :link, :visited, :hover, and :active pseudo-classes.
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: green; }
Lists can be styled using list-style-type, list-style-image, etc.
ol { list-style-type: upper-roman; }
Tables can be styled for borders, spacing, and more:
th, td { padding: 8px; }
CSS comments are ignored by browsers and help document your code:
Control how elements are displayed and positioned:
- display: block, inline, inline-block, flex, grid, none
- position: static, relative, absolute, fixed, sticky
- z-index: controls stacking order