Scribd
Upload
4 views

Detailed CSS Tutorial

Uploaded by

fortunedako2
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Detailed CSS Tutorial

Uploaded by

fortunedako2
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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.

You might also like