Scribd
Upload
2 views

Css

Cascading Style Sheets (CSS) is a design language used to enhance the presentation of web pages by controlling elements such as text color, font styles, and layout designs. CSS offers advantages like time-saving through reuse, faster page loading, and easier maintenance, while providing superior styling capabilities compared to HTML. The document also covers various CSS concepts, including selectors, properties, values, and the box model, along with examples of inline, embedded, and external CSS usage.

Uploaded by

ajithkumarposa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Css

Cascading Style Sheets (CSS) is a design language used to enhance the presentation of web pages by controlling elements such as text color, font styles, and layout designs. CSS offers advantages like time-saving through reuse, faster page loading, and easier maintenance, while providing superior styling capabilities compared to HTML. The document also covers various CSS concepts, including selectors, properties, values, and the box model, along with examples of inline, embedded, and external CSS usage.

Uploaded by

ajithkumarposa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 100

CSS

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page.

Using CSS, you can control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images or colors are
used, layout designs.
Advantages of CSS

CSS saves time − We can write CSS once and then reuse same sheet in
multiple HTML pages. We can define a style for each HTML element and
apply it to as many Web pages as we want.

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

Easy maintenance − To make a global change, simply change the style, and
all elements in all the web pages will be updated automatically.
Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.

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

Platform Independence − The Script offer consistent platform independence


and can support latest browsers as well.
A CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is
made of three parts −

Selector − A selector is an HTML tag at which a style will be applied. This


could be any tag like <h1> or <table> etc.

Property - A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color,
border etc.

Value - Values are assigned to properties. For example, color property can
have value either red or #F1F1F1 etc.
selector { property: value }
Inline CSS - The style Attribute

We can use style attribute of any HTML element to define style rules.

These rules will be applied to that element only.

<html>
<head>
</head>
<body>
<h1 style = "color:#36C;"> This is inline CSS </h1>
</body>
</html>
Embedded CSS - The <style> Element

We can put your CSS rules into an HTML document using the <style>
element.

This tag is placed inside <head>...</head> tags.

Rules defined using this syntax will be applied to all the elements available in
the document.
<html>
<head>

<style type = "text/css" media = "all">


body {
background-color: linen;
}
h1 { </head>
color: maroon; <body>
margin-left: 40px; <h1>This is a heading</h1>
} <p>This is a paragraph.</p>
</style> </body>
</html>
External CSS - The <link> Element

The <link> element can be used to include an external stylesheet file in your
HTML document.

An external style sheet is a separate text file with .css extension.

We define all the Style rules within this text file and then you can include this
file in any HTML document using <link> element.

<head>
<link rel=“stylesheet” type = "text/css" href = "mystyle.css" />
</head>
Imported CSS - @import Rule

@import is used to import an external stylesheet in a manner similar to the


<link> element.

<head>
@import "mystyle.css";
</head>
CSS Rules Overriding

Any inline style sheet takes highest priority. So, it will override any rule
defined in <style>...</style> tags or rules defined in any external style sheet
file.

Any rule defined in <style>...</style> tags will override rules defined in any
external style sheet file.

Any rule defined in external style sheet file takes lowest priority, and rules
defined in this file will be applied only when above two rules are not
applicable.
The Type Selectors
The Descendant Selectors
h1 {
Suppose you want to apply a style rule to
color: #36CFFF;
a particular element only when it lies
}
inside a particular element.

ul li {
The Universal Selectors
color: #000000;
*{
}
color: #000000;
}
The Class Selectors

You can define style rules based on the class attribute of the elements. All the elements
having that class will be formatted according to the defined rule.

.black {
color: #000000;
}

h1.black {
color: #000000;
}
The ID Selectors

You can define style rules based on the id attribute of the elements. All the
elements having that id will be formatted according to the defined rule.

#black {
color: #000000;
}

h1#black {
color: #000000;
}
The Child Selectors

body > p {
color: #000000;
}

This rule will render all the paragraphs in black if they are direct child of
<body> element.

Other paragraphs put inside other elements like <div> or <td> would not
have any effect of this rule.
Multiple Style Rules: combine multiple properties and corresponding values
into a single block

