CSS3
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.
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
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
SYNTAX
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>
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>
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">
CSS SELECTORS
Element Selector
Attribute Selector
Class Selector(.)
Id Selector(#)
Pseudo Classes
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: url(‘’)
3). background-repeat
4). background-attachment
5). background-position
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 ==(%)
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.
o 1) display: inline;
o 2) display: inline-block;
o 3) display: block;
o 4) display: run-in;
o 5) display: none;
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.(px)
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.
TEXT
List of Text properties:
• Text Color
• Text Alignment
• Text Decorator
• Text Transformation
• Letter Spacing
• Word Spacing
• Text Direction
• Text Overflow
• Text Shadow
CSS BOX MODEL
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
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()
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)
REACH US AT
THANK YOU
GANAKA LABS PRIVATE LIMITED
Technology is our Nature
Contact: +91 63665 64229 / 96637 42371
Email: hr@ganakalabs.com
Website: www.ganakalabs.com
