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 some of
the problems of Html 4. 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

[email protected]
gurupreetham.c@testyantra www.testyantra.com
.com
[email protected]
19