0% found this document useful (0 votes)

7 views148 pages

CSS Tutorial

Uploaded by

Velocis Eduaction Mall

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

7 views148 pages

CSS Tutorial

Uploaded by

Velocis Eduaction Mall

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 148

Prepare by velocis education CSS NOTES

CSS Tutorial
CSS Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

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

p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

</body>
</html>

CSS Selectors
We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)
 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
1
Prepare by velocis education CSS NOTES

<p>Every paragraph will be affected by the style.</p>

</body>
</html>

The CSS id Selector

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>
</html>

The CSS class Selector

Example
In this example all HTML elements with class="center" will be red and center-aligned:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

Example
In this example only <p> elements with class="center" will be red and center-aligned:

<!DOCTYPE html>

2
Prepare by velocis education CSS NOTES

<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>

</body>
</html>

Example
In this example the <p> element will be styled according to class="center" and to class="large":
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}

p.large {
font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-
size.</p>

</body>
</html>

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}

3
Prepare by velocis education CSS NOTES

</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

</body>
</html>

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

All CSS Simple Selectors

Selector Example Example description

#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

* * Selects all elements

element p Selects all <p> elements

element,element,.. div, p Selects all <div> elements and all <p> elements

4
Prepare by velocis education CSS NOTES

CSS Colors
CSS Background Color
You can set the background color for HTML elements:
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
</p>

</body>
</html>

CSS Text Color

You can set the color of text:
<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci

tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

CSS Backgrounds
CSS background-color
The background-color property specifies the background color of an element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>

5
Prepare by velocis education CSS NOTES

<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>
</html>
Other Elements
You can set the background color for any HTML elements:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p{
background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>

<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

CSS Background Image

CSS background-image
The background-image property specifies an image to use as the background of an element.
Example
Set the background image for a page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>

6
Prepare by velocis education CSS NOTES

<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

Example
This example shows a bad combination of text and background image. The text is hardly
readable:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>

CSS Background Image Repeat

CSS background-repeat
By default, the background-image property repeats an image both horizontally and vertically.
Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Strange background image...</p>

</body>
</html>

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background
will look better:
7
Prepare by velocis education CSS NOTES

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

CSS Borders
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border

Example
Demonstration of the different border styles:

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

8
Prepare by velocis education CSS NOTES

</style>
</head>
<body>

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

CSS Border Width

CSS Border Width
The border-width property specifies the width of the four borders.
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}

p.five {
border-style: double;
border-width: 15px;
}

9
Prepare by velocis education CSS NOTES

p.six {
border-style: double;
border-width: thick;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>

<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone.

Always specify the "border-style" property to set the borders first.</p>

</body>
</html>

Specific Side Widths

The border-width property can have from one to four values (for the top border, right border,
bottom border, and the left border)
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
</style>
</head>
<body>

<h2>The border-width Property</h2>

<p>The border-width property can have from one to four values (for the top border, right
border, bottom border, and the left border):</p>

<p class="one">Some text.</p>

10
Prepare by velocis education CSS NOTES

<p class="two">Some text.</p>

</body>
</html>

CSS Border Color

CSS Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:
 name - specify a color name, like "red"
 HEX - specify a HEX value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
 transparent
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>

<h2>The border-color Property</h2>

<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>

<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the
"border-style" property to set the borders first.</p>

</body>
</html>

11
Prepare by velocis education CSS NOTES

CSS Border Sides

CSS Border - Individual Sides
From the examples on the previous pages, you have seen that it is possible to specify a different
border for each side.
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>

<p>2 different border styles.</p>

</body>
</html>

CSS Shorthand Border Property

CSS Border - Shorthand Property
Like you saw in the previous page, there are many properties to consider when dealing with
borders.
To shorten the code, it is also possible to specify all the individual border properties in one
property.
The border property is a shorthand property for the following individual border properties:
 border-width
 border-style (required)
 border-color
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-

color.</p>

</body>
</html>

12
Prepare by velocis education CSS NOTES

Left Border
<!DOCTYPE html>
<html>
<head>
<style>
p{
border-left: 6px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-left Property</h2>

<p>This property is a shorthand property for border-left-width, border-left-style, and border-
left-color.</p>

</body>
</html>

Bottom Border

<!DOCTYPE html>
<html>
<head>
<style>
p{
border-bottom: 6px solid red;
background-color: lightgrey;
}
</style>
</head>
<body>

<h2>The border-bottom Property</h2>

<p>This property is a shorthand property for border-bottom-width, border-bottom-style, and
border-bottom-color.</p>

</body>
</html>

CSS Rounded Borders

CSS Rounded Borders
The border-radius property is used to add rounded borders to an element:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
padding: 5px;
}

13
Prepare by velocis education CSS NOTES

p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}

p.round2 {
border: 2px solid red;
border-radius: 8px;
padding: 5px;
}

p.round3 {
border: 2px solid red;
border-radius: 12px;
padding: 5px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>

<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>

<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

</body>
</html>

CSS Margins
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Margins</h2>

<div>This element has a margin of 70px.</div>

</body>
</html>

14
Prepare by velocis education CSS NOTES

CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined
borders.
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
 margin-top
 margin-right
 margin-bottom
 margin-left

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.</div>

</body>
</html>

CSS Padding
CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of
any defined borders.
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;

15
Prepare by velocis education CSS NOTES

padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding
of 50px, and a left padding of 80px.</div>

</body>
</html>

CSS Height, Width and Max-width

<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 100%;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS height and width properties</h2>

<div>This div element has a height of 50 pixels and a width of 100%.</div>

</body>
</html>

CSS height and width Values

The height and width properties may have the following values:
 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm, etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;

16
Prepare by velocis education CSS NOTES

}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div>

</body>
</html>

Setting max-width
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-width of an element</h2>

<div>This div element has a height of 100px and a max-width of 500px.</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

CSS Box Model

The CSS Box Model
Explanation of the different parts:
 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

17
Prepare by velocis education CSS NOTES

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It
consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a
15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

Width and Height of an Element

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">

<div>The picture above is 350px wide. The total width of this element is also 350px.</div>

</body>
</html>

18
Prepare by velocis education CSS NOTES

CSS Outline

CSS has the following outline properties:

 outline-style
 outline-color
 outline-width
 outline-offset
 outline

CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following
values:
 dotted - Defines a dotted outline
 dashed - Defines a dashed outline
 solid - Defines a solid outline
 double - Defines a double outline
 groove - Defines a 3D grooved outline
 ridge - Defines a 3D ridged outline
 inset - Defines a 3D inset outline
 outset - Defines a 3D outset outline
 none - Defines no outline
 hidden - Defines a hidden outline
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>

<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
19
Prepare by velocis education CSS NOTES

</html>

CSS Outline Width

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}

p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}

p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}

p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}
</style>
</head>
<body>

<h2>The outline-width Property</h2>

<p class="ex1">A thin outline.</p>

<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">A 4px thick outline.</p>

</body>
</html>

CSS Outline Color

<!DOCTYPE html>
<html>
<head>

20
Prepare by velocis education CSS NOTES

p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}

p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>

<p>The outline-color property is used to set the color of the outline.</p>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset grey outline.</p>

</body>
</html>

HEX Values
The outline color can also be specified using a hexadecimal value

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: #ff0000; /* red */
}

p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: #0000ff; /* blue */
}

p.ex3 {
border: 2px solid black;
outline-style: solid;
21
Prepare by velocis education CSS NOTES

outline-color: #bbbbbb; /* grey */

}
</style>
</head>
<body>

<h2>The outline-color Property</h2>

<p>The color of the outline can also be specified using a hexadecimal value (HEX):</p>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

RGB Values
Or by using RGB values:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}

p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: rgb(0, 0, 255); /* blue */
}

p.ex3 {
border: 2px solid black;
outline-style: solid;
outline-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>

<p>The color of the outline can also be specified using RGB values:</p>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

22
Prepare by velocis education CSS NOTES

HSL Values
You can also use HSL values:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}

p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: hsl(240, 100%, 50%); /* blue */
}

