What is CSS ?

CSS Stand for Cascading Style Sheets. It is an incredibly powerful technology,

Which gives User experience of content matters and also gives wonderful look to
the web pages.
imp- 1em=16px=100%.

Favicons
Fevicon are the image added beside site title.
To create, convert any format to .ico in website-”favicon.io”

Anatomy of a CSS Rule

It is rule, how to declare CSS in HTML.

What is CSS ? 1
 Selectors

Element Selectors:
Here, When the selector P is given, all the paragraph in the code is affected, as
shown below.

Class Selectors:

What is CSS ? 2
 Here, only specific content is affected when the user declares as shown below.

id Selectors:
It is similar to that of Class selector and it is declared as show below.

Grouping Selectors:
Here two or more selectors are used as show in below.

What is CSS ? 3
 Combining Selectors:
1).Element with class selector:

2).Child Selector:

What is CSS ? 4
 3). Descending Selector

Pseudo-Class Selectors:
Used to style links.

What is CSS ? 5
 Types of Pseudo-class Selectors are:

1) :link

2) :visited

3) :hover
4) :active

5) :nt-child (…….)

:link Selector & :visited Selector

:link selector does’nt style links you already visited where as :visited selector
styles the links to visited pages. Make practice to use both at a time, as shown
below.

a:link, a:visited{
..........
}

:hover Selector & :active Selector

:hover selector is used to style links when we move mouse curser over them
where as :active selector is used to style links when we click them.

What is CSS ? 6
 a:hover, a:active{
..................
}

:nth-child Selectors
It is used to style target link

section div:nth-child(3)
{
background-color: gray;
}

Conflict Resolution
When the CSS declaration is same for that one element, then the conflict arises.

Types of conflict resolution

1. Origin

2. inheritance

3. merge

4. specificity

1.Origin
In origin conflict resolution, the last declaration wins.

2.Inheritance

What is CSS ? 7
 3.Specificity

What is CSS ? 8
 Styling Text & CSS sizing
In dynamic font sizing 1em=100%=16px.

In dynamic page, If element as a font-size in em or percentage, the elements

adds up the font-size of the parent element which is em or %. To get rigid of
this we name 10rem where ‘r ’ indicates root in html3.

Where as ‘px’ is static in nature.

line-height does not have any units.

Ex: line-height:2;

.style {
font-family: Arial, Helvetica, sanserif;
color: #0000ff;
font-style: italic;
font-weight: bold;
font-size: 34px;
font-transform: uppercase;
text-align: right;

Box model

What is CSS ? 9
 Box model — essential to understand
• Prefer box—sizing: border—box
The * (universal) selector
Cumulative and collapsing margins
Content overflow

Background property
It is to set background image of the web page.

background-image="url()"

Positioning elements by floating

It is used to move the elements right or left according the user need.

#p{
background-color : red;
float : right;
clear : left;

What is CSS ? 10
 floating elements can produce very flexible layout.
Floats are taken out of normal document flow.

Floats don’t have vertical margin collapse.

The resume normal document use the clear property.

Use float only for rapping text around element for ex: image.
Do not use it for positioning the elements.

Relative and Absolute elements positioning

It is used to move the element to different region by changing position in web
page manually.

Properties are: top, bottom, left, right.

Relative Positioning
In relative positioning , even if the elements is moved, its original spot is preserved
and element is not taken out of it original documents.
The element is moved right or left from the edge of it static position.

p{
position: relative;
top: 50px;
left: 50px;

Absolute Positioning
Elements is taken out of its original document.
element always moves from it nearest relative parent element.

<div class="div1"><div class="div3"></div></div>

<div class="div2"></div>

.div1{

What is CSS ? 11
 background-color: aliceblue;
width: 300px;
height: 300px;
position: absolute;
}
.div2{
background-color: rgb(16, 107, 187);
width: 200px;
height: 200px;
}

p{
position: absolute;
top:52px;
bottom:52px;

Fixed positioning
When the element is fixed, what ever may the changes in the body, the fixed
element does’nt change.

To create Button -
Go to css3buttongenerator.com

Media Queries
Media Queries is used when the same data is viewed in different screen sizes ,the
size of the web page increases or decreases according to the screen size. in other
words it is used for responsive web-page.
Syntax @media(max-width : 767px){
p{

color : blue;
}
}

What is CSS ? 12
 Common Media Queries are :

@media(max-width : 800px){…..}
@media(min-width : 800px){…..}

@media(orientation : portrait){….}
@media screen{….}
@media print {….}

Device with width with in a range

@media(min : 765px) and (max-width : 991px){………}

@media(max-width : 767px) , (min-width : 992px){…..}

@media(min-width : 1200px){ //#large devices

#p1{
width : 80%;
}
#p2{
width : 150px;
height: 150px;
}
}
@media (max-width : 992px) and (min-width : 1199px) //#smal
l devices
{
#p1{
width : 50px;
}
#p2{
width : 100px;
height : 100px;
}
}

What is CSS ? 13
 Responsive Design
What is Responsive web site?
Site designed to adapt its layout to the viewing environment by using flexible
images and css3 media Queries.
Site layout adapt to the size of the devices.

Flex Box:
.container{
display: flex;
gap: 2em;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
height: 100vh;
align-content: center;
}
.container > *{
flex-basis: 10em;
max-width: 50px;
flex-grow: 1;
flex-shrink: 1;
}

link→

A Complete Guide to Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete
guide explains everything about flexbox, focusing on all the
different possible properties for the parent element (the flex
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

What is CSS ? 14
 Flex Sizing : rule→ Content width < Width < flex-basis < min-width/max-width.

12-Column Grid

Nested Grid

Animation and Transition:

What is CSS ? 15
 cssCopy code
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}

.example-element {
width: 100px;
height: 100px;
background-color: blue;
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: both;
animation-play-state: running;
}

In this example:

animation-name : Refers to the slide animation defined using @keyframes .

animation-duration : The animation takes 2 seconds to complete one cycle.

: The animation has an ease-in-out timing function for

animation-timing-function

smooth acceleration and deceleration.

animation-delay : There's a 1-second delay before the animation starts.

animation-iteration-count : The animation repeats 3 times.

What is CSS ? 16
 : The animation alternates between normal and reverse
animation-direction

directions on each iteration.

animation-fill-mode : Both the starting and ending keyframe styles are applied to
the element.

animation-play-state : The animation starts running when the page loads.

This example showcases a simple sliding animation with all the animation
properties in use.
Feel free to modify the values of these properties to see how they affect the
animation behavior.

Bootstrap
Bootstrap is the most popular HTML, CSS and JS framework for developing
responsive, mobile first projects on the web. It is website where we get all the pre-
written css, js code like navbar, button,,etc.

We can download the bootstrap through pasting link in the html code or
download offline files to your local drive.

Stacking and z-Index

What is CSS ? 17
 Web Design Principles :
1. Color Theory

2. Typography

3. User interface Design

4. User Experience Design

Color Theory :
Select the color depending on the purpose.

What is CSS ? 18
 Select the color nav, logo, …

Select the color when we need to highlight something

What is CSS ? 19
 Make Best practice to Select colors as below

Best website to choose color are 1). adobe color 2). color hunt

Typography :
Basically use San-serif

What is CSS ? 20
 UI :
1. Hierarchy

What is CSS ? 21
 2. Layout

3. Alignment

4. White Space

What is CSS ? 22
 5. Audience

UX
1. F-layout (reading pattern)

2. Z-layout (reading pattern)

3. simplicity

4. Consistency

5. All platform design

6. Don’t use black pattaerns

Gsap

What is CSS ? 23