1.
Introduction to CSS
What is CSS?
CSS (Cascading Style Sheets) is used to style and layout web pages. It describes how HTML
elements should be displayed on screen, paper, or other media.
CSS is responsible for the visual design of web pages, including color, font, spacing, layout,
and even animations.
How CSS Works:
Inline CSS: You can add CSS directly to an HTML element using the style attribute.
Internal CSS: You can include CSS within the HTML document using the <style> tag inside the
<head> section.
External CSS: The best practice is to link an external CSS file to the HTML using the <link> tag
inside the <head>.
CSS Syntax: A CSS rule consists of a selector and a declaration block. The selector points to
the HTML element(s), and the declaration block contains one or more declarations separated
by semicolons.
2. Selectors
Basic Selectors:
Element Selector: Targets all instances of an element.
Class Selector: Targets elements with a specific class. Classes are reusable.
css
html
ID Selector: Targets a unique element with a specific ID. IDs should be unique on a page.
css
html
Grouping and Nesting:
Grouping Selectors: Apply the same styles to multiple elements.
Nesting Selectors: Target elements inside another element.
Advanced Selectors:
Pseudo-classes: Style an element based on its state (e.g., :hover, :nth-child).
Attribute Selectors: Select elements based on their attributes.
3. Box Model
The box model is crucial to understanding how elements are laid out on a webpage.
Components of the Box Model:
1. Content: The actual content of the box (text, images).
2. Padding: The space between the content and the border. It makes the content area larger.
3. Border: The edge surrounding the padding (or the content if no padding is specified).
4. Margin: The space outside the border. It separates the element from its neighbors.
Width and Height:
The width and height properties affect the content area only (excluding padding, border, and
margin).
Overflow:
Defines what happens if the content inside an element overflows its set dimensions.
4. Layout Basics
Display Property:
block: The element takes up the full width of its container and starts on a new line.
inline: The element takes up only as much width as needed and does not start on a new line.
inline-block: Like inline, but you can set width and height.
none: The element is hidden and does not take up any space in the layout.
Positioning:
static: The default position, where elements follow the normal document flow.
relative: The element is positioned relative to its normal position.
absolute: The element is positioned relative to its nearest positioned ancestor.
fixed: The element is positioned relative to the browser window and stays fixed during
scrolling.
sticky: The element toggles between relative and fixed based on the user's scroll position.
Float and Clear:
float: Elements float to the left or right of their container, allowing text and other elements
to wrap around them.
clear: Prevents elements from wrapping around floated elements.
5. Styling Text
Typography:
Font-family: Defines the font to be used.
Example: font-family: Arial, sans-serif;
Font-size: Specifies the size of the font.
Example: font-size: 16px;
Line-height: Defines the space between lines of text.
Example: line-height: 1.5;
Letter-spacing: Controls the space between letters.
Example: letter-spacing: 2px;
Text Alignment:
Text-align: Aligns text within its container.
Example: text-align: center;
Text Colors:
Colors: Set using different formats like hex (#ff0000), RGB (rgb(255,0,0)), or named colors
(red).
Example: color: #333;
background-color: lightblue;
Google Fonts:
Importing fonts from Google Fonts:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
Example: font-family: 'Roboto', sans-serif;
6. Styling Links, Lists, and Forms
Links:
Links can be styled using pseudo-classes like :hover, :visited, :active.
Lists:
Unordered lists (bulleted): Style bullets and spacing.
Ordered lists (numbered): Change the numbering style.
Forms:
Input Fields: Styling text boxes, checkboxes, and radio buttons.
Buttons: Add padding, background color, and hover effects to buttons.