p.ex3 {
border: 2px solid black;
outline-style: solid;
outline-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>

<p>The color of the outline can also be specified using HSL values:</p>

<p class="ex1">A solid red outline.</p>

<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

CSS Outline Offset

<!DOCTYPE html>
<html>
<head>
<style>
p{
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>

<h2>The outline-offset Property</h2>

23
Prepare by velocis education CSS NOTES

<p>This paragraph has an outline 15px outside the border edge.</p>

</body>
</html>

CSS Text
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}

h1 {
color: green;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>

<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a
page is defined in the body selector.</p>
<p>Another paragraph.</p>

</body>
</html>

Text Color and Background Color

In this example, we define both the background-color property and the color property:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}

div {
background-color: blue;
color: white;
}
</style>
</head>

24
Prepare by velocis education CSS NOTES

<body>

<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>

</body>
</html>

CSS Text Alignment

Text Alignment
The text-align property is used to set the horizontal alignment of a text.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
</html>

Text Align Last

The text-align-last property specifies how to align the last line of a text.

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
text-align-last: right;
}

p.b {
text-align-last: center;

25
Prepare by velocis education CSS NOTES

p.c {
text-align-last: justify;
}
</style>
</head>
<body>

<h1>The text-align-last Property</h1>

<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida
libero rhoncus ut.</p>

<h2>text-align-last: center:</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida
libero rhoncus ut.</p>

<h2>text-align-last: justify:</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida
libero rhoncus ut.</p>

</body>
</html>

Vertical Alignment
The vertical-align property sets the vertical alignment of an element.

!DOCTYPE html>
<html>
<head>
<style>
img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}
26
Prepare by velocis education CSS NOTES

</style>
</head>
<body>

<h1>The vertical-align Property</h1>

<h2>vertical-align: baseline (default):</h2>

<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default
alignment.</p>

<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top
alignment.</p>

<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom
alignment.</p>

<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub
alignment.</p>

<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super
alignment.</p>

</body>
</html>

CSS Text Transformation

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>

<h1>Using the text-transform property</h1>

27
Prepare by velocis education CSS NOTES

<p class="uppercase">This text is transformed to uppercase.</p>

<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>

</body>
</html>

CSS Text Spacing

Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
letter-spacing: 5px;
}

h3 {
letter-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using letter-spacing</h1>

<h2>This is heading 1</h2>

<h3>This is heading 2</h3>

</body>
</html>

Line Height
The line-height property is used to specify the space between lines:
<!DOCTYPE html>
<html>
<head>
<style>
p.small {
line-height: 0.7;
}

p.big {
line-height: 1.8;
}
</style>
</head>
<body>

<h1>Using line-height</h1>

<p>
This is a paragraph with a standard line-height.<br>
28
Prepare by velocis education CSS NOTES

The default line height in most browsers is about 110% to 120%.<br>

</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

Word Spacing
The word-spacing property is used to specify the space between the words in a text.
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
word-spacing: 10px;
}

p.two {
word-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using word-spacing</h1>

<p>This is a paragraph with normal word spacing.</p>

<p class="one">This is a paragraph with larger word spacing.</p>

<p class="two">This is a paragraph with smaller word spacing.</p>

</body>
</html>

White Space
The white-space property specifies how white-space inside an element is handled.
<!DOCTYPE html>
<html>
<head>
<style>
p{
white-space: nowrap;
}

29
Prepare by velocis education CSS NOTES

</style>
</head>
<body>

<h1>Using white-space</h1>

<p>Try to remove the white-space property to see the difference!</p>

</body>
</html>

CSS Text Shadow

Text Shadow

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Next, add a color (red) to the shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>

30
Prepare by velocis education CSS NOTES

<h1>Text-shadow effect!</h1>

</body>
</html>

Then, add a blur effect (5px) to the shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

More Text Shadow Examples

Example 1
Text-shadow on a white text:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Example 2
Text-shadow with red neon glow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000;
}
</style>

31
Prepare by velocis education CSS NOTES

</head>
<body>

<h1>Text-shadow with red neon glow!</h1>

</body>
</html>

Example 3
Text-shadow with red and blue neon glow

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>Text-shadow with red and blue neon glow!</h1>

</body>
</html>

CSS Links
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
<!DOCTYPE html>
<html>
<head>
<style>
a{
color: hotpink;
}
</style>
</head>
<body>

<h2>Style a link with a color</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

Background Color
The background-color property can be used to specify a background color for links:
<!DOCTYPE html>
<html>

32
Prepare by velocis education CSS NOTES

<head>
<style>
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
</style>
</head>
<body>

<h2>Styling a link with background-color property</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>

</body>
</html>

Link Buttons
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>

33
Prepare by velocis education CSS NOTES

<p>A link styled as a button:</p>

</body>
</html>

CSS Lists
Different List Item Markers
The list-style-type property specifies the type of list item marker.

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>

<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

34
Prepare by velocis education CSS NOTES

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<h2>The list-style-image Property</h2>

<p>The list-style-image property specifies an image as the list item marker:</p>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

Styling List With Colors

<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
35
Prepare by velocis education CSS NOTES

margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors</h1>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

CSS Tables
Table Borders
To specify table borders in CSS, use the border property.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>

36
Prepare by velocis education CSS NOTES

<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

</body>
</html>

Full-Width Table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}

table {
width: 100%;
}
</style>
</head>
<body>

<h2>Full-width Table</h2>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

</body>
</html>

Collapse Table Borders

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid;
}

37
Prepare by velocis education CSS NOTES

table {
width: 100%;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Let the table borders collapse</h2>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>

</body>
</html>

CSS Table Size

Table Width and Height
The width and height of a table are defined by the width and height properties.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}

th {
height: 70px;
}
</style>
</head>
<body>

<h2>The width and height Properties</h2>

38
Prepare by velocis education CSS NOTES

<p>Set the width of the table, and the height of the table header row:</p>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>

</body>
</html>

CSS Table Alignment

Horizontal Alignment
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}

td {
text-align: center;
}
</style>
</head>
<body>

39
Prepare by velocis education CSS NOTES

<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of the content in th
or td.</p>

</body>
</html>

Vertical Alignment
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}

td {
height: 50px;
vertical-align: bottom;
}
40
Prepare by velocis education CSS NOTES

</style>
</head>
<body>

<h2>The vertical-align Property</h2>

<p>This property sets the vertical alignment (like top, bottom, or middle) of the content in th
or td.</p>

</body>
</html>

CSS Table Style

Table Padding

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}

table {
border-collapse: collapse;

41
Prepare by velocis education CSS NOTES

width: 100%;
}

th, td {
padding: 15px;
}
</style>
</head>
<body>

<h2>The padding Property</h2>

<p>This property adds space between the border and the content in a table.</p>

</body>
</html>

CSS Layout - width and max-width

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;

42
Prepare by velocis education CSS NOTES

div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>CSS Max-width</h2>

<div class="ex1">This div element has width: 500px;</div>

<br>

<div class="ex2">This div element has max-width: 500px;</div>

<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the
difference between
the two divs!</p>

</body>
</html>

CSS Layout - The position Property

position: static;
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>

</body>
</html>

43
Prepare by velocis education CSS NOTES

position: relative;
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

position: fixed;

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

44
Prepare by velocis education CSS NOTES

CSS Layout - The z-index Property

This is a heading
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="img_tree.png">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>

Without z-index
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}

.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}

.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}

.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;

45
Prepare by velocis education CSS NOTES

height: 100px;
}
</style>
</head>
<body>

<h1>Overlapping elements</h1>

<p>If two positioned elements overlap each other without a z-index specified,
the element defined last in the HTML code will be shown on top:</p>

<div class="container">
<div class="black-box">Black box</div>
<div class="gray-box">Gray box</div>
<div class="green-box">Green box</div>
</div>

</body>
</html>

CSS Layout - Overflow

CSS Overflow
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid;
overflow: visible;
}
</style>
</head>
<body>

<h2>Overflow: visible</h2>

<p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the
element's box:</p>

