CSS Tutorial for Beginners
1. Introduction to CSS
- What is CSS?
CSS (Cascading Style Sheets) is used to style and layout web pages. It allows you to apply colors,
fonts, spacing, and much more to HTML elements.
- CSS Syntax:
CSS is written in rulesets that consist of a selector and a declaration block. Example:
p{
color: blue; --> This changes the text color of <p> elements to blue.
font-size: 16px; --> This changes the font size of <p> elements to 16 pixels.
- Selectors:
CSS Selectors are patterns used to select HTML elements based on their name, id, class, and
attributes.
- `p`: Selects all <p> elements.
- `#id`: Selects an element with a specific id (e.g., #header).
- `.class`: Selects all elements with a specific class (e.g., .btn).
Project: Create a Styled Webpage
- Objective: Create a simple webpage and apply CSS to style the text, colors, and layout.
2. Styling Text and Elements
- Colors:
You can set the color of text using the 'color' property. Example:
p{
color: red;
- Fonts:
The 'font-family' property defines the font type. You can also use 'font-size' and 'font-weight' to
adjust size and boldness.
Example:
p{
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
- Borders, Margins, and Padding:
- `border`: Sets a border around an element.
- `margin`: Creates space around elements.
- `padding`: Creates space inside elements, between the content and the border.
Project: Style a Card Component
- Objective: Create a card component with styled text, borders, margins, and padding.
3. The CSS Box Model
- What is the CSS Box Model?
Every HTML element is considered a box. The box model consists of the following parts:
- `Content`: The actual content of the box (e.g., text, images).
- `Padding`: Space between the content and the border.
- `Border`: A line surrounding the padding.
- `Margin`: Space outside the border.
- Width and Height:
You can control the size of elements using the 'width' and 'height' properties.
Example:
div {
width: 200px;
height: 100px;
border: 1px solid black;
Project: Design a Layout Using the Box Model
- Objective: Use the box model to design a webpage layout with content, padding, and margins.
4. Positioning and Layout
- Positioning:
The 'position' property allows you to control how elements are positioned on the page.
- `static`: Default position (normal flow of the page).
- `relative`: Positioned relative to its normal position.
- `absolute`: Positioned relative to the nearest positioned ancestor.
- `fixed`: Positioned relative to the browser window.
- Float and Clear:
'float' is used to allow elements to float next to each other. 'clear' is used to prevent elements from
wrapping around floated elements.
Project: Create a Fixed Navigation Bar
- Objective: Use CSS positioning to create a fixed navigation bar at the top of the page.
5. CSS Flexbox
- What is Flexbox?
Flexbox is a layout model that allows you to create flexible and responsive layouts. Flex containers
can align and distribute items within them.
- Example:
.container {
display: flex;
justify-content: center; --> Centers items horizontally.
align-items: center; --> Centers items vertically.
- Flex Properties:
- `flex-direction`: Defines the direction of the flex items (row, column).
- `justify-content`: Aligns items along the main axis (horizontal).
- `align-items`: Aligns items along the cross axis (vertical).
Project: Create a Responsive Photo Gallery
- Objective: Use Flexbox to create a responsive photo gallery that adjusts based on the screen size.
6. CSS Grid Layout
- What is CSS Grid?
CSS Grid is a powerful layout system that allows you to create complex and responsive grid-based
layouts.
- Example of a Basic Grid:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; --> Creates 3 equal columns.
gap: 10px; --> Adds space between grid items.
.grid-item {
background-color: lightblue;
padding: 20px;
- Grid Properties:
- `grid-template-columns`: Defines the number and size of columns.
- `grid-template-rows`: Defines the number and size of rows.
- `gap`: Defines the space between grid items.
Project: Build a Complex Webpage Layout Using CSS Grid
- Objective: Use CSS Grid to build a multi-section webpage layout with headers, footers, and
sidebars.
