CSS3-Session1

Introduction

CSS3 (early 2000s): instead of one big spec, it was split into modules (Selectors, Flexbox, Grid, Transitions, Animations, etc.).
Modern CSS (today): no CSS4 or “final version” — CSS is evolving continuously. Each module has its own level (Selectors Level 4, Media Queries Level 5, Grid Level 2, etc.).
CSS => Cascade Style Sheet " For Presentation And Visuals "
Prerequisite to CSS is HTML

What we need ?

Text Editor (VS Code)
Internet Browser (Google Chrome , Firefox)

Extention file .css like main.css

Where can I create CSS Code ?

External file
internal

in file inside <head> <style></style> </head>
inline inside the opening tage what you want style it like <p> tage

Full Priority Order (Simplified)

Inline styles with !important
Internal/External styles with !important
Inline styles
Internal styles between tag <style></style>
External styles
Browser default styles (lowest)

Selector & Comment

in CSS, comments are often used to:

Explain the code - for documentation
Sometimes using to ignor code to test or debug

Type of Comment :

Single Line /* .... * /
Multiple Line

Some Types of Selector :

Universal Selector (*) : Example: * { margin: 0; } Selects all elements on the page.
Type Selector (Element Selector) : Example: p { color: red; } Selects all elements of a specific HTML tag (e.g., all <p> tags).
Class Selector : Example .note { font-size: 14px; } Selects all elements with a given class.
ID Selector : Example: #header { background: blue; } Selects the single element with a specific id.
Group Selector : Example: h1, p, div { margin: 0; } Applies the same style to multiple selectors.
Descendant Selector : Example: div p { color: green; } Selects all <p> elements inside a .

Background

We will take a <div> as example to implement

background-color

The background-color property in CSS is used to set the background color of an element.
Default value is transparent.

background-color: red;
background-color: rgb(107, 5, 5); or background-color: rgba(107, 5, 5,50%);
background-color: #eee;

You can type color by hexadecimal like #eee , #1f1f1f
rgba : r -> Red color g -> Green color b -> Blur color a -> Alpha
The alpha value must be a number between (0 and 1), not a percentage.

There are many great websites for discovering and generating beautiful color palettes for your designs

linear-gradient

The linear-gradient() function in CSS is used to create smooth transition between two or more colors along a straight line (vertical, horizontal, diagonal, etc.).

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Examples :

background: linear-gradient(red, yellow);
background: linear-gradient(to right, red, yellow);
background: linear-gradient(45deg, red, blue, green);

background-image

background-image: url(./img/1.jfif) ;

background-repeat

background-attachment

background-position

background-size

background-repeat

background-repeat: no-repeat;
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

background-attachment

background-attachment: scroll; => default
background-attachment: fixed;

background-size

background-size: auto; => default
background-size: cover;stretch and cut
background-size:contain;fully visible
background-size: 100px 200px ; W H
background-size: 50% 80% ;

background-position

background-position: left top; => default
background-position: left center;
background-position: left bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: 20px 25px;
background-position: 50% 50%;

CSS 3

SESSION 1

Introduction

What we need ?

Where can I create CSS Code ?

Full Priority Order (Simplified)

Selector & Comment

in CSS, comments are often used to:

Type of Comment :

Some Types of Selector :

Background

We will take a <div> as example to implement

background-color

linear-gradient

background-image

background-repeat

background-attachment

background-size

background-position

Assignment

Challenge :