<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

overflow: hidden
<!DOCTYPE html>
<html>
<head>
<style>

46
Prepare by velocis education CSS NOTES

div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>

<h2>Overflow: hidden</h2>

<p>With the hidden value, the overflow is clipped, and the rest of the content is hidden:</p>
<p>Try to remove the overflow property to understand how it works.</p>

<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

overflow: scroll

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 100px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>

<h2>Overflow: scroll</h2>

<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is added to
scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if
you do not need it):</p>

<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

47
Prepare by velocis education CSS NOTES

overflow: auto
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>

<h2>Overflow: auto</h2>

<p>The auto value is similar to scroll, only it add scrollbars when necessary:</p>

<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

overflow-x and overflow-y

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>

<h2>Overflow-x and overflow-y</h2>

<p>You can also change the overflow of content horizontally or vertically.</p>

<p>overflow-x specifies what to do with the left/right edges of the content.</p>
<p>overflow-y specifies what to do with the top/bottom edges of the content.</p>

<div>You can use the overflow property when you want to have better control of the layout.
The overflow property specifies what happens if content overflows an element's box.</div>

48
Prepare by velocis education CSS NOTES

</body>
</html>

CSS Layout - display: inline-block

Using inline-block to Create Navigation Links

<!DOCTYPE html>
<html>
<head>
<style>
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}

.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>

<h1>Horizontal Navigation Links</h1>

<p>By default, list items are displayed vertically. In this example we use display: inline-block
to display them horizontally (side by side).</p>
<p>Note: If you resize the browser window, the links will automatically break when it
becomes too crowded.</p>

<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#clients">Our Clients</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>

</body>
</html>

CSS Layout - Horizontal & Vertical Align

Center Align Elements
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;

49
Prepare by velocis education CSS NOTES

width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>

<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
<p>Hello World!</p>
</div>

</body>
</html>

Center Vertically - Using padding

<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center vertically with padding</h2>

<p>In this example, we use the padding property to center the div element vertically:</p>

<div class="center">
<p>I am vertically centered.</p>
</div>

</body>
</html>

CSS Combinators
Descendant Selector
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
50
Prepare by velocis education CSS NOTES

<h2>Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants of a specified
element.</p>

<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>

<p>Paragraph 5. Not in a div.</p>

</body>
</html>

Child Selector
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>

<h2>Child Selector</h2>

<p>The child selector (>) selects all elements that are the children of a specified
element.</p>

<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section>

<p>Paragraph 3 in the div (inside a section element).</p>
</section>
<p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>

<p>Paragraph 6. Not in a div.</p>

</body>
</html>

51
Prepare by velocis education CSS NOTES

Adjacent Sibling Selector (+)

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>The + selector is used to select an element that is directly after another specific
element.</p>
<p>The following example selects the first p element that are placed immediately after div
elements:</p>

<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>

<p>Paragraph 4. After a div.</p>

<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>

<p>Paragraph 8. After a div.</p>

</body>
</html>

General Sibling Selector (~)

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>

<p>The general sibling selector (~) selects all elements that are next siblings of a specified
element.</p>

52
Prepare by velocis education CSS NOTES

<p>Paragraph 1.</p>

<div>
<p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>

CSS Pseudo-classes
Pseudo-classes and HTML Classes
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
font-size: 22px;
}
</style>
</head>
<body>

<h2>Pseudo-classes and HTML Classes</h2>

<p>When you hover over the first link below, it will change color and font size:</p>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>

Hover on <div>
An example of using the :hover pseudo-class on a <div> element:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}

div:hover {
background-color: blue;
}

53
Prepare by velocis education CSS NOTES

</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>

CSS -Match the first <p> element

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>

<p>This is some text.</p>

</body>
</html>

Match the first <i> element in all <p> elements

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

54
Prepare by velocis education CSS NOTES

CSS Pseudo-elements
The ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a
text. Some more text. And even more, and more, and more, and more, and more, and more,
and more, and more, and more, and more, and more, and more.</p>

</body>
</html>

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character
of a text!</p>

</body>
</html>

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>

55
Prepare by velocis education CSS NOTES

</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character
of a text!</p>

</body>
</html>

Multiple Pseudo-elements
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}

p::first-line {
color: #0000ff;
font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect
to the first letter and the first line of a text!</p>

</body>
</html>

CSS - The ::before Pseudo-element

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>

</body>
</html>

56
Prepare by velocis education CSS NOTES

CSS Opacity / Transparency

Transparent Image
The opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the
more transparent:</p>

<p>Image with 50% opacity:</p>

</body>
</html>

Transparent Hover Effect

The opacity property is often used together with the :hover selector to change the opacity on
mouse-over:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}

img:hover {
opacity: 1.0;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the
opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

57
Prepare by velocis education CSS NOTES

Text in Transparent Box

<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}

div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}

div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>
</html>

CSS Navigation Bar

Navigation Bar = List of Links
<!DOCTYPE html>
<html>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html>

58
Prepare by velocis education CSS NOTES

CSS Vertical Navigation Bar

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>

</body>
</html>

Vertical Navigation Bar Examples

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {

59
Prepare by velocis education CSS NOTES

background-color: #04AA6D;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<p>In this example, we create an "active" class with a green background color and a white
text. The class is added to the "Home" link.</p>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

CSS Horizontal Navigation Bar

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
display: inline;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

60
Prepare by velocis education CSS NOTES

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #04AA6D;
}
</style>
</head>
<body>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Right-Align Links
Right-align links by floating the list items to the right (float:right;):
<!DOCTYPE html>
<html>
<head>
<style>
ul {

61
Prepare by velocis education CSS NOTES

list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #04AA6D;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

</body>
</html>

Border Dividers
Add the border-right property to <li> to create link dividers:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
62
Prepare by velocis education CSS NOTES

float: left;
border-right:1px solid #bbb;
}

li:last-child {
border-right: none;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #04AA6D;
}
</style>
</head>
<body>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a href="#about">About</a></li>
</ul>

</body>
</html>

CSS Dropdowns
Basic Dropdown
Create a dropdown box that appears when the user moves the mouse over an element.

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;

63
Prepare by velocis education CSS NOTES

min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>

</body>
</html>

Right-aligned Dropdown Content

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

64
Prepare by velocis education CSS NOTES

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Aligned Dropdown Content</h2>

<p>Determine whether the dropdown content should go from left to right or right to left with
the left and right properties.</p>

<div class="dropdown" style="float:left;">

<div class="dropdown" style="float:right;">

<button class="dropbtn">Right</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

</body>
</html>

CSS Image Gallery

Image Gallery
The following image gallery is created with CSS:

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
65
Prepare by velocis education CSS NOTES

margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

66
Prepare by velocis education CSS NOTES

CSS Image Sprites

Image Sprites

<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">

</body>
</html>

Image Sprites - Create a Navigation List

<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {

height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
67
Prepare by velocis education CSS NOTES

background: url('img_navsprites.gif') 0 0;
}

#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

</body>
</html>

CSS Attribute Selectors

CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute] Selector</h2>

<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

68
Prepare by velocis education CSS NOTES

CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and value.
<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute="value"] Selector</h2>

<p>The link with target="_blank" gets a yellow background:</p>

</body>
</html>

CSS [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing a
specified word.
<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute~="value"] Selector</h2>

<p>All images with the title attribute containing the word "flower" get a yellow border.</p>

<img src="klematis.jpg" title="klematis flower" width="150" height="113">

</body>
</html>

CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select elements
<!DOCTYPE html>
<html>
<head>
<style>

69
Prepare by velocis education CSS NOTES

[class|="top"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

CSS [attribute^="value"] Selector

The [attribute^="value"] selector is used to select elements with the specified attribute, whose
value starts with the specified value.
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute^="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

CSS [attribute$="value"] Selector

The [attribute$="value"] selector is used to select elements whose attribute value ends with a
specified value.
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute$="value"] Selector</h2>

70
Prepare by velocis education CSS NOTES

<div class="first_test">The first div element.</div>