h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

All the property and value pairs are separated by a semi colon (;).
Grouping Selectors: apply a style to many selectors . Just separate the
selectors with a comma

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
CSS - Measurement Units

CSS supports a number of measurements including absolute units such as


inches, centimeters, points, and so on, as well as relative measures such as
percentages and em units.

% Defines a measurement as a percentage p {font-size: 16pt; line-


relative to another value, typically an height: 125%;}
enclosing element.

cm Defines a measurement in centimeters. div {margin-bottom:


2cm;}
em A relative measurement for the height of a p {letter-spacing: 7em;}
font in em spaces. Because an em unit is
equivalent to the size of a given font, if you
assign a font to 12pt, each "em" unit would
be 12pt; thus, 2em would be 24pt.

ex This value defines a measurement relative p {font-size: 24pt; line-


to a font's x-height. The x-height is height: 3ex;}
determined by the height of the font's
lowercase letter x.

in Defines a measurement in inches. p {word-spacing: .15in;}


mm Defines a measurement in millimeters. p {word-spacing: 15mm;}

pc Defines a measurement in picas. A pica is p {font-size: 20pc;}


equivalent to 12 points; thus, there are 6
picas per inch.

pt Defines a measurement in points. A point body {font-size: 18pt;}


is defined as 1/72nd of an inch.

px Defines a measurement in screen pixels. p {padding: 25px;}


CSS Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR)


represent a red value, the next two are a green value(GG), and the last are the
blue value(BB).

CSS uses color values to specify a color.

Typically, these are used to set a color either for the foreground of an element
(i.e., its text) or else for the background of the element.

They can also be used to affect the color of borders and other decorative
effects.
Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}

RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,5


0%);}

RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

keyword aqua, black, etc. p{color:teal;}


Set the Background Color

<html>
<head>
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.</p>
</body>
</head>
<html>
Background-Image Properties
Set the Background Image

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</head>
<html>
Repeat the Background Image

The following example demonstrates how to repeat the background image if


an image is small.
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
To repeat the background image vertically.

<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>

To repeat the background image horizontally.

<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
Set the Background Attachment

Background attachment determines whether a background image is fixed or scrolls with the rest of the
page.

<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>

<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
Font Properties
Set the Font Style

<body>
<p style="font-style:italic;">
This text will be rendered in italic style
</p>
</body>

Set the Font Family


<body>
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default serif font
depending on which font you have at your system.
</p>
Set the Font Size

Possible values could be xx-small, x-small, small, medium, large, x-large, xx-
large, smaller, larger, size in pixels or in %.

<body>
<p style="font-size:20px;">This font size is 20 pixels</p>
<p style="font-size:small;">This font size is small</p>
<p style="font-size:large;">This font size is large</p>
</body>
Set the Font Weight

The following example demonstrates how to set the font weight of an


element. The font-weight property provides the functionality to specify how
bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200,
300, 400, 500, 600, 700, 800, 900.

<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
</body>
Set the Font Stretch
Possible values could be normal, wider, narrower, ultra-condensed, extra-
condensed, condensed, semi-condensed, semi-expanded, expanded, extra-
expanded, ultra-expanded.

<body>
<p style="font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer doesn't have a

condensed or expanded version of the font being used.


</p>
</body>
Value Description
ultra-condensed Makes the text as narrow as it gets

extra-condensed Makes the text narrower than condensed, but not as narrow as ultra-condensed

condensed Makes the text narrower than semi-condensed, but not as narrow as extra-condensed

semi-condensed Makes the text narrower than normal, but not as narrow as condensed

normal Default value. No font stretching


semi-expanded Makes the text wider than normal, but not as wide as expanded
expanded Makes the text wider than semi-expanded, but not as wide as extra-expanded
extra-expanded Makes the text wider than expanded, but not as wide as ultra-expanded

ultra-expanded Makes the text as wide as it gets


initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
Text Property
Set the Text Color
<p style="color:red;">

Set the Text Direction


<p style="direction:rtl;">

