CSS – Cascading Style Sheet 1

Table of Contents
What is CSS ..................................................................................................................................................... 4
Advantages of CSS .......................................................................................................................................... 4
CSS Syntax ....................................................................................................................................................... 4
How to add CSS ............................................................................................................................................... 5
Inline CSS..................................................................................................................................................... 5
Disadvantages of Inline CSS .................................................................................................................... 5
Internal CSS ................................................................................................................................................. 5
Disadvantages of Internal CSS ................................................................................................................ 5
External CSS ................................................................................................................................................ 5
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........ 5
Import another CSS file in our CSS file. ....................................................................................................... 6
CSS Comments ................................................................................................................................................ 6
CSS Selectors ................................................................................................................................................... 7
Universal ..................................................................................................................................................... 7
type ............................................................................................................................................................. 7
compound/ group ....................................................................................................................................... 7
class............................................................................................................................................................. 8
id ................................................................................................................................................................. 8
attribute ...................................................................................................................................................... 8
descendant ............................................................................................................................................... 10
child........................................................................................................................................................... 11
Adjacent sibling (पास मैं / सटा हुआ) ..................................................................................................... 11
general sibling ........................................................................................................................................... 12
first child ................................................................................................................................................... 12
last child .................................................................................................................................................... 13
nth child .................................................................................................................................................... 13
first line ..................................................................................................................................................... 15
first letter .................................................................................................................................................. 16
:hover ........................................................................................................................................................ 16
active......................................................................................................................................................... 17
Focus ......................................................................................................................................................... 17
CSS Border .................................................................................................................................................... 18
border bottom .......................................................................................................................................... 18
border bottom color ................................................................................................................................. 18
border collapse ......................................................................................................................................... 19

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
2 CSS – Cascading Style Sheet

margin ........................................................................................................................................................... 20
margin bottom .......................................................................................................................................... 20
margin left ................................................................................................................................................. 21
margin right............................................................................................................................................... 21
margin top ................................................................................................................................................. 21
padding ......................................................................................................................................................... 21
padding top ............................................................................................................................................... 21
padding right ............................................................................................................................................. 21
padding bottom ........................................................................................................................................ 21
padding left ............................................................................................................................................... 22
width ............................................................................................................................................................. 22
height ............................................................................................................................................................ 22
min height ................................................................................................................................................. 23
max height ................................................................................................................................................ 23
CSS float ........................................................................................................................................................ 24
Position ......................................................................................................................................................... 26
Static Position ........................................................................................................................................... 26
Relative Position ....................................................................................................................................... 26
Absolute Positioning ................................................................................................................................. 27
Fixed Positioning ....................................................................................................................................... 27
top ............................................................................................................................................................. 27
bottom ...................................................................................................................................................... 28
left ............................................................................................................................................................. 28
right ........................................................................................................................................................... 28
Overlapping Elements ................................................................................................................................... 28
z-index ........................................................................................................................................................... 28
Horizontal Navigation Bar ............................................................................................................................. 28
list-style ................................................................................................................................................. 29
line-height ............................................................................................................................................. 29
text-decoration ..................................................................................................................................... 29
CSS Multiple Backgrounds ........................................................................................................................ 29
CSS Background Size ................................................................................................................................. 29
Define Sizes of Multiple Background Images ............................................................................................ 30
Full Size Background Image....................................................................................................................... 30
CSS background-origin Property ............................................................................................................... 31
CSS background-clip Property ................................................................................................................... 32
CSS Gradients ................................................................................................................................................ 32
CSS Linear Gradients .............................................................................................................................. 32

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 3

Syntax.................................................................................................................................................. 32
Using Angles ........................................................................................................................................... 33
Syntax.................................................................................................................................................. 33
Using Multiple Color Stops ................................................................................................................... 34
Using Transparency ................................................................................................................................ 34
Repeating a linear-gradient .................................................................................................................. 34
CSS Radial Gradients .............................................................................................................................. 35
Syntax.................................................................................................................................................. 35
CSS Transforms ............................................................................................................................................. 36
CSS 2D Transforms .................................................................................................................................... 36
The translate() Function ........................................................................................................................... 36
The rotate() Method ................................................................................................................................. 36
The scale() Method ................................................................................................................................... 37
The skewX() Method ................................................................................................................................. 38
The skewY() Method ................................................................................................................................. 38
The skew() Method ................................................................................................................................... 38
CSS 3D Transforms ................................................................................................................................. 39
The rotateX() Method ............................................................................................................................ 39
The rotateY() Method............................................................................................................................. 39
The rotateZ() Method ............................................................................................................................ 39
CSS Animations? ..................................................................................................................................... 40
The @keyframes Rule ............................................................................................................................ 40
Delay an Animation ................................................................................................................................ 41
Set How Many Times an Animation Should Run ............................................................................... 41
Run Animation in Reverse Direction or Alternate Cycles .................................................................. 42

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
4 CSS – Cascading Style Sheet

