CSS CheatSheet
Guide
MASYNCTECH WWW.MASYNCTECH.COM
CSS (Cascading Style Sheets) Cheat Sheet
What is CSS? CSS is used to style and layout web pages. It controls the presentation of HTML
elements like text, images, and other content. Styles include colors, fonts, sizes, positioning,
and more.
Key Concepts:
Cascading: Defines which styles take priority based on specificity and order.
Style: Instructions that define how elements look (e.g., color, margin).
Sheets: The files where CSS rules are written (internal or external).
Ways to Use CSS:
1. Inline: Directly in the HTML element (style="color:red;").
2. Internal: Inside a <style> tag in the HTML head.
3. External: Linked in a separate .css file using <link>.
CSS Selectors:
Universal (*): Selects all elements.
Type: Targets specific HTML tags (e.g., h1, p).
Class (.classname): Targets elements with a specific class.
ID (#idname): Targets a unique element.
Attribute: Targets elements with specific attributes (e.g., input[type="text"]).
Pseudo-class: Selects elements based on state (e.g., :hover).
Pseudo-element: Styles specific parts of elements (e.g., ::before).
Box Model:
Content: The actual text or image.
Padding: Space between content and the border.
Border: The outline around the element.
Margin: Space outside the border, separating it from other elements.
CSS Positioning:
1. Static: Default, follows the document flow.
2. Relative: Moves relative to its normal position.
3. Absolute: Positioned relative to its nearest positioned ancestor.
4. Fixed: Stays fixed relative to the viewport (doesn't scroll).
5. Sticky: Sticks to a position as you scroll.
Flexbox:
Flex Container: Parent element that holds flex items.
Flex Items: The child elements inside the container.
Main Axis: The direction of item alignment (row or column).
Cross Axis: Perpendicular to the main axis.
Alignment: Controls how items are aligned along the axes.
CSS History Timeline:
1996: CSS1 introduced basic styles (fonts, margins).
1998: CSS2 added positioning and media types.
2004: CSS2.1 refined rules and improved consistency.
2011: CSS3 introduced animations, flexbox, and media queries.
2020s: CSS Grid, variables, and more advanced features continue to evolve.
