CSS makes your work pleasant
#2 What can we do with Css
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External CSS
Internal CSS
Inline CSS
#3 CSS Syntax
p {
color: red;
text-align: center;
}
Example Explained
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
#4 CSS Selectors
* id
* class
* tag
#6 CSS Colors
* color names
* HEX
* RGB
* RGBA
#7 CSS Backgrounds
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
* background (shorthand property)
#8 CSS Borders
CSS Border Style
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
#10 CSS Height, Width and Max-width
The height and width properties may have the following values:
* auto - This is default. The browser calculates the height and width
* length - Defines the height/width in px, cm etc.
* % - Defines the height/width in percent of the containing block
* initial - Sets the height/width to its default value
* inherit - The height/width will be inherited from its parent value
#11 CSS Box Model(div)
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
#12 CSS Text
* Text Color
* text-align
* text-align-last
* text-decoration
text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
#13 text-transform
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
#14 CSS Text Spacing
text-indent
letter-spacing
line-height
word-spacing
white-space
#15 CSS Text Shadow
h1 {
text-shadow: 2px 2px 5px red;
}
#16 CSS Fonts
#17 CSS Links
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
#18 CSS Layout - The display Property
* Block-level Elements
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
* Inline Elements
<span>
<a>
<img>
#19 Css Position
here are five different position values:
static
relative
fixed
absolute
sticky
#20 Css Z-index
#21 Css overflow
#22 CSS Float
#23 Css Combinators
There are four different combinators in CSS:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
#24 Css Psevdo-class, psevdo element
* first-line
* first-letter
#25 CSS Opacity / Transparency
#26 CSS navbar
horizontal
dropdown
#27 CSS forms
#28 Css Website layout
www.w3schools.com
#29 Css Units
www.w3schools.com
#30 Css Gradients
* linear-gradient
#31 Css shadow
*text-shadow
* box-shadow
div {
box-shadow: 10px 10px 5px 12px lightblue;
}
#32 CSS 2D transform
#33 Css 3D transform
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()