<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute value contains a
specified value.
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>

<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

Styling Forms
The attribute selectors can be useful for styling forms without class or ID:

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
</head>

71
Prepare by velocis education CSS NOTES

<body>

<h2>Styling Forms</h2>

<form name="input" action="" method="get">

Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">
</form>

</body>
</html>

CSS Forms
The look of an HTML form can be greatly improved with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
}
</style>
</head>
<body>

<h2>A full-width input field</h2>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
</form>

</body>
</html>

Styling Input Fields

Use the width property to determine the width of the input field:
<!DOCTYPE html>
<html>
<head>
<style>
input {
width: 100%;
}
</style>
</head>
<body>

<h2>A full-width input field</h2>

<form>

72
Prepare by velocis education CSS NOTES

<label for="fname">First Name</label>

</body>
</html>

Padded Inputs
Use the padding property to add space inside the text field.
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
</style>
</head>
<body>

<h2>Padded input fields</h2>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>

</body>
</html>

Bordered Inputs
Use the border property to change the border size and color, and use the border-
radius property to add rounded corners:
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
</style>
</head>
<body>

73
Prepare by velocis education CSS NOTES

<h2>Input fields with borders</h2>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>

</body>
</html>

Colored Inputs
Use the background-color property to add a background color to the input, and
the color property to change the text color:

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>

<h2>Input fields with color</h2>

<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

Focused Inputs
By default, some browsers will add a blue outline around the input when it gets focus (clicked
on). You can remove this behavior by adding outline: none; to the input.

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {

74
Prepare by velocis education CSS NOTES

width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #555;
outline: none;
}

input[type=text]:focus {
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Input fields with color on :focus</h2>

<p>Here, the input field gets a color when it gets focus (clicked on):</p>

</body>
</html>

Input with icon/image

If you want an icon inside the input, use the background-image property and position it with
the background-position property. Also notice that we add a large left padding to reserve the
space of the icon:

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

75
Prepare by velocis education CSS NOTES

<h2>Input field with an icon inside</h2>

</body>
</html>

Animated Search Input

In this example we use the CSS transition property to animate the width of the search input
when it gets focus.

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>

<h2>Animate width of search input</h2>

</body>
</html>

Styling Textareas
Tip: Use the resize property to prevent textareas from being resized (disable the "grabber" in
the bottom right corner):
<!DOCTYPE html>
<html>
<head>

76
Prepare by velocis education CSS NOTES

<h2>Styling textarea</h2>

<p><strong>Tip:</strong> Use the resize property to prevent textareas from being resized
(disable the "grabber" in the bottom right corner):</p>

</body>
</html>

Styling Select Menus

<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Styling a select menu</h2>

<form>
<select id="country" name="country">
<option value="au">Australia</option>
<option value="ca">Canada</option>
<option value="usa">USA</option>
</select>
</form>
77
Prepare by velocis education CSS NOTES

</body>
</html>

Styling Input Buttons

<!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>

<h2>Styling form buttons</h2>

<input type="button" value="Button">

</body>
</html>

CSS Counters
Automatic Numbering With Counters

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>Using CSS Counters</h1>

<h2>HTML Tutorial</h2>

78
Prepare by velocis education CSS NOTES

<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>

</body>
</html>

Nesting Counters

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}

h1 {
counter-reset: subsection;
}

h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>

<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>

<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>

<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>

</body>
</html>

79
Prepare by velocis education CSS NOTES

CSS Website Layout

Header
A header is usually located at the top of the website (or right below a top navigation menu). It
often contains a logo or the website name:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}

/* Style the header */

.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>

<div class="header">
<h1>Header</h1>
</div>

</body>
</html>

Navigation Bar
A navigation bar contains a list of links to help visitors navigating through your website:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}

body {
margin: 0;
}

/* Style the header */

.header {

80
Prepare by velocis education CSS NOTES

background-color: #f1f1f1;
padding: 20px;
text-align: center;
}

/* Style the top navigation bar */

.topnav {
overflow: hidden;
background-color: #333;
}

/* Change color on hover */

.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>

<div class="header">
<h1>Header</h1>
</div>

</body>
</html>

CSS Units
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.

<!DOCTYPE html>
<html>
<head>
<style>

81
Prepare by velocis education CSS NOTES

h1 {
font-size: 60px;
}

p{
font-size: 25px;
line-height: 50px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will appear as exactly
that size.

Unit Description

cm centimetersTry it

mm millimetersTry it

in inches (1in = 96px = 2.54cm)Try it

px * pixels (1px = 1/96th of 1in)Try it

pt points (1pt = 1/72 of 1in)Try it

pc picas (1pc = 12 pt)

Relative Lengths
Relative length units specify a length relative to another length property. Relative length units
scale better between different rendering mediums.
Unit Description

em Relative to the font-size of the element (2em means 2 times the size of the
current font)

ex Relative to the x-height of the current font (rarely used)

ch Relative to width of the "0" (zero)

rem Relative to font-size of the root element

82
Prepare by velocis education CSS NOTES

vw Relative to 1% of the width of the viewport*

vh Relative to 1% of the height of the viewport*

vmin Relative to 1% of viewport's* smaller dimension

vmax Relative to 1% of viewport's* larger dimension

% Relative to the parent eleme

CSS Specificity
What is Specificity?
If there are two or more CSS rules that point to the same element, the selector with the highest
specificity value will "win", and its style declaration will be applied to that HTML element.

Example 1
In this example, we have used the "p" element as selector, and specified a red color for this
element. The text will be red:

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>

Example 2
In this example, we have added a class selector (named "test"), and specified a green color for
this class.

<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p class="test">Hello World!</p>

</body>
</html>

83
Prepare by velocis education CSS NOTES

Example 3
In this example, we have added the id selector (named "demo"). The text will now be blue,
because the id selector is given higher priority:

<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

Example 4
In this example, we have added an inline style for the "p" element. The text will now be pink,
because the inline style is given the highest priority:

<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>

More Specificity Rules Examples

Equal specificity: the latest rule wins - If the same rule is written twice into the external style
sheet, then the latest rule wins:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

84
Prepare by velocis education CSS NOTES

<h1>This is heading 1</h1>

</body>
</html>

ID selectors have a higher specificity than attribute selectors - Look at the following three
code lines:

<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>

<div id="a">This is a div</div>

</body>
</html>

A class selector beats any number of element selectors - a class selector such as .intro beats
h1, p, div, etc:
<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1 class="intro">This is a heading</h1>

</body>
</html>

CSS The !important Rule

What is !important?
The !important rule in CSS is used to add more importance to a property/value than normal.
In fact, if you use the !important rule, it will override ALL previous styling rules for that
specific property on that element!

<!DOCTYPE html>
<html>
<head>
<style>
#myid {

85
Prepare by velocis education CSS NOTES

background-color: blue;
}

.myclass {
background-color: gray;
}

p{
background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>

Important About !important

The only way to override an !important rule is to include another !important rule on a
declaration :

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue !important;
}

.myclass {
background-color: gray !important;
}

p{
background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>

86
Prepare by velocis education CSS NOTES

CSS Math Functions

The calc() Function
The calc() function performs a calculation to be used as the property value.

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>

<h1>The calc() Function</h1>

<p>Create a div that stretches across the window, with a 50px gap between both sides of
the div and the edges of the window:</p>

<div id="div1">Some text...</div>

</body>
</html>

The max() Function

The max() function uses the largest value, from a comma-separated list of values, as the
property value.

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
</style>
</head>
<body>

<h1>The max() Function</h1>

<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>

<div id="div1">Some text...</div>

87
Prepare by velocis education CSS NOTES

<p>Resize the browser window to see the effect.</p>

</body>
</html>

The min() Function

The min() function uses the smallest value, from a comma-separated list of values, as the
property value.

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
</style>
</head>
<body>

<h1>The min() Function</h1>

<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>

<div id="div1">Some text...</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

CSS Rounded Corners

CSS border-radius - Specify Each Corner
The border-radius property can have from one to four values. Here are the rules:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;

88
Prepare by velocis education CSS NOTES

height: 150px;
}