What is CSS
CSS was invented by Håkon Wium Lie on October 10, 1994 and maintained
through a group of people within the W3C called the CSS Working Group.

 CSS stands for Cascading Style Sheets.

 CSS describes how HTML elements are to be displayed on screen,
paper, or in other media.
 CSS saves a lot of work. It can control the layout of multiple web pages all
at once.
 External style sheets are stored in CSS files.

Advantages of CSS
 CSS saves time − you can write CSS once and then reuse same sheet in
multiple HTML pages.

 Pages load faster − If you are using CSS, you do not need to write HTML
tag attributes every time. Just write one CSS rule of a tag and apply it to all
the occurrences of that tag. So less code means faster download time.

 Easy maintenance − To make a global change, simply change the style,

and all elements in all the web pages will be updated automatically.

 Multiple Device Compatibility − Style sheets allow content to be optimized

for more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices such as
Tablets and smart phones or for printing.

 Global web standards − Now HTML attributes are being deprecated and it
is being recommended to use CSS. So it’s a good idea to start using CSS in
all the HTML pages to make them compatible to future browsers.

CSS Syntax

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 5

h1 {
text-align: center;
color: red;
}

How to add CSS

CSS is added to HTML pages to format the document according to information in the
style sheet. There are three ways to insert CSS in HTML documents.

1. In-line CSS
2. Internal/Page/Embed CSS
3. External CSS

Inline CSS
Inline CSS is used to apply CSS on a single line in HTML tag.

<p style="color:blue; background:#f00">Hello CSS</p>

Disadvantages of Inline CSS

o These styles cannot be reused anywhere else.

o It is not possible to style pseudo-codes and pseudo-classes with inline CSS.

o Inline CSS does not provide browser cache advantages.

Internal CSS
Internal CSS is used to apply on a document or page. It can affect all the elements
of the page. It is written inside the style tag within head section of html.

<style>
p{color:blue}
</style>

Disadvantages of Internal CSS

o Internal CSS does not provide browser cache advantages.

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.

p{color:blue}

You need to link this style.css file to your html pages like this:

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
6 CSS – Cascading Style Sheet

<link rel="stylesheet" type="text/css" href="folderName/cssFileName.css">

Import another CSS file in our CSS file.

@import url('folderName/cssFileName.css');

CSS Comments
Single Line Comment

p{
color: blue;
// This is a single-line comment;
text-align: center;
}

Multi-line Comment
p{
color: blue;
/* This is a
Multi-line comment;
text-align: center; */
}

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 7

CSS Selectors
Universal
The universal selector will target all elements in your HTML document.
<style>

