web programming
DESCRIPTION
Web Programming. Cascade Style Sheets (CSS). Introduction. CSS stands for Cascading Style Sheets Used to Separate Presentation and Contents while Building Web Sites Appearance of Raw HTML Pages is not very Effective and Attractive - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/1.jpg)
WEB PROGRAMMINGCascade Style Sheets (CSS)
![Page 2: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/2.jpg)
INTRODUCTION CSS stands for Cascading Style Sheets
Used to Separate Presentation and Contents while Building Web Sites
Appearance of Raw HTML Pages is not very Effective and Attractive
In Order to Improve the Appearance of Web Page we use CSS
CSS is used to define Style Rules that help to unify entire Sites Appearance
Using CSS we define Style once and it can be applied many times on the Web Page
Example: Using CSS we define Rules that define how All the Headings and Paragraphs Look alike such as their Color, Style, Formatting etc
![Page 3: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/3.jpg)
NEED OF CSS CSS Improves Efficiency by allowing you to
Separate Contents and Styles Contents mean Headings, Paragraphs,
Buttons etc Styles define the Appearance of Contents CSS was developed to Solve a Problem In using single HTML you must have to
define the Style of each and every Content in its Opening Tag using Attributes like style, color, bgcolor etc
This is a very Lengthy and Tedious Job Job becomes more hard if you want all
contents of same type to be alike, this requires you to remember attributes and attribute values and it is difficult
Styles are normally defined in a Separate CSS File thus enabling designer to Change and Manage the Appearance of Web Page
![Page 4: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/4.jpg)
CSS SYNTAX (CONT.) CSS Rule has Two Parts:
1. Selector2. One or More Declarations
Selector is normally HTML Element Tag Symbol
Declaration consists of Property and Property Value
Property is a Style Attribute
![Page 5: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/5.jpg)
CSS SYNTAX Specify the name of Element like h1, p, td etc Start a Opening Curly Brace {
Declarations: Write Property Name like color, font-family
etc Write a Colon : Write Property Value after Colon Then Put Semi-Colon ; after each
Declaration Put a Closing Curly Brace }Example:h1{
color:red;font:calibari;text-align:center;
}This CSS Example Defines Appearance of Element with <h1> Tag
![Page 6: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/6.jpg)
CSS COMMENTS Comments are used to Specify the Purpose
of Line of Code Comments are Notes about Lines Helpful when the code is to be edited CSS Comments are Start with /* and End
with */ Symbols Anything between /* and /* is a Comment
Example:h1{
color:red; /*Defines Font Color*/font:calibari; /*Defines Font Style*/text-align:center; /*Defines Text Alignment*/
}This CSS Example Defines Appearance of Element with <h1> Tag with Proper Comments
![Page 7: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/7.jpg)
WHERE TO WRITE CSS CODE Three Ways to Use CSS in HTML
1. Inline Style
2. Internal Style Sheet
3. External Style Sheet
![Page 8: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/8.jpg)
INLINE STYLE In Inline Style looses the Advantages of
Cascading Style Sheet
In Inline Style we use style Attribute in the Opening Tag of an Element
This Style is only Applicable to the Element`s Tag in which it is defined
For Example if we define Inline Style using style attribute of a <h1> tag then it will be applicable to only this Tag and it will not be applicable to any other <h1> Tag
Mostly used if you want that Each Element has its own Appearance and Style
Hard to Use and Apply
![Page 9: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/9.jpg)
INLINE STYLE----EXAMPLE<html>
<head><title>Inline Style</title>
</head><body>
<p>This is Paragraph with No Inline Style</p>
<p style=“color:red;font-size:20px” />This is Paragraph with Inline Style
</p></body>
</html>
![Page 10: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/10.jpg)
INTERNAL STYLE SHEET Defined inside a Single Document Can Only be applied to the Document in
which it is Defined No other Document can use the Internal
Style Sheet of a Document If Selectors are given then Internal Style
Sheet is Automatically Applied to Whole Document`s of the Selector Type
Defined inside the <head> tag Defined using <style> tag We use the type Attribute of <style> for
Internal Style Sheet as follows:<style type=“text/css” />
……………………………….</style>
![Page 11: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/11.jpg)
INTERNAL STYLE SHEET----EXAMPLE<html>
<head><title>Internal Style Sheet</title><style type=“text/css” />
p{
color:blue;font-size:24px;
}</style>
</head><body>
<p>Paragraph No 1</p><p>Paragraph No 2</p>
</body></html>
![Page 12: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/12.jpg)
EXTERNAL STYLE SHEET Used when Styles is to be applied on many
pages External Style Sheets are Stored in
Separate Files External Style Sheet Files have .css
Extension With External Style Sheet Entire Look of
Web Site is changed by just changing One File
External Style Sheets are attached to the Web Pages using <link> Tag and Using rel, type and href Attributes of <link> Tag
Example:
<link rel=“stylesheet” type=“text/css” href=“c:\sheet.css” />
This Tag with Attributes Attaches Style Sheet named sheet.css in the Web Page
![Page 13: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/13.jpg)
EXTERNAL STYLE SHEETS----EXAMPLE-CSS FILE CONTENTSCSS File:
h1{
font:verdana;font-size:24px;color:red;
}p{
font:times new roman;font-size:12px;color:blue;
}
Name of CSS File: style.css
![Page 14: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/14.jpg)
EXTERNAL STYLE SHEETS----EXAMPLE-HTML FILE CONTENTS<html>
<head><title>External Style Sheet</title><link rel=“stylesheet” type=“text/css”
href=“style.css /></head><body>
<h1>Heading No 1</h1><p>Paragraph No 1</p>
</body></html>
![Page 15: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/15.jpg)
THE SELECTORS CSS allows to specify the following two
Selectors:
1. id Selector
2. class Selector
![Page 16: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/16.jpg)
THE ID SELECTOR Used to Specify Style for Single Element
Uses the id Attribute of HTML Element
id Selector is defined using #Example:
#paragraph{
align:center;font-size:18px;
}#heading {
align:right;font-size:24px;
}
![Page 17: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/17.jpg)
THE ID SELECTOR----EXAMPLE<html>
<head><style type="text/css">
#para1{
text-align:right;color:red;
} </style>
</head>
<body><p id="para1">Hello World!</p><p>This paragraph is not affected by the
style.</p></body>
</html>
![Page 18: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/18.jpg)
THE CLASS SELECTOR Used to Specify Style for Group of Element
Class Selector is mostly used on Various Elements
Uses the class Attribute of HTML Element
id Selector is defined using .Example:
.paragraph{
align:center;font-size:18px;
}
![Page 19: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/19.jpg)
THE CLASS SELECTOR----EXAMPLE<html>
<head><style type="text/css">
.center{
text-align:center;}
</style></head><body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body></html>
![Page 20: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/20.jpg)
CSS BACKGROUND COLOR Uses background-color Property
<html><head>
<style type="text/css">body{
background-color:#b0c4de;}
</style></head><body><h1>Background Color</h1><p>Paragraph</p>
</body></html>
![Page 21: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/21.jpg)
CSS BACKGROUND IMAGE<html>
<head><style type="text/css">
body {background-image:url('paper.gif');}
</style></head><body>
<h1>Background Image</h1></body>
</html>
![Page 22: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/22.jpg)
CSS FONT FAMILY
<html><head></head>
<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 the user's system has).</p> </body></html>
![Page 23: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/23.jpg)
CSS FONT SIZE
<html><head></head>
<body><p style="font-size:20px;">This text is using a font size of 20 pixels.</p> </body></html>
![Page 24: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/24.jpg)
CSS FONT ADJUST SIZE
<html><head></head>
<body><p style="font-size-adjust:0.58;">This text is using a font-size-adjust value.</p> </body></html>
![Page 25: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/25.jpg)
CSS FONT STRETCH
<html><head></head>
<body><p style="font-stretch:ultra-expanded;">If your computer has an expanded version of the font being used, this text will be stretched.</p></body></html>
![Page 26: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/26.jpg)
CSS FONT STYLE
<html><head></head>
<body><p style="font-style:italic;">This text is in italics.</p> </body></html>
![Page 27: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/27.jpg)
CSS FONT VARIANT
<html><head></head>
<body><p style="font-variant:small-caps;">This Text Is Using Small Caps.</p> </body></html>
![Page 28: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/28.jpg)
FONT WEIGHT
<html><head></head>
<body><p style="font-weight:bold;">This text is bold.</p> </body></html>
![Page 29: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/29.jpg)
CSS FONT PROPERTY
<html><head></head>
<body><p style="font:italic small-caps bold 20px georgia,garamond,serif;">The styles for this text has been specified with the 'font' shorthand property.</p> </body></html>
![Page 30: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/30.jpg)
CSS TEXT COLOR
<html><head></head>
<body><p style="color:olive;">This CSS text color is olive</p></body></html>
![Page 31: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/31.jpg)
CSS TEXT ALIGN
<html><head></head>
<body><p style="text-align:right;">This CSS text is aligned right</p></body></html>
![Page 32: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/32.jpg)
CSS LETTER SPACING
<html><head></head>
<body><p style="letter-spacing:5px;">This text has letter spacing applied</p></body></html>
![Page 33: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/33.jpg)
CSS WORD SPACING
<html><head></head>
<body><p style="word-spacing:50px;">This text has word spacing applied</p> </body></html>
![Page 34: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/34.jpg)
TEXT DECORATION<html>
<head></head>
<body><p style="text-decoration:overline;">This text has a line over the top</p><p style="text-decoration:line-through;">This text has a line through the middle</p><p style="text-decoration:underline;">This text has a line underneath</p></body></html>
![Page 35: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/35.jpg)
TEXT TRANSFORM<html>
<head></head>
<body><p style="text-transform:uppercase;">This text has been transformed to uppercase</p><p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p><p style="text-transform:capitalize;">this text has been capitalized.</p></body></html>
![Page 36: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/36.jpg)
CSS TEXT DIRECTION
<html><head></head>
<body><p style="direction:rtl;">This text is running from right to left.</p></body></html>
![Page 37: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/37.jpg)
CSS TEXT SHADOW
<html><head></head>
<body><p style="text-shadow:4px 4px 8px blue;">If your browser supports the CSS text-shadow property, this text will have a shadow.</p></body></html>
![Page 38: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/38.jpg)
CSS TEXT BACKGROUND COLOR
<html><head></head>
<body><p style="background-color:yellow;">This text has a background color applied.</p></body></html>
![Page 39: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/39.jpg)
CSS TEXT BACKGROUND IMAGE
<html><head></head>
<body><p style="height:100px;background-image:url(1.png);">This text has a background image applied. </p></body></html>
![Page 40: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/40.jpg)
CSS BACKGROUND IMAGE REPEAT
<html><head></head>
<body><p style="height:100px;background-image:url(1.png);background-repeat:repeat-x;">This background image repeat w.r.t x direction </p> </body></html>
![Page 41: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/41.jpg)
CSS BORDER STYLES
<html><head></head>
<body><p style="border:4px solid blue;“>Solid Border</p><p style="border:4px dotted blue;">Dotted Border</p><p style="border:4px dashed blue;">Dashed Border</p><p style="border:4px double blue;">Double Border</p></body></html>
![Page 42: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/42.jpg)
CSS BORDER WIDTH
<html><head></head>
<body><p style="border-width:6px;border-style:solid;” >This text has border styles border width=6px</p> </body></html>
![Page 43: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/43.jpg)
CSS BORDER COLOR
<html><head></head>
<body><p style="border-width:1px;border-style:solid;border-color:blue;">This text has border styles applied using the border-width, border-style, and border-color properties.</p> </body></html>
![Page 44: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/44.jpg)
CSS MARGINS ALL SIDES<html>
<head></head>
<body><div style="border:1px solid blue;"><p style="border:1px solid orange;margin:20px;">This text has a margin of 20 pixels on all four sides.It is nested within a div with a border to make it easier to see the effect of the margin.</p></div></body></html>
![Page 45: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/45.jpg)
CSS MARGINS EACH SIDE<html>
<head></head>
<body><div style="border:1px solid blue;width:200px;"><p style="border:1px solid orange;margin:40px 10px 1px 40px;">This text has a different sized margin for each side. It is nested within a div with a border to make it easier to see the effect of the margin.</p></div></body></html>
![Page 46: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/46.jpg)
CSS PADDING ALL SIDES
<html><head></head>
<body><p style="border:1px solid orange;padding:20px;">This text has padding of 20 pixels on all four sides.</p></body></html>
![Page 47: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/47.jpg)
CSS PADDING EACH SIDE
<html><head></head>
<body><p>With padding:</p><div style="border:1px solid orange;width:100px;padding:20px 10px 0px 100px;">Padded div</div><p>Without padding:</p><div style="border:1px solid orange;width:100px;">Non-padded div</div> </body></html>
![Page 48: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/48.jpg)
CSS LIST TYPES
<html><head></head>
<body><ul style="list-style-type:circle;"><li>List item one</li><li>List item two</li></ul> </body></html>
![Page 49: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/49.jpg)
CSS LIST STYLE IMAGE<html>
<head><title>Image Bullets</title>
</head><body>
<h4>Custom Bullets</h4><ul style=“list-style-image:
url(bullet_img.gif)" ><li>America</li><li>England</li><li>Pakistan</li><li>Austrailia</li>
</ul></body>
</html>
![Page 50: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/50.jpg)
CSS LIST STYLE POSITION
<html><head></head>
<body><ul style="list-style-position:inside;"><li>List item one</li><li>List item two</li></ul><ul style="list-style-position:outside;"><li>List item one</li><li>List item two</li></ul></body></html>
![Page 51: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/51.jpg)
CSS MARKER OFFSET
<html><head></head>
<body><ul><li style="display:marker;marker-offset:10px;">List item one</li><li>List item two</li></ul></body></html>
![Page 52: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/52.jpg)
CSS HEIGHT AND WIDTH
<html><head></head>
<body><div style="background-color:orange;height:125px;width:75px;">This div has height and width applied.</div></body></html>
![Page 53: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/53.jpg)
CSS MAXIMUM HEIGHT AND MAXIMUM WIDTH
<html><head></head>
<body><div style="background-color:orange;max-height:125px;max-width:75px;">This div has max-height and max-width applied.</div></body></html>
![Page 54: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/54.jpg)
CSS MINIMUM HEIGHT AND MINIMUM WIDTH
<html><head></head>
<body><div style="background-color:orange;min-height:125px;min-width:75px;">This div has min-height and min-width applied.</div></body></html>
![Page 55: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/55.jpg)
CSS RELATIVE POSITIONING
<html><head></head>
<body><div style="position:relative;left:80px;background-color:yellow;width:100px;">This div has relative positioning.</div></body></html>
![Page 56: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/56.jpg)
CSS ABSOLUTE POSITIONING
<html><head></head>
<body><div style="position:absolute;top:100px;left:60px;background-color:yellow;">This div is absolutely positioned 100 pixels from the top and 60 pixels from the left of its containing block. </div></body></html>
![Page 57: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/57.jpg)
CSS FIXED POSITIONING
<html><head></head>
<body><div style="position:fixed;top:100px;left:60px;width:180px;background-color:red;">This div is using a fixed position of 100 pixels from the top and 60 pixels from the left of its containing block. When this page scrolls, this box will remain in a fixed position - it won't scroll with the rest of the page. Go on - SCROLL! </div></body></html>
![Page 58: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/58.jpg)
CSS FLOAT The CSS float property enables you to determine where to position an element relative to the other elements on the page. When you use the float property, other elements will simply wrap around the element you applied the float to.
<html><head></head>
<body><div style="width:300px;"><h1 style="float:left;margin-right:10px;">CSS float</h1><p>If your browser supports the CSS float Property, this text will be flowing around the heading.If this does not seem to work, it could be a browser compatibility thing...</p></div></body></html>
![Page 59: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/59.jpg)
CSS CELL PADDING
<html><head></head>
<body><table border="1" cellpadding="10px"><tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr><tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr></table></body></html>
![Page 60: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/60.jpg)
CSS PADDING EXAMPLE<html><head><style type="text/css">table.padded-table td { padding:10px; }</style></head><body><table border="1" class="padded-table"><tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr><tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr></table></body></html>
![Page 61: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/61.jpg)
PADDING EACH SIDE INDEPENDENTLY<html><head><style type="text/css">table.padded-table-2 td { padding-top:20px; padding-right:10px; padding-bottom:0px; padding-left:100px; }</style></head><body><table border="1" class="padded-table-2"><tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr><tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr></table></body></html>
![Page 62: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/62.jpg)
CSS HYPERLINKS You can use CSS to change the appearance
and behavior of hyperlinks. To do this, you can use the following
selectors/pseudo-classes:
1. a2. a:link3. a:visited4. a:hover5. a:active
![Page 63: Web Programming](https://reader035.vdocuments.mx/reader035/viewer/2022062422/568131f7550346895d985463/html5/thumbnails/63.jpg)
CSS HYPERLINKS EXAMPLE<html><head><style type="text/css">a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor: auto}a:link {color:blue;}a:visited {color: #660066;}a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style></head><body><p><a href="/css/css_hyperlinks.cfm" target="_blank">CSS Hyperlinks</a></p></body><head><style type="text/css">a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor: auto}a:link {color:blue;}a:visited {color: #660066;}a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style></head><body><p><a href="/css/css_hyperlinks.cfm" target="_blank">CSS Hyperlinks</a></p></body></html>