#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Elliptical border - border-radius: 50px / 15px:</p>

<p>Elliptical border - border-radius: 15px / 50px:</p>

<p>Ellipse border - border-radius: 50%:</p>

</body>
</html>

CSS Multiple Backgrounds

CSS allows you to add multiple background images for an element, through the background-
image property.
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>

<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>

89
Prepare by velocis education CSS NOTES

</div>

</body>
</html>

CSS Background Size

The CSS background-size property allows you to specify the size of background images.
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: contain;
}

.div2 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: cover;
}

.div3 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>The background-size Property</h1>

<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>

<h2>No background-size defined:</h2>

<div class="div3">
90
Prepare by velocis education CSS NOTES

<p>Lorem ipsum dolor sit amet.</p>

</div>

<p>Original image:</p>
<img src="img_flwr.gif" alt="Flowers" width="224" height="162">

</body>
</html>

CSS Colors
RGBA Colors

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>

<h1>Define Colors With RGBA Values</h1>

<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>

</body>
</html>

HSL Colors
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>

91
Prepare by velocis education CSS NOTES

<h1>Define Colors With HSL Values</h1>

<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>

</body>
</html>

HSLA Colors

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>

<h1>Define Colors With HSLA Values</h1>

<p id="p1">Green</p>
<p id="p2">Light green</p>
<p id="p3">Dark green</p>
<p id="p4">Pastel green</p>
<p id="p5">Violet</p>
<p id="p6">Pastel violet</p>

</body>
</html>

Opacity

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);opacity:0.6;}
#p2 {background-color:rgb(0,255,0);opacity:0.6;}
#p3 {background-color:rgb(0,0,255);opacity:0.6;}
#p4 {background-color:rgb(192,192,192);opacity:0.6;}
#p5 {background-color:rgb(255,255,0);opacity:0.6;}
#p6 {background-color:rgb(255,0,255);opacity:0.6;}
</style>
</head>
92
Prepare by velocis education CSS NOTES

<body>

<h1>Define Colors With Opacity</h1>

<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>

</body>
</html>

CSS Color Keywords

The transparent Keyword
The transparent keyword is used to make a color transparent. This is often used to make a
transparent background color for an element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}

div.ex1 {
background-color: lightgreen;
border: 2px solid black;
padding: 15px;
}

div.ex2 {
background-color: transparent;
border: 2px solid black;
padding: 15px;
}
</style>
</head>
<body>

<h2>The transparent Keyword</h2>

<div class="ex1">This div has a light green background.</div>

<br>
<div class="ex2">This div has a transparent background.</div>

</body>
</html>

93
Prepare by velocis education CSS NOTES

The currentcolor Keyword

The currentcolor keyword is like a variable that holds the current value of the color property of
an element.

<!DOCTYPE html>
<html>
<head>
<style>
div {
color: blue;
border: 10px solid currentcolor;
padding: 15px;
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>

<p>The currentcolor keyword refers to the current value of the color property of an
element.</p>

<div>
This div element has a blue text color and a blue border.
</div>

</body>
</html>

The inherit Keyword

The inherit keyword specifies that a property should inherit its value from its parent element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
}

span {
border: inherit;
}
</style>
</head>
<body>

<h2>The inherit Keyword</h2>

<div>Here, the <span>span element's</span> border settings will be inherited from the
parent element.</div>
<br>

94
Prepare by velocis education CSS NOTES

<div style="border:2px dotted blue;">Here, the <span>span element's</span> border

settings will also be inherited from the parent element.</div>

</body>
</html>

CSS Gradients
CSS Linear Gradients
Direction - Top to Bottom

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>

<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

</body>
</html>

Direction - Left to Right

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>

<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

</body>
</html>

95
Prepare by velocis education CSS NOTES

Direction - Diagonal
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>

<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>

96
Prepare by velocis education CSS NOTES

</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>

</body>
</html>

Using Multiple Color Stops

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

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow, green);
}

#grad2 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>

<p><strong>Note:</strong> Color stops are spaced evenly when no percents are
specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>

<h2>7 Color Stops (evenly spaced):</h2>

<h2>3 Color Stops (not evenly spaced):</h2>

97
Prepare by velocis education CSS NOTES

</body>

</html>

CSS Radial Gradients

Radial Gradient - Evenly Spaced Color Stops (this is default)
The following example shows a radial gradient with evenly spaced color stops:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Evenly Spaced Color Stops</h1>

</body>
</html>

Radial Gradient - Differently Spaced Color Stops

The following example shows a radial gradient with differently spaced color stops:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>

<h1>Radial Gradient - Differently Spaced Color Stops</h1>

</body>
</html>

98
Prepare by velocis education CSS NOTES

Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value
is ellipse.

#grad2 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Shapes</h1>

<h2>Ellipse (this is default):</h2>

<h2><strong>Circle:</strong></h2>
<div id="grad2"></div>

</body>
</html>

Repeating a radial-gradient
The repeating-radial-gradient() function is used to repeat radial gradients:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>Repeating Radial Gradient</h1>

99
Prepare by velocis education CSS NOTES

</body>
</html>

CSS Conic Gradients

Conic Gradient: Three Colors
The following example shows a conic gradient with three colors:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Conic Gradient - Three Colors</h1>

</body>
</html>

Conic Gradient: Five Colors

The following example shows a conic gradient with five colors:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>

<h1>Conic Gradient - Five Colors</h1>

</body>
</html>

100
Prepare by velocis education CSS NOTES

Conic Gradient: Three Colors and Degrees

The following example shows a conic gradient with three colors and a degree for each color:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
</style>
</head>
<body>

<h1>Conic Gradient - Defined degree for each color</h1>

</body>
</html>

Create Pie Charts

Just add border-radius: 50% to make the conic gradient look like a pie:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

</body>
</html>

Conic Gradient With Specified From Angle

The [from angle] specifies an angle that the entire conic gradient is rotated by.
<!DOCTYPE html>
<html>
<head>

101
Prepare by velocis education CSS NOTES

<h1>Conic Gradient - With a from angle</h1>

</body>
</html>

Conic Gradient With Specified Center Position

The [at position] specifies the center of the conic gradient.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - With a specified center position</h1>

</body>
</html>

Repeating a Conic Gradient

The repeating-conic-gradient() function is used to repeat conic gradients:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;

102
Prepare by velocis education CSS NOTES

background-color: red; /* For browsers that do not support gradients */

background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient</h1>

</body>
</html>

CSS Shadow Effects

CSS Text Shadow
The CSS text-shadow property applies shadow to text.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Next, add a color to the shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>

</html>

103
Prepare by velocis education CSS NOTES

Then, add a blur effect to the shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

The following example shows a white text with black shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Multiple Shadows
To add more than one shadow to the text, you can add a comma-separated list of shadows.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>Text-shadow with red and blue neon glow!</h1>

</body>
</html>

104
Prepare by velocis education CSS NOTES

The following example shows a white text with black, blue, and darkblue shadow:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

You can also use the text-shadow property to create a plain border around some text
(without shadows):

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>

<h1>Border around text!</h1>

</body>
</html>

CSS Box Shadow

Specify a Horizontal and a Vertical Shadow
In its simplest use, you only specify a horizontal and a vertical shadow. The default color of the
shadow is the current text-color.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;

105
Prepare by velocis education CSS NOTES

background-color: coral;
box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>
</html>

Set the Spread Radius of the Shadow:-

The spread parameter defines the spread radius. A positive value increases the size of the
shadow, a negative value decreases the size of the shadow.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px.</div>

</body>
</html>

Set the inset Parameter

The inset parameter changes the shadow from an outer shadow (outset) to an inner shadow.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue inset;
}

106
Prepare by velocis education CSS NOTES

</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a blurred, lightblue, inset box-shadow.</div>

</body>
</html>

Add Multiple Shadows

An element can also have multiple shadows:
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
margin: 20px;
}

#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
margin: 20px;
}
</style>
</head>
<body>

