Css

CSS Cheat Sheet: A Quick Guide to Styling Web Pages

This CSS cheat sheet provides a concise reference for common CSS selectors, properties, and values, enabling you to quickly style and enhance the appearance of your web pages.

CSS Basics

• Cascading Style Sheets (CSS): CSS is a language that defines the presentation of web pages, controlling elements like layout, colors, fonts, and animations. It works in conjunction with HTML to create visually appealing websites.

• Syntax: CSS uses a simple syntax:

  selector {
      property: value;
      property2: value2;
  }

  • Selector: Specifies the HTML element(s) to be styled.

  • Property: Defines the specific style attribute to be modified.

  • Value: Sets the desired value for the property.

CSS Selectors

Selectors target specific HTML elements for styling.

Selector	Usage
*	Universal selector — targets all elements.
p	Type selector — targets all <p> elements.
#header	ID selector — targets the element with ID header.
.button	Class selector — targets all elements with class button.
a[href]	Attribute selector — targets <a> elements with an href attribute.
nav ul	Descendant selector — targets ul inside nav.
nav > ul	Child selector — targets only direct child ul of nav.
p + span	Adjacent sibling selector — targets span directly after p.
p ~ span	General sibling selector — targets all span after p.
:hover	Pseudo-class — applies style when an element is hovered.
:focus	Pseudo-class — applies style when an element is focused.
:nth-child(2)	Pseudo-class — applies style to the second child element.
:not(span)	Pseudo-class — targets all elements that are not span.

CSS Properties

Property	Usage
Font:
font-family	Specifies the font to use (e.g., Arial, sans-serif).
font-size	Sets the font size (e.g., 16px, 1.2em).
font-weight	Sets font weight (e.g., bold, normal, lighter).
font-style	Defines font style (e.g., italic, normal).
Text:
color	Sets text color (e.g., #333, red).
text-align	Aligns text (left, center, right, justify).
text-decoration	Adds or removes text decoration (underline, none).
text-transform	Changes text case (uppercase, lowercase, capitalize).
Background:
background-color	Sets the background color of an element.
background-image	Adds a background image (e.g., url('image.jpg')).
background-repeat	Controls background image repetition (repeat, no-repeat).
background-position	Positions background image (e.g., top left, center).
Box Model:
margin	Sets space outside an element.
padding	Sets space between content and border.
border	Defines border (1px solid black).
Positioning:
position	Controls positioning (static, relative, absolute, fixed).
top, right, left, bottom	Sets offset relative to parent or viewport.
Display:
display	Defines how an element is displayed (block, inline).
Float:
float	Floats element to left or right (left, right).
Visibility:
visibility	Controls element visibility (visible, hidden).
Other:
width, height	Sets element dimensions (100px, 50%).
max-width, max-height	Sets maximum dimensions.
min-width, min-height	Sets minimum dimensions.
z-index	Controls stacking order of elements.

CSS Units

Unit	Type	Usage
px	Absolute Unit	Pixels, fixed size.
pt	Absolute Unit	Points, 1/72 inch.
cm, mm, in	Absolute Unit	Centimeters, millimeters, inches.
em	Relative Unit	Relative to parent font size.
rem	Relative Unit	Relative to root font size.
%	Relative Unit	Percentage of parent size.