Scribd
Upload
8 views

Detailed CSS Tutorial

Uploaded by

fortunedako2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Detailed CSS Tutorial

Uploaded by

fortunedako2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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