<h1>Multiple Shadows</h1>

<div id="example1">
<h2>Multiple shadows</h2>
<p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
<br>

<div id="example2">
<h2>Multiple shadows with blur effect</h2>
<p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
</div>

</body>
</html>

107
Prepare by velocis education CSS NOTES

CSS Text Effects

CSS Text Overflow
The CSS text-overflow property specifies how overflowed content that is not displayed should
be signaled to the user.

<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}

p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>

<h1>The text-overflow Property</h1>

<p>The following two paragraphs contains a long text that will not fit in the box.</p>

<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>

<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>

</body>
</html>

CSS Word Wrapping

The CSS word-wrap property allows long words to be able to be broken and wrap onto the next
line.

<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;

108
Prepare by velocis education CSS NOTES

}
</style>
</head>
<body>

<h1>The word-wrap Property</h1>

<p class="test">This paragraph contains a very long word:

thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next
line.</p>

</body>
</html>

CSS Writing Mode

The CSS writing-mode property specifies whether lines of text are laid out horizontally or
vertically.

<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {
writing-mode: horizontal-tb;
}

span.test2 {
writing-mode: vertical-rl;
}

p.test2 {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h1>The writing-mode Property</h1>

<p class="test1">Some text with default writing-mode.</p>

<p>Some text with a span element with a <span class="test2">vertical-rl</span> writing-

mode.</p>

<p class="test2">Some text with writing-mode: vertical-rl.</p>

</body>
</html>

109
Prepare by velocis education CSS NOTES

CSS 2D Transforms
The translate() Method
The translate() method moves an element from its current position
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px,100px);
}
</style>
</head>
<body>

<h1>The translate() Method</h1>

<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current
position.
</div>

</body>
</html>

The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise according to a given
degree.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

110
Prepare by velocis education CSS NOTES

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

The scale() Method

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(2,3);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>

The scaleY() Method

The scaleY() method increases or decreases the height of an element
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;

111
Prepare by velocis education CSS NOTES

transform: scaleY(3);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>

The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

div#myDiv {
transform: skewX(20deg);
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>

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

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

112
Prepare by velocis education CSS NOTES

The skewY() Method

The skewY() method skews an element along the Y-axis by the given angle.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

div#myDiv {
transform: skewY(20deg);
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>

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

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>

The matrix() Method

The matrix() method combines all the 2D transform methods into one.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

div#myDiv1 {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
transform: matrix(1, 0, 0.5, 1, 150, 0);

113
Prepare by velocis education CSS NOTES

}
</style>
</head>
<body>

<h1>The matrix() Method</h1>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>
This a normal div element.
</div>

<div id="myDiv1">
Using the matrix() method.
</div>

<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>

CSS 3D Transforms
The rotateX() Method
The rotateX() method rotates an element around its X-axis at a given degree:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

#myDiv {
transform: rotateX(150deg);
}
</style>
</head>
<body>

<h1>The rotateX() Method</h1>

<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>

<div>
This a normal div element.
</div>

114
Prepare by velocis education CSS NOTES

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

The rotateY() Method

The rotateY() method rotates an element around its Y-axis at a given degree:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

#myDiv {
transform: rotateY(150deg);
}
</style>
</head>
<body>

<h1>The rotateY() Method</h1>

<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 150 degrees.
</div>

</body>
</html>

The rotateZ() Method

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;

115
Prepare by velocis education CSS NOTES

border: 1px solid black;

}

#myDiv {
transform: rotateZ(90deg);
}
</style>
</head>
<body>

<h1>The rotateZ() Method</h1>

<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated 90 degrees.
</div>

</body>
</html>

CSS Transitions
How to Use CSS Transitions?
To create a transition effect, you must specify two things:
 the CSS property you want to add an effect to
 the duration of the effect

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

116
Prepare by velocis education CSS NOTES

</body>
</html>

Change Several Property Values

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}

div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

</body>
</html>

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

div:hover {

117
Prepare by velocis education CSS NOTES

width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

</body>
</html>

Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition effect.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>

<h1>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>

118
Prepare by velocis education CSS NOTES

Transition + Transformation
The following example adds a transition effect to the transformation:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}

div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

</body>
</html>

CSS Animations
What are CSS Animations?
An animation lets an element gradually change from one style to another.

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.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {

119
Prepare by velocis education CSS NOTES

from {background-color: red;}

to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Example:-
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

120
Prepare by velocis education CSS NOTES

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}

<h1>CSS Animation</h1>

<p>Using negative values in the animation-delay property: Here, the animation will start as if
it had already been playing for 2 seconds:</p>

</body>
</html>

Set How Many Times an Animation Should Run

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

121
Prepare by velocis education CSS NOTES

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation

should run. The following example will run the animation 3 times before it stops:</p>

</body>
</html>

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.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}

<h1>CSS Animation</h1>

122
Prepare by velocis education CSS NOTES

<p>The animation-direction property specifies whether an animation should be played

forwards, backwards or in alternate cycles. The following example uses the value "alternate"
to make the animation run forwards first, then backwards:</p>

</body>
</html>

The following example uses the value "alternate-reverse" to make the animation run backwards
first, then forwards:
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played

forwards, backwards or in alternate cycles. The following example uses the value "alternate-
reverse" to make the animation run backwards first, then forwards:</p>

</body>
</html>

Specify the Speed Curve of the Animation

The animation-timing-function property specifies the speed curve of the animation.

<!DOCTYPE html>
<html>

123
Prepare by velocis education CSS NOTES

<head>
<style>
div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;
}

#div1 {animation-timing-function: linear;}

#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-timing-function property specifies the speed curve of the animation. The
following example shows some of the different speed curves that can be used:</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

Specify the fill-mode For an Animation

Example:-

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;

124
Prepare by velocis education CSS NOTES

animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}

@keyframes example {
from {top: 0px; background-color: yellow;}
to {top: 200px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation
starts (during the animation-delay period):</p>

</body>
</html>

Example:-
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}

@keyframes example {
from {top: 0px; background-color: yellow;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation
starts, and retain the style values from the last keyframe when the animation ends:</p>

125
Prepare by velocis education CSS NOTES

</body>
</html>

Animation Shorthand Property

The example below uses six of the animation properties:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

<h1>CSS Animation</h1>

<p>This example uses six of the animation properties:</p>

</body>
</html>

CSS Tooltip
Basic Tooltip
Create a tooltip that appears when the user moves the mouse over an element:

<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;

126
Prepare by velocis education CSS NOTES

border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */

position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Basic Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>
</div>

<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and
continue reading on how to position the tooltip in a desirable way.</p>

</body>
</html>

Positioning Tooltips
Right Tooltip

<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;

127
Prepare by velocis education CSS NOTES

text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */

position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Left Tooltip

<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */

position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}

.tooltip:hover .tooltiptext {
128
Prepare by velocis education CSS NOTES

visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Top Tooltip

<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */

position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

129
Prepare by velocis education CSS NOTES

</div>

</body>
</html>

Bottom Tooltip

<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */

position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

130
Prepare by velocis education CSS NOTES

CSS Styling Images

Rounded Images
Use the border-radius property to create rounded images:
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>

<h2>Rounded Image</h2>

<p>Use the border-radius property to create rounded images:</p>

<img src="paris.jpg" alt="Paris" width="300" height="300">

</body>
</html>

Example:-
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>

<h2>Circled Image</h2>

<p>Use the border-radius property to create circled images:</p>

<img src="paris.jpg" alt="Paris" width="300" height="300">

</body>
</html>

131
Prepare by velocis education CSS NOTES

CSS Image Reflection

CSS Image Reflections
The box-reflect property is used to create an image reflection.
The value of the box-reflect property can be: below, above, left , or right.

Example:-
Here we want the reflection below the image:
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-box-reflect: below;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image:</p>

</body>
</html>

Example:-
Here we want the reflection to the right of the image:

<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-box-reflect: right;
}
</style>
</head>
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection to the right of the image:</p>

</body>
</html>

132
Prepare by velocis education CSS NOTES

CSS The object-fit Property

The CSS object-fit Property
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit
its container.

<!DOCTYPE html>
<html>
<head>
<style>
img {
width:200px;
height:300px;
}
</style>
</head>
<body>

<h2>Image</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

CSS The object-position Property

The CSS object-position property is used to specify how an <img> or <video> should be
positioned within its container.

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>

<h2>Using object-fit: cover</h2>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

133
Prepare by velocis education CSS NOTES

Here we will use the object-position property to position the image so that the famous Eiffel
Tower is in center:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 15% 100%;
}
</style>
</head>
<body>

<h2>Using object-position</h2>

<p>Here we will use the object-position property to position the image so that the famous
Eiffel Tower is in center:</p>

<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

CSS Buttons
Basic Button Styling
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>

<h2>CSS Buttons</h2>

<button>Default Button</button>

134
Prepare by velocis education CSS NOTES

<a href="#" class="button">Link Button</a>

<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

</body>
</html>

Button Colors
Use the background-color property to change the background color of a button:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */

.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>

<h2>Button Colors</h2>

<p>Change the background color of a button with the background-color property:</p>

<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body>
</html>

Button Sizes
Use the font-size property to change the font size of a button:
<!DOCTYPE html>
<html>
<head>

135
Prepare by velocis education CSS NOTES

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>

<h2>Button Sizes</h2>

<p>Change the font size of a button with the font-size property:</p>

<button class="button button1">10px</button>

</body>
</html>

Rounded Buttons
Use the border-radius property to add rounded corners to a button:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

136
Prepare by velocis education CSS NOTES

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>

<h2>Rounded Buttons</h2>

<p>Add rounded corners to a button with the border-radius property:</p>

<button class="button button1">2px</button>

</body>
</html>

Colored Button Borders

Use the border property to add a colored border to a button:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}

