CSS
Why css
To apply the styles to elements in html
● Font-color
● Background color
● font-sizes
Ways to specify styles
● Inline
● Embed
● External
Inline styles
Apply styles directly to the elements
<div style="background-color:green">
this is div1
</div>
Embed styles
We specify the styles with in the head tag.
<style>
p{
text-align: center;
color: red;
background-color:green;
}
</style>
External css
<head>
<title>External CSS</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
selectors
selector
● Element
● Id
● Class
● Attribute
● Decedent
● Sibling
Element selector
If we need to apply style to an element then we use the element selector. In below
example we are applying the style to paragraph element
<style>
p {
text-align: center;
color: red;
background-color:green;
}
</style>
Id selector
If we want to apply style to an element with the specific id then we use the id selector.
<p id="para1">Paragraph2</p>
#para1 {
text-align: center;
color: red;
}
assignment
Define inline styles ,id ,element and see who will win and how using the inspect
Specificity is applicable only if
conflicting style
p{ <p>para1</p>
background-color: blue; <p id="abc" style="background-
color:yellow; color:blueviolet">para3</p>
}
#abc{
background-color: brown;
}
COLOR Yellow will be applied to para element as
there is no conflict
Specificity in external vs embedded
Specificity is not applicable between external and embedded. The one which linked
or referenced at the end will be the winner
Class selector
If we want to apply the style to multiple elements, then we define class attribute to those
elements and apply styles to them using the class selector.
<p class="center">i am para1</p>
<p class="center">i am para2</p>
<p>i am para3</p>
.center {
text-align: center;
color: red;
}
specificity
The order of precedence to apply the styles. Below is the order of precedence
● Inline styles
● Id
● Class
● element
Attribute selectors
If we want to apply the styles to the html elements with a specific attribute or attribute
having specific text then we are going to use the attribute selectors.
<div title="title1"> I am div with title</div>
<div > I am div with out title</div>
[title]{
background-color: yellow
}
Attribute with specific value
[title^="you"]{
background-color: yellow;
}
It selects the elements which starts with the attribute value with you
Combine selectors
Combine selectors
<div title="great">this is a div with title</div>
<div title="center">this is the div1</div>
<p title="center">this is para1</p>
div[title='center']{
background-color: blue;
}
assignment
Apply the styles only to the div elements with the title attribute
Descendant selectors
If we want to apply the styles for the children or grand children of html elements then we
use the descendant selector
<div class="good">this is a div with title
<p>this is para</p>
<span>this is span</span>
<span>this children div
<p>this is para inside the child div</p>
</span>
</div>
<div class="good">this is the div1</div>
<p>this para is out side the div tag</p>
a
a1 a2
a3
a11 a21
a12
a112
a111
div p{
background-color:brown;
}
Child selector
If we want to apply the styles to the immediate children we use the child selector
<div class="good">this is a div with title
<p>this is para</p>
<span>this is span</span>
<span>this children div
<p>this is para inside the child div</p>
</span>
</div>
<div >this is the div1
<p>this is para inside second paragraph</p>
</div>
div > p{
background-color:brown;
}
Sibling selectors
If we want to apply the styles to the siblings then we are going to use sibling selector..
<p>this is para3</p>
<div class="good">this is a div with title
<p>this is para</p>
<span>this is span</span>
<span>this children div
<p>this is para inside the child div</p>
</span>
</div>
<p>this is para2</p>
<p>this is para4</p>
<div >this is the div1
<p>this is para inside second paragraph</p>
General siblings
div ~ p{
background-color:brown;
}
Adjancent sibling
<p>this is para3</p>
<div class="good">this is a div with title
<p>this is para</p>
</div>
<p>this is para2</p>
<p>this is para4</p>
<div >this is the div1
<p>this is para inside second paragraph</p>
</div>
div + p{
background-color:brown;
}
Pseudo Classes
Hover,visited, active
a{
color:purple;
font-size: 32px;
}
a:hover{
color:seagreen;
}
a:active{
color:brown;
}
<div>
<a href="https://www.google.com">google</a>
</div>
<div>
<a href="http://www.uitricks.in">ui tricks</a>
</div>
<div>
<a href="http://www.jatanix.com">jatanix</a>
</div>
display
● Block
● None
● Visibility:hidden
● inline
Both display:none and visibility:hidden will hide the element where as
visibility:hidden will reserve the space where as display:none will not do that
first-child
If we want to select the first element of specific type inside any other element we are
going to use this
p:first-child{
background-color: green;
}
<div id="div1">
<p>this is para1</p>
<p>this is para2</p>
</div>
<div id="div2">
<p>this is para3</p>
<p>this is para4</p>
</div>
focus
If we want to apply the style when an input element is focussed we are going to use this
styles
input:focus{
background-color: green;
}
<div>
user name <input type="text" name="" id="">
</div>
<div>
phone <input type="number" name="" id="">
</div>
If we want to apply style only for the text box
input[type=text]:focus{
background-color: blue;
}
select option[value="1"]{ <select name="" id="">
background-color: yellow; <option value="1">india</option>
} <option value="2">china</option>
select option[value="2"]{ <option value="3">pakisthan</option>
background-color: blue; </select>
}
select option[value="3"]{
background-color: green;
}
nth-child
<div> p:nth-child(4){
<p>para1</p>
background-color: green;
<p>para2</p>
}
<p>para3</p>
<p>para4</p>
<p>para5</p>
<p>para6</p>
</div>
Odd and Even child
<div> p:nth-child(odd){
<p>para1</p> background-color: green;
<p>para2</p> }
<p>para3</p>
<p>para4</p> p:nth-child(even){
<p>para5</p> background-color: blue;
<p>para6</p> }
</div>
Assignment - define a table
with the data and style odd
and even rows and headers
nth child an+b ( n is loop from 0 to number of elements
<div> p:nth-child(2n+1){
<p>para1</p> background-color: green;
<p>para2</p> }
<p>para3</p>
<p>para4</p>
<p>para5</p>
<p>para6</p>
<p>para7</p>
<p>para8</p>
<p>para9</p>
Pseudo Elements
Pseudo elements
● p::first-line
● p::first-letter
● h1::before
● h1::after
::first-line
<div>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Molestias asperiores rem tenetur
eum, necessitatibus perferendis libero vitae velit nisi
p::first-line{
accusantium recusandae temporibus error dolor color:blueviolet;
reiciendis fugiat fuga aliquam. Ullam, cumque! }
Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Debitis, ratione! Doloribus eum dolores aperiam
neque, ducimus, id velit voluptatum tenetur officia
necessitatibus a. Necessitatibus dolorum doloribus
nemo, nesciunt sint porro.</p>
</div>
Simulate in the
Device/Tab Mode
::first-letter
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
If we want to highlight the first letter in paragraph
::before
h1::before
{
content: url(laughy.jpeg);
}
If we want to add some content before element
::after
h1::after
{
content: url(laughy.jpeg);
}
If we want to add some content after element
::selection
::selection {
color: red;
background: yellow;
}
If we want to highlight text on the selection
Box Model
Box
All the elements in the CSS are considered as Box Model which has below features
● Width
● Height
● Padding
● Margin
● border
Div with box styles
div{
width:300px;
height:100px;
border:2px solid red;
padding: 5px;
}
Visibility : hidden
Vs
Display : none
Visibility : hidden - > will not render the element but still reserve the space
Display:none -> will not render the element but will not reserve the space
box-sizing
We use box sizing if we want to control padding ,margin,border to be inclusive of width or
exclusive of width
● Border-box
● content-box
border-box
We use this if the width specified is for the content and padding,margin,border all inclusive
div{
height: 300px;
width: 300px;
border: 5px solid royalblue;
padding:5px;
margin: 5px;
box-sizing: border-box;
content-box
We use this if the width specified is only for the content and padding,margin,border or
exclusive
div{
height: 300px;
width: 300px;
border: 5px solid royalblue;
padding:5px;
margin: 5px;
box-sizing: content-box;
}
positions
Positions
● Static
● Relative
● Fixed
● absolute
static
This is the default position for all the elements. Mean they will come where are they are
supposed to come
relative
If we want the element to move by its base position from left
/top/bottom/right by specific coordinates we are going to use
relative
.abc{
position: relative;
top:20px;
left:100px;
}
relative
50p,50px
70px,70px
top:20px,left:20px
fixed
If we want the element to move by window base position from
left /top/bottom/right by specific coordinates we are going to use
fixed
.abc{
position: fixed;
bottom:0px;
right: 0px;
}
Fixed - reference point window position
50p,50px
top:20px,left:20px
absolute
If we want the element to move by parent base position from
left /top/bottom/right by specific coordinates we are going to use
absolute
.abc{
position: absolute;
top:20px;
left:100px;
}
In CSS we have 3 axis
● X axis
● Y axis
● Z axis
img{
position: absolute;
top:10px;
right: 10px;
z-index: -10;
}
backgrounds
background-image
div {
height: 500px;
width: 100%;
background-image: url("paper.jpg");
color: red;
font-size: 5em;
}
background-repeat
background-repeat: repeat-y; /*repeat-x,repeat-y */
background-position
● Bottom right
● Bottom left
● Top left
● Top right
CSS Text
Text styles
● Font-size
● Font -family
● Color
● Text-align
○ Left
○ Right
○ center
● Bold
● Italics
● Under line
● Strike out
● Uppercase
● titlecase
text-align
● Left
● Right
● center
text-decoration
● Underline
● linethrough
● overline
text-transform
● Uppercase
● Lowercase
● titlecase.
font-size
● How much size we want the font
● What is px? Px is measurement unit for html and css. The way we use
cm,feet,meters are used to measure the distance units. We use px in the css world.
● By default font-size is 16px
Sizes can be applied in 3 ways
● Px
● Em
● percentage.
#div1{ body{
text-align: left; font-size: 64px;
text-decoration: underline; }
text-transform: uppercase;
#div3{
} text-align: right;
#div2{ text-decoration: line-through;
text-align: center; text-transform: lowercase;
text-decoration: overline; font-size: 200%;
text-transform: capitalize; }
font-size: 2em;
}
best practice specify size
Em,percenrtage are best practice to specify font-size , height and width for the responsive
web design
User agent styles
By default all the browsers apply some styles. They are called as UAS
Media queries
applying different styles based on the media like print,screen,reader etc
Based on the width and height of the screen also we want to apply some styles. They also
called as media queries
div{
height: 200px;
background-color: yellow;
border: 1px solid red;
}
@media only screen and (min-width: 500px) and (max-width: 1100px){
div{
background-color: purple;
color: white;
font-size: 1.5em;
}
}
@media only screen and (max-width: 600px) {
div{
background-color: blue;
font-size: 2em;
}
}
<div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum placeat quam natus totam
quae, eum provident dolorem impedit eaque alias nesciunt magnam repellendus, blanditiis
suscipit tenetur ad esse, perspiciatis hic?
</div>
