CSS (Cascading Style Sheets)

Selector based Style sheet language

Masud Rana email : [email protected]
 CSS (Cascading Style Sheets)

Cascading Style Sheets (CSS) is a stylesheet language used to describe the

presentation of a document written in HTML .

CSS describes how elements should be rendered on screen, on paper, in

speech, or on other media.

The CSS starts in 1994. By Hakon Wium Lie. He was worked at CERN

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Syntax
Selector {

Property : value;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

How to call & How to define A Selector?

ID = #

CLASS = .

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

CSS class apply in HTML By 3 Ways

Inline CSS

Internal CSS

External CSS

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

INLINE

CSS attribute=“properties : value;”

<p style=“color :green;”> HELLO </p>

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Internal CSS

<style>
Selector {

Property : value;

}
</style>

Masud Rana email : [email protected]

CSS (Cascading Style Sheets)

Externat

CSS File Extension

.css

Ex: styele.css

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

External CSS Link

<link rel="stylesheet" href= "filename.css " >

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

COLOR

3 way to use color in CSS:

1. a valid color name - like "red“

2. an RGB value - like "rgb(255, 0, 0)“

3. a HEX value - like "#ff0000"

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

background Color :

3 way to use

Background-color: red;
Background-color: rgb(255,0,0);
Background-color: #c2c2c2

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

CSS Comments

/* This is a single-line comment */

/*
This is
a multi-line
comment
*/

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Width And Height

Width: auto / 500px / 70% / 80vw;

Max-width : 800px / 90% / 90vw;
Min-width : 300px / 40% / 40vw;

height: auto / 500px / 70% / 80vw;

Max- height : 800px / 90% / 90vw;
Min- height : 300px / 40% / 40vw;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

CSS background properties

➢ background-color
➢ background-image
➢ background-repeat
➢ background-attachment
➢ background-position
➢ Background-size

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

background Image

background-image: url(Image name or image link);

Ex: background-image: url(bitm.jpg);

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

background Image

Background Image Problem & Solution

background: url(bitm.jpg);
background-size: Width Height;
ex: background-size: 100% 100%;
background-position: center top;
background-repeat: repeat / no-repeat / repeat-x / repeat-y;
Background-attachment: scroll / fixed ;

Masud Rana email : [email protected]

CSS (Cascading Style Sheets)

CSS Box Model

Masud Rana email : [email protected]

CSS (Cascading Style Sheets)

CSS Box Model

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Border
border width :
border-top-width : 20px;
border-right-width : 15px;
border-bottom-width : 10px;
border-left-width : 5px;

border-width : 20px 15px 10px 5px

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Border
Border Color :
border-top-color : green;
border-right-color : red;
border-bottom-color : purple;
border-left-color : tomato;

border-color : green red purple tomato;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Border
Border Style :
border-top-style : dotted;
border-right-style : solid;
border-bottom : dotted;
border-left-style : solid;

border-style : dotted solid double dashed;

border-style
dotted/dashed/solid/double/groove/ridge/inset/outset/none/hidden;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Border Shorthand Property

border : top style color;

Ex : border : 20px solid green;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Padding
padding-top : 20px;
padding-right : 15px;
padding-bottom :10px;
padding-left : 5px;

padding : top right bottom left;

padding : 20px 15px 10px 5px;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Margin
margin-top : 20px;
margin-right : 15px;
margin-bottom :10px;
margin-left : 5px;

margin: top right bottom left;

margin : 20px 15px 10px 5px;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Typography
Typography is the art and technique of arranging type to make
written language legible, readable and appealing when
displayed. The arrangement of type involves selecting typefaces,
point sizes, line lengths, line-spacing, and letterspacing, as well
as adjusting the space between pairs of letters.

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

TEXT Formatting | Typography

Text color-> color: blue;
Text Alignment->
text-align: center | left| right |justify;

Text-Decoration->
text-decoration: none | overline | line-through | underline;

Text Transformation->
text-transform: uppercase | lowercase | capitalize;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

TEXT Formatting | Typography

Text Indentation-> text-indent: 50px;
Letter Spacing-> letter-spacing: 3px;
Word Spacing-> word-spacing: 10px;
Line Height-> line-height: 1.5;
text Shadow-> text-shadow: 3px 2px 3px red;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

FONTS
font-size: medium|xx-small|x-small|small|large|xlarge|xx-
large|smaller|larger|length|initial|inherit;

font-style: normal|italic|oblique|initial|inherit;

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

Font-family : arial;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

FONTS
@font-face{
src: url(“URL/SOURCE”);
font-family: myFontName;
}

EX: use in p: p{
font-family: myFontName;
}

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

GOOGLE FONTS
Visite : fonts.google.com

Select a font
copy HTML link and paste inside head tag.
or copy CSS link and paste inside CSS file.

And copy font family and use.

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

ICONS
1. Font Awesome Icons
2. Bootstrap Icons
3. Remix Icons
4. Flat Icon

Masud Rana email : [email protected]

hidden
CSS (Cascading Style Sheets)

Overflow
Overflow : visible / hidden / scroll / scroll ;

Overflow-x : hidden / scroll / scroll ;

Overflow-y : hidden / scroll / scroll ;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

LIST
UL / OL -> LI :

list-style-type: none | circle|square|upper-roman|loweralpha;

list-style-image: url(image link);

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

DISPLAY

Display Property depend on 2 Element type:

1. BLOCK ELEMENT.
2. INLINE ELEMENET.

use Ex: display: block | inline | none;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Visibility

The visibility property specifies whether or not an element is

visible.

use Ex: visibility: hidden / visible;

Note : Hidden elements still take up space on the page.

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Opacity

The opacity property specifies the opacity/transparency of an

element :

use Ex: opacity: 1;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

z-index

The z-index property specifies the stack order of an element :

use Ex: z-index: -1;

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Position

➢ The position property specifies the type of positioning method

used for an element (static, relative, fixed, absolute, sticky).

➢ Elements are then positioned using the top, bottom, left, and
right properties. However, these properties will not work unless
the position property is set first. They also work differently
depending on the position value

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Position

There are four different position values:

1. Static
2. Relative
3. Fixed
4. Absolute

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Position

Position: Static

➢ HTML elements are positioned static by default.

➢ Static positioned elements are not affected by the top,

bottom, left, and right properties.

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Pseudo-classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

➢ Style an element when a user mouses over it
➢ Style visited and unvisited links differently
➢ Style an element when it gets focus

P-classes : link | visited | hover | active | first-child | focus

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Pseudo-classes

Syntax :
selector:pseudo-class {

property: value;

}
P-classes : link | visited | hover | active | first-child | focus

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Pseudo-Elements

A CSS pseudo-element is used to style specified parts of an

element.
For example, it can be used to:
➢ Style the first letter, or line, of an element
➢ Insert content before, or after, the content of an element

P-elements : link | visited | hover | active | first-child | focus

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Pseudo-Elements

Syntax :
selector::pseudo-elements {

property: value;

}
P-classes : first-line | first-letter | before | after | marker |
selection

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Layout Module

➢ Flex (two-dimensional)

➢ Grid (multi-dimensional)

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Layout Module

➢ Transitions

➢ Animations

Masud Rana email : [email protected]

 CSS (Cascading Style Sheets)

Responsive-Layout
Media Queries

@media only screen and (max-width: 600px) and (min-width: 400px) {

selectors{
property : value;
}
}

Masud Rana email : [email protected]