.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}

137
Prepare by velocis education CSS NOTES

.button3 {
background-color: white;
color: black;
border: 2px solid #f44336;
}

.button4 {
background-color: white;
color: black;
border: 2px solid #e7e7e7;
}

.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
</style>
</head>
<body>

<h2>Colored Button Borders</h2>

<p>Use the border property to add a border to the button:</p>

<button class="button button1">Green</button>

<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body>
</html>

Shadow Buttons
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

138
Prepare by velocis education CSS NOTES

.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>

<h2>Shadow Buttons</h2>

<p>Use the box-shadow property to add shadows to the button:</p>

<button class="button button1">Shadow Button</button>

<button class="button button2">Shadow on Hover</button>

</body>
</html>

Disabled Buttons
Use the opacity property to add transparency to a button (creates a "disabled" look).

.disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
</head>
<body>

<h2>Disabled Button</h2>

<p>Use the opacity property to add some transparency to a button (make it look
disabled):</p>

139
Prepare by velocis education CSS NOTES

<button class="button">Normal Button</button>

<button class="button disabled">Disabled Button</button>

</body>
</html>

Button Width
!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.button1 {width: 250px;}

.button2 {width: 50%;}
.button3 {width: 100%;}
</style>
</head>
<body>

<h2>Set Button Widths</h2>

<p>Use the width property to change the width of the button:</p>

<button class="button button1">250px</button><br>

<p><strong>Tip:</strong> Use pixels if you want to set a fixed width and use percent for
responsive buttons (e.g. 50% of its parent element). Resize the browser window to see the
effect.</p>

</body>
</html>

Button Groups
<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
background-color: #4CAF50; /* Green */
border: none;

140
Prepare by velocis education CSS NOTES

color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}

.btn-group .button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Button Groups</h2>

<p>Remove margins and float the buttons to create a button group:</p>

<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p element also
float next to the buttons.</p>

</body>
</html>

Vertical Button Group

<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
background-color: #4CAF50; /* Green */
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 150px;
display: block;
}

.btn-group .button:not(:last-child) {
border-bottom: none; /* Prevent double borders */

141
Prepare by velocis education CSS NOTES

.btn-group .button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Vertical Button Group</h2>

<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>

</body>
</html>

Button on Image
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}

.container img {
width: 100%;
height: auto;
}

.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #f1f1f1;
color: black;
font-size: 16px;
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}

.container .btn:hover {

142
Prepare by velocis education CSS NOTES

background-color: black;
color: white;
}
</style>
</head>
<body>

<h2>Button on Image</h2>

<p>Add a button on an image:</p>

<div class="container">
<img src="img_lights.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>

</body>
</html>

CSS Pagination Examples

Simple Pagination
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style>
</head>
<body>

<h2>Simple Pagination</h2>

143
Prepare by velocis education CSS NOTES

</body>
</html>

Active and Hoverable Pagination

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>
</head>
<body>

<h2>Active and Hoverable Pagination</h2>

<p>Move the mouse over the numbers.</p>

</body>
</html>

Bordered Pagination
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {

144
Prepare by velocis education CSS NOTES

display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>
</head>
<body>

<h2>Pagination with Borders</h2>

</body>
</html>

Pagination Size

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;

145
Prepare by velocis education CSS NOTES

transition: background-color .3s;

border: 1px solid #ddd;
font-size: 22px;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

</style>
</head>
<body>

<h2>Pagination Size</h2>

<p>Change the font-size property to make the pagination smaller or bigger.</p>

</body>
</html>

CSS Multiple Columns

CSS Create Multiple Columns
The column-count property specifies the number of columns an element should be divided into.

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
}
</style>
</head>
<body>

<h1>Create Multiple Columns</h1>

146
Prepare by velocis education CSS NOTES

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.
</div>

</body>
</html>

CSS Specify the Gap Between Columns

The column-gap property specifies the gap between the columns.

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
column-gap: 40px;
}
</style>
</head>
<body>

<h1>Specify the Gap Between Columns</h1>

</body>
</html>

CSS Column Rules

The column-rule-style property specifies the style of the rule between columns:

<!DOCTYPE html>
<html>
<head>
<style>

147
Prepare by velocis education CSS NOTES

.newspaper {
column-count: 3;
column-gap: 40px;
column-rule-style: solid;
}
</style>
</head>
<body>

<h1>Add a Rule Between the Columns</h1>

</body>
</html>

Specify The Column Width

The column-width property specifies a suggested, optimal width for the columns.
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-width: 100px;
}
</style>
</head>
<body>

<h1>Specify The Column Width</h1>

</body>
</html>

148