Set the Space between Characters


<p style="letter-spacing:5px;">

Set the Space between Words


<p style="word-spacing:5px;">

Set the Text Indent


<p style="text-indent:1cm;">
Set the Text Alignment
<body>
<p style="text-align:right;">
This will be right aligned.
</p>

<p style="text-align:center;">
This will be center aligned.
</p>

<p style="text-align:left;">
This will be left aligned.
</p>

</body>
Decorating the Text
<body>
<p style="text-decoration:underline;">
This will be underlined
</p>

<p style="text-decoration:line-through;">
This will be striked through.
</p>

<p style="text-decoration:overline;">
This will have a over line.
</p>

</body>
Set the Text Cases

<body>
<p style="text-transform:capitalize;">
This will be capitalized
</p>

<p style="text-transform:uppercase;">
This will be in uppercase
</p>

<p style="text-transform:lowercase;">
This will be in lowercase
</p>
</body>
Set the Text Shadow

<body>
<p style="text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property, this text will have
a blue shadow.
</p>
</body>
Border Property
The Image Border Property
<body>
<img style="border:0px;" src="/css/images/logo.png" />
<br />
<img style="border:3px dashed
red;height:100px;width:100px;opacity:0.6” src="/css/images/logo.png" />
</body>
The Image Height Property

<body>
<img style="border:1px solid red; height:100px;"
src="/css/images/logo.png" />
<br />
<img style="border:1px solid red; height:50%;"
src="/css/images/logo.png" />
</body>
The Image Width Property

<body>
<img style="border:1px solid red; width:150px;"
src="/css/images/logo.png" />
<br />
<img style="border:1px solid red; width:100%;"
src="/css/images/logo.png" />
</body>
The opacity Property

opacity:x
x can be a value from 0.0 - 1.0. A lower value makes the element more
transparent.

<body>
<img style="border:1px solid red;opacity:0.4;"
src="/css/images/logo.png" />
</body>
#id1{ property:value; }------ Id selector
.mycolour{ property:value;}-----class selector

<p id=“id1”>tour data</p>


<h1 id=“id1”>your data</h1>

<p class=“mycolour”>your data<p>


The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model"
is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual content.
The image below illustrates the 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
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
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;}
Border Width
The border-width property specifies the width of the four
borders.

The width can be set as a specific size (in px, pt, cm, em,
etc) or by using one of the three pre-defined values: thin,
medium, or thick.

The border-width property can have from one to four


values (for the top border, right border, bottom border, and
the left border).
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}
Four sides with
p.three { different width
border-style: solid;
border-width: 2px 10px 4px 20px;
}
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)“

The border-color property can have from one to four values (for the top
border, right border, bottom border, and the left border).

If border-color is not set, it inherits the color of the element.


p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
} Four sides with
different colors
p.three {
border-style: solid;
border-color: red green blue yellow;
}
Border - Individual Sides
From the examples above you have seen that it is possible to
specify a different border for each side.

In CSS, there are also properties for specifying each of the


borders (top, right, bottom, and left):
p{
border-top-style: dotted; p{
border-right-style: solid; border-left: 6px solid red;
border-bottom-style: dotted; background-color: lightgrey;
border-left-style: solid; }
}
CSS Margins
The CSS margin properties are used to create space around
elements, outside of any defined borders.

With CSS, you have full control over the margins. There are
properties for setting the margin for each side of an element (top,
right, bottom, and left).
CSS has properties for specifying the margin for each side
of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left
margin: 25px 50px 75px 100px;

top margin is 25px


right margin is 50px
bottom margin is 75px p{
left margin is 100px margin: 25px 50px 75px
100px;
}
The auto Value
You can set the margin property to auto to horizontally center the element
within its container.

The element will then take up the specified width, and the remaining space
will be split equally between the left and right margins:

div {
width: 300px;
margin: auto;
border: 1px solid red;
}
CSS Padding
The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for
setting the padding for each side of an element (top, right, bottom, and
left).
CSS has properties for specifying the padding for each side of an
element:

• padding-top
• padding-right
• padding-bottom
• padding-left
div {
div {
padding-top: 50px;
padding: 25px 50px 75px 100px;
padding-right: 30px; }
padding-bottom: 50px;
padding-left: 80px;
}

top padding is 25px


right padding is 50px
bottom padding is 75px
left padding is 100px
Padding and Element Width

The CSS width property specifies the width of the element's content area. The
content area is the portion inside the padding, border, and margin of an
element (the box model).

div {
width: 300px;
padding: 25px;
}
Setting height and width
The height and width properties are used to set the height and
width of an element.

The height and width can be set to auto (this is default. Means
that the browser calculates the height and width), or be specified
in length values, like px, cm, etc., or in percent (%) of the
containing block.
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
The display Property
The display property specifies if/how an element is displayed.
Value Description Example
inline Displays an element as an inline element li {
(like <span>). Any height and width display: inline;
properties will have no effect
}

block Displays an element as a block element (like span {


<p>). It starts on a new line, and takes up the display: block;
whole width
}

inline-block Displays an element as an inline-level block a {


container. The element itself is formatted as display: inline-block;
an inline element, but you can apply height
and width values }
span.b {
span.a {
display: inline-block;
display: inline; /* the default for span */
width: 100px;
width: 100px;
height: 100px;
height: 100px;
padding: 5px;
padding: 5px;
border: 1px solid blue;
border: 1px solid blue;
background-color: yellow;
background-color: yellow;
}
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
CSS Links
With CSS, links can be styled in different ways.
Pseudo code
used here
A:Link, will
be discussed
in next slide
/* unvisited link */
a:link {
color: red; /* mouse over link */
} a:hover {
color: hotpink;
/* visited link */ }
a:visited {
color: green; /* selected link */
} a:active {
color: blue;
}
a:link {
text-decoration: none;
} a:hover {
text-decoration: underline;
a:visited { }
text-decoration: none;
} a:active {
text-decoration: underline;
}
a:link {
background-color: yellow;
}

a:visited { a:hover {
background-color: cyan; background-color: lightgreen;
} }

a:active {
background-color: hotpink;
}
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;
}
Task:
Create a navigation link as below
CSS Pseudo-classes
A pseudo-class is used to define a special state of an
element.

For example, it can be used to:

Style an element when a user mouse over it


Style visited and unvisited links differently
Style an element when it gets focus
selector:pseudo-class {
property:value;
}

a.highlight:hover {
color: #ff0000;
}
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}

div:hover {
background-color: blue;
}
</style>
<style>
p{
display: inline;
background-color: yellow;
padding: 20px;
}

div:hover p {
display: block;
}
</style>
CSS Pseudo-elements
A CSS pseudo-element is used to style specified parts of an
element.

For example, it can be used to:

Style the first letter, or line, of an element


Insert content before, or after, the content of an element
selector::pseudo-element {
property:value;
}

p::first-line {
color: #ff0000;
font-variant: small-caps;
}
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Multiple Pseudo-elements

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

p::first-line {
color: #0000ff;
font-variant: small-caps;
}
h1::before { insert some content
content: url(smiley.gif); before the content of
} an element.

h1::after { insert some content


content: url(smiley.gif); after the content of an
} element.

::selection {
color: red; Highlight the portion
background: yellow; of an element that is
} selected by a user.
CSS Opacity / Transparency

img {
opacity: 0.5; img {
filter: alpha(opacity=50); opacity: 0.5;
} filter: alpha(opacity=50); /* For IE8 and earlier
*/
}

img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and
earlier */
}
Transparent Box
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the
same transparency.

<style>
div {
background-color: #4CAF50;
padding: 10px;
}

div.first {
opacity: 0.1;
filter: alpha(opacity=10); /* For IE8 and earlier
*/
}
div.second {
opacity: 0.3;
filter: alpha(opacity=30);}

div.third {
opacity: 0.6;
filter: alpha(opacity=60);}
</style>

<div class="first"><p>opacity 0.1</p></div>


<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
<style>
div {
background: rgb(76, 175, 80);
padding: 10px;
}

