2. What is CSS ?
CSS stands for “Cascading Style Sheets”
Cascading: refers to the procedure that determines which style will apply to a certain
section, if you have more than one style rule.
Style: how you want a certain part of your page to look. You can set things like color,
margins, font, etc for things like tables, paragraphs, and headings.
Sheets: the “sheets” are like templates, or a set of rules, for determining how the webpage
will look.
CSS is a stylesheet language used to describe the presentation of a document written
in HTML or XML.
3. CSS
Advantages
• A web application will contains hundreds of web pages, which are created using HTML.
• Formatting these HTML pages will be a laborious process, as formatting elements need
to be applied to each and every page.
• CSS saves lots of work as we can change the appearance and layout of all the web pages
by editing just one single CSS file.
4. CSS Syntax Rules
Rule have two parts - Selector and declaration.
Selector: The HTML element you want to add style to.
<p> <h1> <table> etc
Declaration: The statement of style for that element. Made up of property and value.
Refer Note Section-
Selector
Property
Declaration
Value
Rules
Declaration
p {font-family:Arial;}
5. CSS Style Example
<html>
<head>
<style> p {font-family:Arial; color: red; background-
color:black;} </style>
</head>
<body>
<p> <b> Welcome to Snapdeal Academy </b>
</p>
</body>
</html>
Welcome to Snapdeal Academy
Selector - I want the text color of my paragraph to be red and the background color to be black.
6. CSS Selectors
CSS selectors allow you to select and manipulate HTML elements based on
their id, class, type, attribute, and more.
7. Inserting a StyleSheet
You can do in three different ways-
1. External Style Sheet
Styles are specified in an external CSS file. you can change the looks of entire website by using single
external style sheet.
Eg.: <head> <link rel="stylesheet" type="text/css" href=“ex1.css” /> </head>
2. Internal Style Sheet
To Appy specific styles to a single HTML file inside the head section of an HTML page.
Eg.: <style> p { text-align:left; font-size:24px; } </style>
3. Inline Styles
Styles are specified inside an HTML tag/element.
Eg.: <p style="font-family:Algerian; font-size:28px;"> Demo of Inline Style </p>
8. Inserting a StyleSheet
Multiple Style Sheets – It can be referenced inside an HTML document.
The questions is, what styles will be applicable when there is more than one style specified?
All styles cascade into a new virtual style sheet by applying the
following rules, where the higher number has the greater priority:
1. Browser default.
2. External Stylesheet.
3. Internal Stylesheet (styles defined in head section).
4. Inline Style (styles defined in an HTML element).
Ref.Note Section-
9. Formatting with CSS Properties
CSS Background
We can use CSS Background properties to define the background effects of an element.
The following properties can be used for background effects :
a. background-color
b. background-image
c. background-repeat
d. background-position
10. Formatting with CSS Properties
CSS Background Image
You can use an image as the background for an element using background-image property.
Example-
body{
background-image:url(‘java.png’);
}
By default, the image is repeated, both horizontally and vertically, so as to cover the entire
body (or the element on which it is applied).
11. Formatting with CSS Properties
CSS Background Color
The background-color property is used to specify the background color of an element.
Example-
body {
background-color:darkblue;
}
Similarly, we can specify the background for any element (wherever applicable).
p {
background-color:orange;
}
12. Formatting with CSS Properties
CSS Background Position
If the background image disturbs the text, i.e. if the text cannot be read clearly due to
the image in the background, we can set the position of the background image.
Example-
body {
background-image:url(“snapdeal.jpg");
background-repeat:no-repeat;
background-position:right top;
}
13. Formatting with CSS Properties
CSS Background Shorthand
You can also specify all the properties in a single property.
This property is known as shorthand property.
For specifying shorthand property, you just need to use background.
Example-
body {
background:cyan url(‘snapdeal.jpg') no-repeat right top;
}
14. Formatting with CSS Properties
Text Formatting
The following properties can be used for formatting text :
1. Text Color
2. Text Alignment
3. Text Decoration
4. Text Transformation
5. Text Indentation
15. Formatting with CSS Properties
Text Alignment
We can either align the text to the left, right, center or we can make it justified.
Example-
p { text-align:left;}
h1{text-align:center;}
Text Color
The color property is used to set the color of text.
Example-
body { color:blue;}
p1 {color:magenta;}
16. Formatting with CSS Properties
Text Decoration
You can use text-decoration property to set or remove decorations from text.
Example-
p {text-decoration:overline;}
p {text-decoration:line-through;}
p {text-decoration:underline;}
Text Transformation
You can use text-transform property to specify uppercase and lowercase letters of any text.
Example-
h1 {text-transform:uppercase;}
h2 {text-transform:lowercase;}
p {text-transform:capitalize;}
17. Formatting with CSS Properties
CSS Font
CSS font properties are used to define the font family, size, style and boldness of the text.
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look (like "Serif" or "Monospace").
font family - a specific font family (like "Times New Roman" or "Arial").
Comments in CSS
/* comment */ - This is comment used in CSS.
18. Formatting with CSS Properties
CSS Font Family
The font-family property should hold several font names as a "fallback" system. If the
browser does not support the first font, it tries the next font.
Example :
p { font-family:”Arial”, Times, “Sans-serif”;}
CSS Font Style
You can use the property font-style to specify mostly italic text. It has three values –
Normal, Italic, Oblique (similar to italic).
19. Formatting with CSS Properties
CSS Font Size
You can use the font-size property to set the size of text. The font-size value can be
absolute or it can be relative.
Example-
h1 {
font-size: 30px;
}
p {
font-size: 14px;
}
20. Formatting with CSS Properties
CSS Font Size with em (Relative Size)
You may face resizing problems, when you use older versions of browsers.
To avoid such problems, you can use set font size using em, instead of pixels.
The em size unit is a W3C recommendation.1 em is equal to the current font size.
The default text size is 16 px. So, the default size of 1 em is 16 px.
Example
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
21. Formatting with CSS Properties
CSS Links
You can use CSS styles to style any link. Links can be
styled in different ways by using any CSS property like color, font-family etc.
Links can be in one of the following states :
a: link – Unvisited link
a: visited – A link that the user has visited
a: hover – A link over which the mouse pointer is moving
a: active – A link, which has been just clicked
Links can be styled according to their states.
22. Formatting with CSS Properties
CSS Links
Styling Links
a {
font-weight: bold;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: aqua;
background-color: navy;
}
link - before a visit
visited - after it has been visited
hover - when your mouse is over it but you have not clicked
active - you have clicked it and you have not yet seen the new page
23. Formatting with CSS Properties
CSS List
You can use CSS list properties for
Setting different list item markers for ordered lists
Setting different list item markers for unordered lists
Set an image as the list item marker
Values-
list-style-type
list-style-image
24. Formatting with CSS Properties
Box Model : Introduction
Box model is useful for designing the layout of an HTML Page.
CSS Box model describes a box that wraps around HTML elements.
Using this model, we can define the margins, borders, padding and the actual content. We
can place border around elements and space elements in relation to each other.
Content
Padding
Border
Margin
You can set the height and width of an element
using the height and width properties.
Box Model : Illustration
25. Formatting with CSS Properties
CSS Padding
You can use the CSS padding properties to define the space between the element border
and the element content. It is possible to change the top, right, bottom and
left padding independently using separate properties.
You can also use a shorthand padding property to change all paddings in a single statement.
Individual padding properties can be specified as follows :
padding-top:20px;
padding-bottom:30px;
padding-right:25px;
padding-left:10px;
In shorthand-
padding : 20px 30px 25px 10px;
26. Formatting with CSS Properties
CSS Border
You can use the CSS Border properties to specify
the style and color of an element’s border.
Values-
border-style
border-width
border-color
27. Formatting with CSS Properties
CSS Margin
Using CSS Margin properties you can specify the space around elements.
Values:
margin-top:50px;
margin-bottom:30px;
margin-right:25px;
margin-left:10px;
In shorthand-
margin:50px 30px 25px 10px;
28. Formatting with CSS Properties
CSS Margin
Using CSS Margin properties you can specify the space around elements.
Values:
margin-top:50px;
margin-bottom:30px;
margin-right:25px;
margin-left:10px;
In shorthand-
margin:50px 30px 25px 10px;
29. Formatting with CSS Properties
Pseudo-Class
A pseudo-class is used to define a special state of an element.
• Style an element when a user mouses over it.
• Style visited and unvisited links differently.
/* unvisited link */
a:link { color: #FF0000;
}
/* visited link */
a:visited { color: #00FF00;
}
/* mouse over link */
a:hover { color: #FF00FF;
}
/* selected link */
a:active { color: #0000FF;
30. Formatting with CSS Properties
Media Types
The @media rule makes it possible to define different style rules for different media types in the
same stylesheet.
Example-
@media screen {
p { font-family: verdana, sans-serif;
font-size: 20px;
} }
@media print {
p { font-family: georgia, serif;
font-size: 15px;
color: blue;
32. CSS3 Introduction
Several new functionalities have been added in CSS 3 which has been split into “modules”.
It contains the "old CSS specification" (which has been split into smaller pieces). In addition, new modules
are added.
Some Important CSS3 modules are:
Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface
33. CSS3 Gradient
Now with CSS3 you can use gradients effects in your document. For which earlier you have to
use images. It reduces download time and bandwidth usage. Gradient is generated by browser.
Its of two types –
• Linear Gradients (goes down/up/left/right/diagonally).
• Radial Gradients (defined by their center).
Example- (This is by-default for Top-Bottom).
#grad {background: linear-gradient(red, blue); } /* Standard Syntax*/
For Different browser support we need to specify the prefix for them-
#grad {background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */}
34. CSS3 Text
CSS3 contains several new text features. Their are following text properties- text-overflow,
word-wrap, word-break
text-overflow – This property specifies how overflowed content that is not displayed should be
signaled to the user.
Eg.:
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 { On hovering over element – It shows overflowed content
white-space: nowrap; div.test:hover {
width: 200px; text-overflow: inherit;
border: 1px solid #000000; overflow: visible;
overflow: hidden; }
text-overflow: ellipsis;
}
35. CSS3 Transforms
CSS3 transforms allow you to translate, rotate, scale, and skew elements. CSS3 supports 2D and 3D
transformations.
CSS3 2D Transforms
It has following 2D transformation methods:
transform: translate()
transform: rotate()
transform: scale()
transform: skewX()
transform: skewY()
transform: matrix()
Example-
div {transform: translate(50px,100px); }
div { transform: rotate(20deg); }
36. CSS3 Transforms
CSS3 3D Transforms
It has following 3D transformation methods:
transform: rotateX()
transform: rotateY()
transform: rotateZ()
Example-
div {
transform: rotateX(150deg);
}
37. CSS3 Transitions
It allows you to change property values smoothly (from one value to another),
over a given duration. To create a transition effect, you must specify two things:
1. the CSS property you want to add an effect to.
2. the duration of the effect.
Example-
div { div:hover {
width: 100px; width: 300px;
height: 100px; }
background: red;
-webkit-transition: width 2s; /* Safari */ On hovering over it.
transition: width 2s;
}
38. CSS3 Animation
CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! An
animation lets an element gradually change from one style to another. To use CSS3 animation, you
must first specify some @keyframes for the animation.
Example-
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Editor's Notes
#30:Note: ::selection always starts with double colons (::).
#37:Note: This example does not work in Internet Explorer 9 and earlier versions.
There are different properties like - transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out. ; transition-delay: 1s ; transition: width 2s, height 2s, transform 2s; etc.
#38:Note: This example does not work in Internet Explorer 9 and earlier versions.
When an animation is finished, it changes back to its original style.
There are many properties like – animation-delay, animation-duration, animation-direction, animation-iteration-count, etc.
