What is CSS?
CSS (Cascading Style Sheets) is a language used to style HTML content. It controls the layout,
colors, fonts, spacing, and more, enhancing the presentation of web pages.
Syntax
A basic CSS rule consists of:
css
selector {
property: value;
For example:
css
p{
color: blue;
font-size: 16px;
Selectors
Universal Selector: * selects all elements.
Type Selector: Selects elements by tag name (e.g., p, h1).
Class Selector: . selects elements by class (e.g., .class-name).
1
ID Selector: # selects an element by ID (e.g., #id-name).
Descendant Selector: Selects elements within another element (e.g., div p).
Common Properties
Text Styling:
color: Changes text color.
font-family: Sets the font (e.g., Arial, Verdana).
font-size: Defines text size.
text-align: Aligns text (left, center, right).
Box Model:
width / height: Sets element dimensions.
margin: Spacing outside the element.
padding: Spacing inside the element.
border: Sets a border (e.g., 1px solid black).
2
Background:
background-color: Defines background color.
background-image: Adds a background image.
background-size: Resizes the background (cover, contain).
Positioning:
position: Specifies element positioning (static, relative, absolute, fixed).
top, left, right, bottom: Sets the element's position relative to its container.
Responsive Design
Use Media Queries to make designs adaptable:
css
@media (max-width: 768px) {
body {
font-size: 14px;