div.first {
background: rgba(76, 175, 80, 0.1);
}

div.second {
background: rgba(76, 175, 80, 0.3);
}

div.third {
background: rgba(76, 175, 80, 0.6);
}
</style>
Task 2: Create a similar div in your web page
<style>
div.background {
<body>
background: url(klematis.jpg) repeat;
border: 2px solid black;
<div class="background">
}
<div class="transbox">
<p>This is some text that is placed in the transparent
div.transbox {
box.</p>
margin: 30px;
</div>
background-color: #ffffff;
</div>
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
CSS Navigation Bar
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

ul {
list-style-type: none;
margin: 0;
padding: 0;
}
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
<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:hover {
background-color: #555;
color: white;
}
</style>
ul { li a {
list-style-type: none; display: block;
margin: 0; color: white;
padding: 0; text-align: center;
overflow: hidden; padding: 14px 16px;
background-color: #333; text-decoration: none;
} }

li { /* Change the link color to #111 (black)


float: left; on hover */
} li a:hover {
background-color: #111;
}
Image Gallery
<!DOCTYPE html>
<html>
<head>
div.gallery:hover {
<style>
border: 1px solid #777;
div.gallery {
}
margin: 5px;
border: 1px solid #ccc;
div.gallery img {
float: left;
width: 100%;
width: 180px;
height: auto;
}
}
div.desc { <div class="gallery">
padding: 15px; <a target="_blank" href="img_forest.jpg">
text-align: center; <img src="img_forest.jpg" alt="Forest"
} width="600" height="400">
</style> </a>
</head> <div class="desc">Add a description of the
<body> image here</div>
</div>
<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_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>
Linking to a Page Section

<div>HTML Text Links <a name = "top"></a></div>

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

Download Links

<body>
<a href = “handout.pdf”>Download PDF File</a>
</body>
CSS Gradients
Gradients are a type of image that gradually transitions from one color to the
next horizontally, vertically or diagonally.
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

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


#grad { background-image: linear-gradient(to right, red ,
yellow); }
#grad { background-image: linear-gradient(to bottom right,
red, yellow); }
#grad { background-image: linear-gradient(-90deg, red,
yellow); }
#grad { background-image: linear-gradient(red, yellow,
green); }

#grad { background-image:linear-gradient(to right, red,


orange, yellow, green, blue, indigo, violet); }

#grad { background-image: linear-gradient(to right,


rgba(255,0,0,0), rgba(255,0,0,1)); }

#grad { background-image: repeating-linear-gradient(red,


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

#grad { background-image: radial-gradient(red 5%, yellow


15%, green 60%); }

#grad { background-image: radial-gradient(circle, red,


yellow, green); }

#grad { background-image: repeating-radial-gradient(red,


yellow 10%, green 15%); }
CSS Transitions

CSS transitions allows you to change property values smoothly, over a given
duration.
Mouse over the element below to see a CSS transition effect

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

Note: If the duration part is not specified, the transition will have no effect, because the
default value is 0.
The following example shows a 100px * 100px red <div> element. The <div> element has
also specified a transition effect for the width property, with a duration of 2 seconds:
<style> div:hover {
div { width:
width: 100px; 300px;
height: 100px; height:
background: red; 300px;
transition: width 2s, height 4s; }
} </style>
Transition + Transformation
CSS transforms allow you to move, rotate, scale, and
skew elements.
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
} div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
CSS Animations
CSS allows animation of HTML elements without using
JavaScript or Flash!
• An animation lets an element gradually change from one style to another.
• You can change as many CSS properties you want, as many times you want.
• To use CSS animation, you must first specify some keyframes for the
animation.
• Keyframes hold what styles the element will have at certain times

The @keyframes Rule


When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current
style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
The following example binds the "example" animation to the <div> element. The animation will last for 4
seconds, and it will gradually change the
background-color of the <div> element from "red" to "yellow":
<style> @keyframes example {
div { from {background-color:
width: 100px; red;}
height: 100px; to {background-color:
background-color: red; yellow;}
animation-name: example; }
animation-duration: 4s; </style>
}

You might also like