* { color:#F00; }

</style>

<h2>Heading content</h2>

<p>Paragraph <b>content</b>...</p>

type
The type selector is used to target elements by their type.

<style>

h2 { color:#06C; }

</style>

<h2>Some Stuff</h2>

<p>My paragraph...</p>

<h2>More Stuff</h2>

<p>My paragraph...</p>

compound/ group
The compound selector represents a comma separated list of selectors. It acts as a
way to target multiple elements by type, class, id, attribute or pseudo class.

<style>

h1, div, p#p1{ color: red; }

</style>

<h1>Heading Content</h1>

<p>Paragraph content ...</p>

<div>Div content ...</div>

<p id="p1">Paragraph content ...</p>

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
8 CSS – Cascading Style Sheet

class
Prefixing the dot symbol to a selector allows us to target by class. The class selector
will target all elements with the same class name.

<style>

.myclass { background: #BFDFFF; border:#06C 1px solid; padding:10px; }

</style>

<div class="myclass">Content inside my div...</div>

<div>Content inside my div...</div>

<p class="myclass">Content inside my paragraph...</p>

<p>Content inside my paragraph...</p>

id
Prefixing the hash symbol to a selector allows us to target by id. The id selector will
target an element by its unique id.

<style>

#heading1 { border:#06C 1px solid; }

</style>

<h3 id="heading1">My heading content</h3>

<h3>My heading content</h3>

attribute
The attribute selector will target elements that have the specified attributes and
values.

<style>

p[lang]{ color: red; }

</style>

<p>Paragraph content ...</p>

<p lang="en">Paragraph content ...</p>

<p>Paragraph content ...</p>

Note: ele[att] - target all elements that have the specified attribute:

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 9

<style>

button[type="reset"]{ background: black; color: white; }

</style>

<button type="button">Button 1</button>

<button type="reset">Button 2</button>

<button type="submit">Button 3</button>

Note:ele[att="val"] - target all elements that have the specified attribute and value:

<style>

input[value~="the"] { background: pink; }

</style>

<input value="welcome to the show">

<input value="welcome to a show">

Note:ele[att~="val"]– target all elements that have the specified attribute and the
attribute value is a space separated list of values, one of which matches the
specified value.

<style>

a[href^="http"] { color: magenta; }

</style>

<a href="http://www.youtube.com">Watch Videos</a><br>

<a href="contact.html">Contact Us</a><br>

<a href="http://www.yahoo.com">Search the web</a>

Note:ele[att^="val"] - target all elements that have the specified attribute and its
value begins with the specified value.

<style> a[href$="gov"] { color: red; } </style>

<a href="www.usa.com">Link 1</a><br>

<a href="www.usa.gov">Link 2</a>

Note: ele[att$="val"] - target elements that have the specified attribute and its
value ends with the specified value.

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
10 CSS – Cascading Style Sheet

<style>

h2[title*="econ"] { color: orange; }

</style>

<h2 title="first heading">Heading 1</h2>

<h2 title="second heading">Heading 2</h2>

<h2 title="third heading">Heading 3</h2>

Note:ele[att*="val"] - target all elements that have the specified attribute and its
value contains the specified substring.

descendant
The descendant selector will target an element's descendants. That includes
direct child elements as well as more deeply nested elements that are
grandchildren and great grandchildren.

<style>

div li{ color:#F00; }

</style>

<div>

<ul>

<li>List Item</li>

<li>List Item</li>

<li>List Item</li>

</ul>

</div>

<ul>

<li>List Item</li>

<li>List Item</li>

<li>List Item</li>

</ul>

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 11

child
The child selector will target just the specified direct children of an element and not
target all of its descendants of that type.

<style>

div > p{ color: red; }

</style>

<div>

<p>Paragraph content ...</p>

<article><p>Paragraph content ...</p></article>

</div>

Adjacent sibling (पास मैं / सटा हुआ)

The adjacent sibling selector will target elements only if they happen to come
directly after other specified elements.

<style>

h3 + p {

font-family:"Comic Sans MS", cursive;

text-decoration:underline;

</style>

<h3>Some Stuff</h3>

<p>My paragraph...</p>

<p>My paragraph...</p>

<p>My paragraph...</p>

<h3>More Stuff</h3>

<p>My paragraph...</p>

<p>My paragraph...</p>

<p>My paragraph...</p>

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
12 CSS – Cascading Style Sheet

general sibling
The general sibling selector will target all specified elements that come after the
specified sibling element.

<style>

h4 ~ p {

font-style:italic;

color:#09F;

</style>

<h2>Some Stuff</h2>

<p>Stuff inside my paragraph...</p>

<p>Stuff inside my paragraph...</p>

<h4>More Stuff</h4>

<p>Stuff inside my paragraph...</p>

<p>Stuff inside my paragraph...</p>

<div>Stuff inside my div...</div>

<p>Stuff inside my paragraph...</p>

first child
The first-child structural pseudo-class selector will target the first nested element of
the specified type or selector.

<style>

p:first-child {color: skyblue;}

</style>

<article>

<p>Paragraph content...</p><p>Paragraph content...</p>

</article>

<article>

<p>Paragraph content...</p><p>Paragraph content...</p>

</article>
Technosters Technologies OPC Pvt. Ltd.
www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 13

last child
The last-child structural pseudo-class selector will target the last element of the
specified type or selector.

<style>

a:last-child {

font-family:"Arial Black", Gadget, sans-serif;

background: #c04;

</style>

<a href="#">Link 1</a><br>

<a href="#">Link 2</a><br>

<a href="#">Link 3</a><br>

<a href="#">Link 4</a>

nth child
The nth-child structural pseudo-class selector will target child elements according to
their position in their specified parent element. Define the numeric value for position
in between the parenthesis.

<style>

li:nth-child(2) {

color:#F00;

</style>

<ul>

<li>list item content...</li>

<li>list item content...</li>

<li>list item content...</li>

</ul>

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
14 CSS – Cascading Style Sheet

For even/odd

<style>

li:nth-child(even) {

color: red;

li:nth-child(odd) {

color: blue;

</style>

<ul>

<li>list item content...</li>

<li>list item content...</li>

<li>list item content...</li>

<li>list item content...</li>

<li>list item content...</li>

<li>list item content...</li>

</ul>

This creates the same even/odd logic by styling elements that are divisible by a
specified number. This means you can target all element in positions that are
divisible by 5 or any other number.

<style>

li:nth-child(2n+0) {

color: red;

li:nth-child(2n+1) {

color: blue;

</style>

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 15

<ul>

<li>list item content...</li>

<li>list item content...</li>

<li>list item content...</li>

<li>list item content...</li>

<li>list item content...</li>

<li>list item content...</li>

</ul>

first line
The first-line pseudo-element selector will target the first formatted line within
elements.

<style>

p::first-line {

color: red;

ul::first-line {

color: orange;

</style>

<p>My paragraph content...<br> keeps going...<br>and going...</p>

<ul>

<li>List item</li>

<li>List item</li>

<li>List item</li>

</ul>

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
16 CSS – Cascading Style Sheet

first letter
The first-letter pseudo-element selector will target the first letter of a text.

<style>

p::first-letter {

font-size: 24px;

color: #09C;

</style>

<p>Once upon a time on a website...</p>

<p>Later that same afternoon a great big...</p>

:hover
The hover user action pseudo-class selector will target elements when the user
mouse hovers over them.

<style>

.myList li {

background:#CEE7FF;

padding:12px;

margin:4px;

color:#06F;

.myList li:hover {

background:#B7FFC4;

color:#090;

</style>

<ul class="myList">

<li>List Item 1</li><li>List Item 2</li><li>List Item 3</li>

</ul>

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 17

active
The active user action pseudo-class selector will target elements when the user
clicks to interact with them.

<style>

div{

width:200px;

height: 200px;

background: #ccc;

div:active{

background: #c04;

color: #fff;

</style>

<div> Click me...</div>

Focus
The focus pseudo class selector will target the element that has focus in the
document as the user interacts with various things.

<style>

input:focus {

background:#C4E1FF;

</style>

<input name="email">

<input name="password">

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
18 CSS – Cascading Style Sheet

CSS Border
The CSS border property is shorthand for setting the border-width, border-style and
border-color properties in a single declaration.

<style>

h1 {

border: 5px solid orange;

</style>

<h1>heading content ...</h1>

border bottom
The CSS border-bottom property is shorthand for setting the width, style and color
of a bottom border in a single declaration.

<style>

div {

border-bottom: 5px solid black;

</style>

<div>div content</div>

border bottom color

The CSS border-bottom-color property sets the element's bottom border color.

<style>

h2 {

border-bottom-width: 1px;

border-bottom-style: dotted;

border-bottom-color: #CCC;

</style>

<h2>content ...</h2>

<h2>content ...</h2>

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 19

border collapse
The CSS border-collapse property is used to separate or collapse borders on HTML
tables or inline table elements.

<style>

#table1 {

border: purple 3px solid;

border-collapse: collapse;

#table2 {

border: green 3px solid;

border-collapse: separated;

#table1 td { border: purple 1px dashed; padding:12px; }

#table2 td { border: green 1px dashed; padding:12px; }

</style>

<table id="table1">

<tr>

<td>Cell data</td>

<td>Cell data</td>

</tr>

<tr>

<td>Cell data</td>

<td>Cell data</td>

</tr>

</table>

<hr>

<table id="table2">

<tr>

<td>Cell data</td>

<td>Cell data</td>

</tr>

<tr>

<td>Cell data</td>

<td>Cell data</td></tr></table>
Technosters Technologies OPC Pvt. Ltd.
8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
20 CSS – Cascading Style Sheet

margin
The CSS margin property is CSS shorthand for specifying margin-top, margin-right,
margin-bottom and margin-left properties in a single declaration. One value
provided makes all sides have the same value. Two values provided affects
top/bottom and left /right sides together. Four values sets margin space for each
side separately. The values can be negative.

<style>

div {

margin: 20px; /* (all-around) */

margin: 20px auto; /* (top-bottom)(left-right) */

margin: 10px auto 30px; /* (top)(left-right) (bottom)*/

margin: 10px 20px 30px 40px; /* (top)(right) (bottom)(left)*/

width: 550px;

background: #DFEFFF;

border: #5BADFF 1px solid;

padding:10px;

</style>

<div>div content ...</div>

margin bottom
The CSS margin-bottom property controls margin space on the outside bottom edge
of elements.

<style>

.columns {

margin-bottom: 50px;

background: lightgray;

width: 200px;

height: 200px;

float: left;

</style>

<div class="columns">div content ...</div>

<div class="columns">div content ...</div>

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 21

margin left
The CSS margin-left property controls margin space on the outside left edge of
elements.

margin right
The CSS margin-right property controls margin space on the outside right edge of
elements.

margin top
The CSS margin-top property controls margin space on the outside top edge of
elements.

padding
The CSS padding property is CSS shorthand for specifying padding-top, padding-
right, padding-bottom and padding-left properties in a single declaration. We can set
even padding on all four inner sides by using one value instead of four values. Two
values provided affects top/bottom and right/left inner sides together. Four values
sets padding space for each inner side separately. The values can be positive only.

<style>

#div1 {

padding: 10px; /* all around inner side */

padding: 10px 30px; /* (top-bottom) (left-right) */

padding: 10px 20px 30px; /* (top)(left-right) (bottom) */

padding: 10px 20px 30px 40px; /* top right bottom left */

background:#DFEFFF;

#div1 p{background: #FFF; }

</style>

<div id="div1">

<p>child of div1... paragraph content ...</p>

</div>

padding top
The CSS padding-top property is used to create top space inside of elements.

padding right
The CSS padding-right property is used to create right space inside of elements.

padding bottom
The CSS padding-bottom property is used to create bottom space inside of
elements.

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
22 CSS – Cascading Style Sheet

padding left
The CSS padding-left property is used to create left space inside of elements.

width
The CSS width property is used to specify the width for block display elements, not
including padding, margin or border space.
<style>

div, h3, a, p{

background: #CCC;

padding: 20px;

div{ width: 700px; }

h3{ width: auto; }

a{ width: 100px; display:block; }

p{ width: 80%; }

</style>

<div>div content</div>

<h3>h3 content</h3>

<a>a content</a>

<p>p content</p>

height
The CSS height property is used to specify the height of block elements, not
including padding, margin or border space.

<style>

#container {

width: 500px;

height: 300px;

background: #9FCFFF;

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 23

</style>

<div id="container">500px by 300px block element</div>

min height
The CSS min-height property is used to set the minimum height that an element.
Can be use with the max-height property to create height range for an element.

<style>

#div1 {

min-height: 90px;

background: #FFCAFF;

</style>

<div id="div1">

<p>paragraph content ...</p>

</div>

Note: If content height greater then element’s height with CSS property min-height
so element’s height increase basis on content.

max height
The CSS max-height property is used to set the maximum height that an element
can grow to be. Use with min-height to create a height range for the element. Use in
conjunction with the overflow property to show scrollbars or hide content that might
go beyond the max-height of the element.

<style>

#div1 {

max-height: 200px;

min-height: 90px;

background: #FFCAFF;

overflow: auto;

</style>

<div id="div1">

<p>paragraph content ...</p>

</div>

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
24 CSS – Cascading Style Sheet

CSS float
The CSS float property is used to float elements to either the left or right side.HTML
works without float from top to bottom

<style type="text/css">

#div1 {

float: left;

background: #BFFFFF;

border: #00D2D2 1px solid;

padding: 12px;

width: 120px;

height: 60px;

#div2 {

float: right;

background: #FFD9F8;

border: #F0F 1px solid;

padding: 12px;

width: 120px;

height: 60px;

</style>

<div id="div1">div content ...</div>

<div id="div2">div content ...</div>

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 25

Square Rectangle Rounded corner

Circle Moon Pac Man

Triangle Up Triangle Down

Triangle Left Triangle Right

Triangle Top Left Triangle Top Right

Triangle Bottom Left Triangle Bottom Right

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
26 CSS – Cascading Style Sheet

Position
CSS helps you to position your HTML element. You can put any HTML element at
whatever location you like. You can specify whether you want the element
positioned relative to its natural position in the page or absolute based on its parent
element.

Static Position
HTML elements are positioned static by default. Static positioned elements are not
affected by the top, bottom, left, and right properties.

<html>

<head>

</head>

<body>

<div style="position:static;background-color:yellow;">

This div has static positioning.

</div>

</body>

</html>

Relative Position
Relative positioning changes the position of the HTML element relative to where it
normally appears. So "left:20" adds 20 pixels to the element's LEFT position.

You can use two values top and left along with the position property to move an
HTML element anywhere in the HTML document.

<html>

<head>

</head>

<body>

<div style="position:relative;left:80px;top:20px;background-color:yellow;">

This div has relative positioning.

</div>

</body>

</html>

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 27

Absolute Positioning
An element with position: absolute is positioned at the specified coordinates relative
to your screen top-left corner.

You can use two values top and left along with the position property to move an
HTML element anywhere in the HTML document.

<html>

<head>

</head>

<body>

<div style="position:absolute; left:80px; top:20px; background-color:yellow;">

This div has absolute positioning.

</div>

</body>

</html>

Fixed Positioning
Fixed positioning allows you to fix the position of an element to a particular spot on
the page, regardless of scrolling. Specified coordinates will be relative to the browser
window.

You can use two values top and left along with the position property to move an
HTML element anywhere in the HTML document.

<html>

<head>

</head>

<body>

<div style="position:fixed; left:80px; top:20px; background-color:yellow;">

This div has fixed positioning.

</div>

</body>

</html>

top
The CSS top property is used to offset the top position of relative, absolute and fixed
position elements.

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
28 CSS – Cascading Style Sheet

bottom
The CSS bottom property is used to offset the bottom position of relative, absolute
and fixed position elements.

left
The CSS left property is used to offset the left position of relative, absolute and fixed
position elements.

right
The CSS right property is used to offset the right position of relative, absolute and
fixed position elements.

Overlapping Elements
When elements are positioned, they can overlap other elements.

z-index
The z-index property specifies the stack order of an element (which element should
be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

Horizontal Navigation Bar

<style>

*{margin: 0; padding: 0;}

nav{ width:100%; height: 50px; background: #c04; }

nav ul{ list-style: none; }

nav ul li a{

float: left;

line-height: 50px; color:#fff; padding: 0 50px; text-decoration: none;

nav ul li a:hover{ background: #333; }

</style>

<nav><ul>

<li><a href="#">Home</a></li>

<li><a href="#">Home</a></li>

<li><a href="#">Home</a></li>

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 29

<li><a href="#">Home</a></li>

<li><a href="#">Home</a></li>

</ul></nav>

list-style
list style : none; is used to remove bullets from unordered list.

line-height
The line-height property specifies the line height for text.

text-decoration
The text-decoration property specifies the decoration added to text.

(none|underline|overline|line-through)

CSS Multiple Backgrounds

CSS allows you to add multiple background images for an element, through
the background-image property.

The different background images are separated by commas, and the images are
stacked on top of each other, where the first image is closest to the viewer.

#example1 {
background-image: url(img-1.ext), url(img-2.ext);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
#example2 {
background: url(img-1.ext) right bottom no-repeat, url(img-2.ext) left top
repeat;
}

CSS Background Size

The CSS background-size property allows you to specify the size of background
images.

The size can be specified in lengths, percentages, or by using one of the two
keywords: contain or cover.

#div1 {
background: url(img.ext);
background-size: 100px 80px;
background-repeat: no-repeat;
}

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
30 CSS – Cascading Style Sheet

The two other possible values for background-size are contain and cover.

The contain keyword scales the background image to be as large as possible (but
both its width and its height must fit inside the content area). As such, depending on
the proportions of the background image and the background positioning area, there
may be some areas of the background which are not covered by the background
image.

The cover keyword scales the background image so that the content area is
completely covered by the background image (both its width and height are equal to
or exceed the content area). As such, some parts of the background image may not
be visible in the background positioning area.

The following example illustrates the use of contain and cover:

#div1 {
background: url(img.ext);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img.ext);
background-size: cover;
background-repeat: no-repeat;
}

Define Sizes of Multiple Background Images

The background-size property also accepts multiple values for background size
(using a comma-separated list), when working with multiple backgrounds.

The following example has three background images specified, with different
background-size value for each image:

#example1 {
background: url(img-1.ext) left top no-repeat, url(img-2.ext) right bottom
no-repeat, url(img-3.ext) left top repeat;
background-size: 50px, 130px, auto; /* img-1,img-2, img-3 */
}

Full Size Background Image

Now we want to have a background image on a website that covers the entire
browser window at all times.

The requirements are as follows:

 Fill the entire page with the image (no white space)
 Scale image as needed
 Center image on page
 Do not cause scrollbars

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 31

html {
background: url(img.ext) no-repeat center fixed;
background-size: cover;
}

CSS background-origin Property

The CSS background-origin property specifies where the background image is

positioned.

The property takes three different values:

 border-box - the background image starts from the upper left corner of the
border
 padding-box - (default) the background image starts from the upper left
corner of the padding edge
 content-box - the background image starts from the upper left corner of
the content

#example1 {
border: 10px solid black;
padding: 35px;
background: url(img.ext);
background-repeat: no-repeat;
background-origin: padding-box; /* default */
}

#example2 {
border: 10px solid black;
padding: 35px;
background: url(img.ext);
background-repeat: no-repeat;
background-origin: content-box;
}

#example3 {
border: 10px solid black;
padding: 35px;
background: url(img.ext);
background-repeat: no-repeat;
background-origin: border-box;
}

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
32 CSS – Cascading Style Sheet

CSS background-clip Property

The CSS background-clip property specifies the painting area of the background.

The property takes three different values:

 border-box - (default) the background is painted to the outside edge of the

border
 padding-box - the background is painted to the outside edge of the padding
 content-box - the background is painted within the content box

#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: border-box; /* default*/
}

#example2 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: padding-box;
}

#example3 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}

CSS Gradients
CSS gradients let you display smooth transitions between two or more specified
colors.

CSS Linear Gradients

To create a linear gradient, you must define at least two-color stops. Color stops
are the colors you want to render smooth transitions among. You can also set a
starting point and a direction (or an angle) along with the gradient effect.

Syntax
background: linear-gradient (direction, color-stop1, color-stop2, ...);

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 33

Linear Gradient - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red,
transitioning to yellow:

#grad {
background: linear-gradient(blue, yellow);
}

Linear Gradient - Left to Right

The following example shows a linear gradient that starts from the left. It starts red,
transitioning to yellow:

#grad {
background: linear-gradient(to right,blue , yellow);
}

Linear Gradient - Diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical
starting positions.

The following example shows a linear gradient that starts at top left (and goes to
bottom right). It starts red, transitioning to yellow:

#grad {
background: linear-gradient(to bottom right, blue, yellow);
}

Using Angles
If you want more control over the direction of the gradient, you can define an angle,
instead of the predefined directions (to bottom, to top, to right, to left, to bottom
right, etc.).

Syntax
background: linear-gradient(angle, color-stop1, color-stop2);

The angle is specified as an angle between a horizontal line and the gradient line.

The following example shows how to use angles on linear gradients:

#grad {
background: linear-gradient(-90deg, red, yellow);
}

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
34 CSS – Cascading Style Sheet

Using Multiple Color Stops

The following example shows a linear gradient (from top to bottom) with multiple
color stops:

#grad {
background: linear-gradient(red, yellow, green);
}

The following example shows how to create a linear gradient (from left to right) with
the color of the rainbow and some text:

#grad {
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
}

Using Transparency
CSS gradients also support transparency, which can be used to create fading effects.

To add transparency, we use the rgba() function to define the color stops. The last
parameter in the rgba() function can be a value from 0 to 1, and it defines the
transparency of the color: 0 indicates full transparency, 1 indicates full color (no
transparency).

The following example shows a linear gradient that starts from the left. It starts fully
transparent, transitioning to full color red:

#grad {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Repeating a linear-gradient
The repeating-linear-gradient() function is used to repeat linear gradients:

#grad {
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 35

CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient, you must also define at least two-color stops.

Syntax
background: radial-gradient(shape size at position, start-color, ..., last-
color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Radial Gradient - Evenly Spaced Color Stops (this is default)

The following example shows a radial gradient with evenly spaced color stops:

#grad {
background: radial-gradient(blue, yellow, green);
}

Radial Gradient - Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color stops:

#grad {
background: radial-gradient(red 5%, yellow 15%, green 60%);
}

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
36 CSS – Cascading Style Sheet

CSS Transforms
CSS transforms allow you to translate, rotate, scale, and skew elements.

A transformation is an effect that lets an element change shape, size and position.

CSS supports 2D and 3D transformations.

CSS 2D Transforms

In this chapter you will learn about the following 2D transformation methods:

 translate()
 rotate()
 scale()
 skewX()
 skewY()

The translate() Function

The translate() method moves an element from its current position (according
to the parameters given for the X-axis and the Y-axis).

div {
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari */
transform: translate(50px, 100px);
}

The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise

according to a given degree.

div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 37

Using negative values will rotate the element counter-clockwise.

div {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}

div {
-ms-transform: rotateY(-20deg); /* IE 9 */
-webkit-transform: rotateY(-20deg); /* Safari */
transform: rotateY(-20deg);
}

div {
-ms-transform: rotateY(20deg); /* IE 9 */
-webkit-transform: rotateY(20deg); /* Safari */
transform: rotateY(20deg);
}

div {
-ms-transform: rotateX(-20deg); /* IE 9 */
-webkit-transform: rotateX(-20deg); /* Safari */
transform: rotateX(-20deg);
}
div {
-ms-transform: rotateX(20deg); /* IE 9 */
-webkit-transform: rotateX(20deg); /* Safari */
transform: rotateX(20deg);
}

The scale() Method

The scale() method increases or decreases the size of an element (according to

the parameters given for the width and height).

div {
-ms-transform: scale(2, 3); /* IE 9 */
-webkit-transform: scale(2, 3); /* Safari */
transform: scale(2, 3);
}

The following example decreases the <div> element to be half of its original
width and height:

div {
-ms-transform: scale(0.5, 0.5); /* IE 9 */
-webkit-transform: scale(0.5, 0.5); /* Safari */

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
38 CSS – Cascading Style Sheet

transform: scale(0.5, 0.5);

}

The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.

div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}

The skewY() Method

The skewY() method skews an element along the Y-axis by the given angle.

div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}

The skew() Method

The skew() method skews an element along the X and Y-axis by the given
angles.

div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}

Note: If the second parameter is not specified, it has a zero value. So, the
following example skews the <div> element 20 degrees along the X-axis:

div {
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 39

CSS 3D Transforms
CSS allows you to format your elements using 3D transformations.

 rotateX()
 rotateY()
 rotateZ()

The rotateX() Method

The rotateX() method rotates an element around its X-axis at a given degree:

#myDiv {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}

The rotateY() Method

The rotateY() method rotates an element around its Y-axis at a given degree:

#myDiv {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}

The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given degree:

#myDiv {
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
40 CSS – Cascading Style Sheet

CSS Animations?
The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

/* The animation code */

@keyframes animationName {
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: animationName;
animation-duration: 4s;
}

The animation-duration property defines how long time an animation should

take to complete. If the animation-duration property is not specified, no
animation will occur, because the default value is 0s (0 seconds).

/* The animation code */

@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Technosters Technologies OPC Pvt. Ltd.

www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 41

/* The animation code */

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Delay an Animation
The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an
animation should run.

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
Technosters Technologies OPC Pvt. Ltd.
8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.
42 CSS – Cascading Style Sheet

The following example uses the value "infinite" to make the animation continue
for ever:

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

Run Animation in Reverse Direction or

Alternate Cycles
The animation-direction property specifies whether an animation should be
played forwards, backwards or in alternate cycles.

The animation-direction property can have the following values:

 normal - The animation is played as normal (forwards). This is default

 reverse - The animation is played in reverse direction (backwards)
 alternate - The animation is played forwards first, then backwards
 alternate-reverse - The animation is played backwards first, then
forwards

The following example will run the animation in reverse direction (backwards):

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}

The following example uses the value "alternate" to make the animation run
forwards first, then backwards:

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
Technosters Technologies OPC Pvt. Ltd.
www.technosters.com info@technosters.com +91-9759597195
CSS – Cascading Style Sheet 43

animation-iteration-count: 2;
animation-direction: alternate;
}

The following example uses the value "alternate-reverse" to make the animation
run backwards first, then forwards:

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}

Technosters Technologies OPC Pvt. Ltd.

8/195, Engineer’s Colony, Opp. Omaxe Mall, Bye Pass Road, Agra – 282005.