CSS (Cascading Style Sheets)
Selector based Style sheet language
Masud Rana email : rana552m@[Link]
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
Syntax
Selector {
Property : value;
Masud Rana email : rana552m@[Link]
CSS (Cascading Style Sheets)
How to call & How to define A Selector?
ID = #
CLASS = .
Masud Rana email : rana552m@[Link]
CSS (Cascading Style Sheets)
CSS class apply in HTML By 3 Ways
Inline CSS
Internal CSS
External CSS
Masud Rana email : rana552m@[Link]
CSS (Cascading Style Sheets)
INLINE
CSS attribute=“properties : value;”
<p style=“color :green;”> HELLO </p>
Masud Rana email : rana552m@[Link]
CSS (Cascading Style Sheets)
Internal CSS
<style>
Selector {
Property : value;
}
</style>
Masud Rana email : rana552m@[Link]
CSS (Cascading Style Sheets)
Externat
CSS File Extension
.css
Ex: [Link]
Masud Rana email : rana552m@[Link]
CSS (Cascading Style Sheets)
External CSS Link
<link rel="stylesheet" href= "[Link] " >
Masud Rana email : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
CSS Comments
/* This is a single-line comment */
/*
This is
a multi-line
comment
*/
Masud Rana email : rana552m@[Link]
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
CSS background properties
➢ background-color
➢ background-image
➢ background-repeat
➢ background-attachment
➢ background-position
➢ Background-size
Masud Rana email : rana552m@[Link]
CSS (Cascading Style Sheets)
background Image
background-image: url(Image name or image link);
Ex: background-image: url([Link]);
Masud Rana email : rana552m@[Link]
CSS (Cascading Style Sheets)
background Image
Background Image Problem & Solution
background: url([Link]);
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
CSS Box Model
Masud Rana email : rana552m@[Link]
CSS (Cascading Style Sheets)
CSS Box Model
Masud Rana email : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
Border Shorthand Property
border : top style color;
Ex : border : 20px solid green;
Masud Rana email : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
GOOGLE FONTS
Visite : [Link]
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
ICONS
1. Font Awesome Icons
2. Bootstrap Icons
3. Remix Icons
4. Flat Icon
Masud Rana email : rana552m@[Link]
hidden
CSS (Cascading Style Sheets)
Overflow
Overflow : visible / hidden / scroll / scroll ;
Overflow-x : hidden / scroll / scroll ;
Overflow-y : hidden / scroll / scroll ;
Masud Rana email : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
Opacity
The opacity property specifies the opacity/transparency of an
element :
use Ex: opacity: 1;
Masud Rana email : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
Position
There are four different position values:
1. Static
2. Relative
3. Fixed
4. Absolute
Masud Rana email : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
Pseudo-classes
Syntax :
selector:pseudo-class {
property: value;
}
P-classes : link | visited | hover | active | first-child | focus
Masud Rana email : rana552m@[Link]
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 : rana552m@[Link]
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 : rana552m@[Link]
CSS (Cascading Style Sheets)
Layout Module
➢ Flex (two-dimensional)
➢ Grid (multi-dimensional)
Masud Rana email : rana552m@[Link]
CSS (Cascading Style Sheets)
Layout Module
➢ Transitions
➢ Animations
Masud Rana email : rana552m@[Link]
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 : rana552m@[Link]