Bike Rental System
79% (39)
Bike Rental System
31 pages
Tally Book
100% (1)
Tally Book
105 pages
Css Book
No ratings yet
Css Book
400 pages
Exercise & Question Answers Class X
No ratings yet
Exercise & Question Answers Class X
7 pages
C Lang MCQ
No ratings yet
C Lang MCQ
76 pages
Java MCQ
No ratings yet
Java MCQ
67 pages
Css Presentation
No ratings yet
Css Presentation
44 pages
What Is CSS?
No ratings yet
What Is CSS?
197 pages
CSS Pocket Guide PDF
No ratings yet
CSS Pocket Guide PDF
289 pages
UNIT-2 Web Technology (BCS502)
100% (1)
UNIT-2 Web Technology (BCS502)
27 pages
Daftar Kode Warna Cmyk Dan RGB
100% (1)
Daftar Kode Warna Cmyk Dan RGB
5 pages
DTP MCQ Book
100% (2)
DTP MCQ Book
80 pages
Gtu CCC Theory Qus
100% (1)
Gtu CCC Theory Qus
33 pages
Itec50 Lesson 6 Part 1
No ratings yet
Itec50 Lesson 6 Part 1
142 pages
Cascading Style Sheet Handout March 2023
No ratings yet
Cascading Style Sheet Handout March 2023
104 pages
Python Final
No ratings yet
Python Final
40 pages
CSS1
No ratings yet
CSS1
677 pages
Css Tutorial
No ratings yet
Css Tutorial
65 pages
Unit 3
No ratings yet
Unit 3
75 pages
12th English (SL) Kumar Board Paperset - 2025 (GM) (GSEBMaterial - Com)
No ratings yet
12th English (SL) Kumar Board Paperset - 2025 (GM) (GSEBMaterial - Com)
30 pages
Unit3 TCP (1) Merged
No ratings yet
Unit3 TCP (1) Merged
183 pages
CSS
100% (1)
CSS
264 pages
Pages 4
No ratings yet
Pages 4
106 pages
Cascading Style Sheet: By-Rameshkumar Yadav
No ratings yet
Cascading Style Sheet: By-Rameshkumar Yadav
109 pages
Autocad MCQS
No ratings yet
Autocad MCQS
23 pages
CH 3css
No ratings yet
CH 3css
47 pages
Unit 3
No ratings yet
Unit 3
94 pages
E-Note 28179 Content Document 20241127094830AM
No ratings yet
E-Note 28179 Content Document 20241127094830AM
95 pages
CSS Notes-1
No ratings yet
CSS Notes-1
69 pages
Part 3 CSS Fra
No ratings yet
Part 3 CSS Fra
44 pages
Tot Webdev - CSS
100% (1)
Tot Webdev - CSS
68 pages
Css Notes Parul
No ratings yet
Css Notes Parul
135 pages
Unit2 CSS
No ratings yet
Unit2 CSS
74 pages
WP Unit 3 CSS
No ratings yet
WP Unit 3 CSS
49 pages
Unit3 TCP
No ratings yet
Unit3 TCP
81 pages
Sample Test Cases For Testing Web and Desktop Applications
100% (1)
Sample Test Cases For Testing Web and Desktop Applications
7 pages
3 - Chapter 3 Part I - CSS
No ratings yet
3 - Chapter 3 Part I - CSS
50 pages
CSS Cascading Style Sheet
No ratings yet
CSS Cascading Style Sheet
28 pages
WD Unit-3
No ratings yet
WD Unit-3
50 pages
WDD U3
No ratings yet
WDD U3
32 pages
10 07
No ratings yet
10 07
324 pages
HTML Css
No ratings yet
HTML Css
21 pages
Cascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech Academy
No ratings yet
Cascaded Style Sheet: Vighnesh P Subject Matter Expert Ethnotech Academy
88 pages
By:-Mr. Sachin Kumar Sonker
No ratings yet
By:-Mr. Sachin Kumar Sonker
77 pages
Web Tech (Third Unit)
No ratings yet
Web Tech (Third Unit)
72 pages
Dreamweaver Cs4 Introduction
No ratings yet
Dreamweaver Cs4 Introduction
22 pages
WT Unit2 Css
No ratings yet
WT Unit2 Css
20 pages
Unit - III IT Study From This
No ratings yet
Unit - III IT Study From This
19 pages
Important File Extensions - Computer
No ratings yet
Important File Extensions - Computer
3 pages
Week 5
No ratings yet
Week 5
35 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
52 pages
CSS Basic
No ratings yet
CSS Basic
37 pages
CSS Notes
No ratings yet
CSS Notes
61 pages
What Is CSS?
No ratings yet
What Is CSS?
19 pages
CSS Tutorial: CSS Example With CSS Editor
No ratings yet
CSS Tutorial: CSS Example With CSS Editor
39 pages
2021 08 12 - 16 55 19.Css
No ratings yet
2021 08 12 - 16 55 19.Css
25 pages
CSS Basics
No ratings yet
CSS Basics
30 pages
99 Ways To Speed Up Your Wordpress Website PDF
100% (1)
99 Ways To Speed Up Your Wordpress Website PDF
107 pages
Chapter Three CSS
No ratings yet
Chapter Three CSS
12 pages
Table of Content: Css Notes
100% (2)
Table of Content: Css Notes
10 pages
My Profession
No ratings yet
My Profession
7 pages
Wizard 900/900E Digital Readout Operations Manual
No ratings yet
Wizard 900/900E Digital Readout Operations Manual
198 pages
Introduction To Css
No ratings yet
Introduction To Css
8 pages
Unit2 CSS
No ratings yet
Unit2 CSS
23 pages
CSS Notes
No ratings yet
CSS Notes
20 pages
CSS Notes
No ratings yet
CSS Notes
38 pages
1) CSS Element Selector
No ratings yet
1) CSS Element Selector
11 pages
CSS Introduction
No ratings yet
CSS Introduction
15 pages
Laporan Project Uts
No ratings yet
Laporan Project Uts
20 pages
CSS Introduction
No ratings yet
CSS Introduction
26 pages
ACME Dreamweaver 6
No ratings yet
ACME Dreamweaver 6
76 pages
Nov 2024 Handouts
No ratings yet
Nov 2024 Handouts
5 pages
Md. Imranul Sazzad
No ratings yet
Md. Imranul Sazzad
75 pages
Java FX
No ratings yet
Java FX
93 pages
CSE1041Week1LecUpdated
No ratings yet
CSE1041Week1LecUpdated
16 pages
CSS Basics
No ratings yet
CSS Basics
15 pages
CSS Syntax: Cascading Style Sheet (CSS)
No ratings yet
CSS Syntax: Cascading Style Sheet (CSS)
10 pages
Unit 3 CSS
No ratings yet
Unit 3 CSS
11 pages
Question Bank: Course On Computer Concepts
No ratings yet
Question Bank: Course On Computer Concepts
18 pages
CT WT Lab
No ratings yet
CT WT Lab
37 pages
Cascading Style Sheets (CSS) : The Basics of
No ratings yet
Cascading Style Sheets (CSS) : The Basics of
64 pages
CLASS 7 CSS Handout 1
No ratings yet
CLASS 7 CSS Handout 1
10 pages
Learn CSS - Colors Cheatsheet - Codecademy
No ratings yet
Learn CSS - Colors Cheatsheet - Codecademy
2 pages
Oracle 10g Reports 4 of 4
No ratings yet
Oracle 10g Reports 4 of 4
12 pages
Lecture 7 CSS Layouts 1 - Box Model
No ratings yet
Lecture 7 CSS Layouts 1 - Box Model
10 pages
What Is CSS
No ratings yet
What Is CSS
15 pages
10.6 Creating Fixed-Layout Books With Text Pop-Ups With Multipage Background Images and Text
No ratings yet
10.6 Creating Fixed-Layout Books With Text Pop-Ups With Multipage Background Images and Text
5 pages
Spectral Color Conundrum
No ratings yet
Spectral Color Conundrum
4 pages
Responsive Media in HTML5 Sample Chapter
No ratings yet
Responsive Media in HTML5 Sample Chapter
23 pages
A Project Report On: Punjab University Chandigarh
No ratings yet
A Project Report On: Punjab University Chandigarh
56 pages
Online Notice Board
100% (1)
Online Notice Board
2 pages
Active City Administration
100% (2)
Active City Administration
32 pages
New Comers Technical Guide
No ratings yet
New Comers Technical Guide
15 pages
Tally Assignment 12
No ratings yet
Tally Assignment 12
90 pages
Introduction To CSS - Prelim
No ratings yet
Introduction To CSS - Prelim
9 pages
Web Css Notes
No ratings yet
Web Css Notes
6 pages
CV
No ratings yet
CV
2 pages
Computer Generations: Types of Computer Generation and Examples
No ratings yet
Computer Generations: Types of Computer Generation and Examples
5 pages
CCC Question Bank
100% (1)
CCC Question Bank
4 pages
CV of Jacie Yang
No ratings yet
CV of Jacie Yang
5 pages
Web Based Claims Processing System WCPS
No ratings yet
Web Based Claims Processing System WCPS
5 pages
Interjection Punctuation HW
No ratings yet
Interjection Punctuation HW
1 page
Personal Detail: Residence 203 Mahavir Villa, Amroli Main Road Amroli - Surat 394 107
No ratings yet
Personal Detail: Residence 203 Mahavir Villa, Amroli Main Road Amroli - Surat 394 107
1 page
Tally Assignment
80% (65)
Tally Assignment
26 pages
CSS Selectors and Specificity
From Everand
CSS Selectors and Specificity
Abdelfattah Ragab
No ratings yet