CSS3
0
History of CSS
CSS was first proposed by Hakon Wium Lie on October 10, 1994. At the time, Lie
was working with Tim Berners-Lee (father of Html) at CERN. Hakon wium lie is know
as father of CSS.
CSS was proposed in 1994 as a web styling language, to solve the problems of Html.
There were other styling languages proposed at this time, such as Style Sheets for
Html and JSSS but CSS won.
1
What is CSS?
CSS stands for Cascading Style Sheets.
It is a style sheet language which is used to describe the look
and formatting of a document written in markup language.
It is generally used with HTML to change the style of web
pages and user interfaces
2
CSS Vs HTML
The Difference Between CSS and HTML.
CSS = CSS is mainly for presentation and design.
HTML = HTML is for content and web page structure. And it is building block of web
page. HTML CSS
3
Syntax
Selector
body{
color : blue ;
}
Property Value
4
Ways to add CSS
There are three ways to add css to HTML
Inline Styles
Head Styles / Internal Styles
External Styles
Inline Styles
Inline CSS is used to apply CSS on a single line or element.
For example:
<p style="color : blue">Hello CSS</p>
5
Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect
all the elements of the page.
It is written inside the style tag within head section of html.
For example:
<style>
p{color:blue}
</style>
6
External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we
write all the CSS code in a css file.
Its extension must be .css for example style.css.
For example:
p{
color:blue;
}
You need to link this style.css file to your html pages like this:
<link rel="stylesheet" type="text/css" href="style.css">
7
CSS Selectors
Element Selector
Universal Selector
Attribute Selector
Class Selector
Id Selector
Pseudo Classes
8
CSS Background
CSS background property is used to define the background
effects on element.
There are 5 CSS background properties that affects the HTML
elements:
1). background-color
2). background-image
3). background-repeat
4). background-attachment
5). background-position
9
Border
The CSS border properties are use to specify the style, color and size of
the border of an element.
The CSS border properties are given below
1. border-style
2. border-color
3. border-width
4. border-radius
10
Display
CSS display is the most important property of CSS which is used to
control the layout of the element. It specifies how the element is
displayed.
There are following CSS display values which are commonly used.
1) display: inline;
2) display: inline-block;
3) display: block;
4) display: run-in;
5) display: none;
11
Fonts
CSS Font property is used to control the look of texts. By the use of CSS font property you
can change the text size, color, style and more
These are some important font attributes
1) CSS Font color: This property is used to change the
color of the text. (standalone attribute)
2) CSS Font family: This property is used to change the face of the font.
3) CSS Font size: This property is used to increase or decrease
the size of the font.
4) CSS Font style: This property is used to make the font bold, italic or oblique.
5) CSS Font variant: This property creates a small-caps effect.
6) CSS Font weight: This property is used to increase or
decrease the boldness and lightness of the font.
12
Text
List of Text properties:
Text Color
Text Alignment
Text Decorator
Text Transformation
Letter Spacing
Word Spacing
Text Direction
Text Overflow
Text Shadow
13
CSS Box Model
14
Gradient
CSS gradients let you display smooth transitions between two
or more specified colors.
CSS defines two types of gradients:
1) Linear Gradients (goes down/up/left/right/diagonally)
2) Radial Gradients (defined by their center)
15
2D and 3D Transforms
CSS transforms allow you to move, rotate, scale, and skew elements
2D transformation methods:
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()
16
Transitions
CSS transitions allows you to change property values smoothly, over a given
duration
List of transition properties
1. transition
2. transition-delay
3. transition-duration
4. transition-property
5. transition-timing-function
17
Animation
CSS Animation property is used to create animation on the webpage
List of Properties:
1. @keyframes
2. animation-name
3. animation-duration
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-timing-function
8. animation-fill-mode
9. animation
@keyframes Rule
The animation is created in the @keyframe rule. It is used to control the intermediate
steps in a CSS animation sequence.
18
Contact Us
No.01, 3rd cross Basappa Layout, Gavipuram Extension,
Kempegowda Nagar, Bengaluru, Karnataka 560019
sagar.g@testyantra.com
gurupreetham.c@testyantra.com www.testyantra.com
praveen.d@testyantra.com
19
