IT: 403 Internet Programming
Cascaded Style Sheet
INTRODUCTION TO CSS
What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one
Style Sheets Can Save a Lot of Work
Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!
CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.
Multiple Styles Will Cascade into One
Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will ʺcascadeʺ into a new ʺvirtualʺ style sheet by the following rules, where number four has the highest priority:
1. Browser default 2. External style sheet
3. Internal style sheet (inside the <head> tag) 4. Inline style (inside an HTML element)
IT: 403 Internet Programming
CSS Syntax
The CSS syntax is made up of three parts: a selector, a property and a value: • Selector
• Property • Value
Ex : ‐ selector { property : value }
The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:
body { color: black }
If the value is multiple words, put quotes around the value:
p { font-family: "sans serif " }
If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center;color:red}
IT: 403 Internet Programming
Grouping
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:
h1,h2,h3,h4,h5,h6
{
color: green
}
The class Selector
With the class selector you can define different styles for the same type of HTML element.
Say that you would like to have two types of paragraphs in your document: one right‐ aligned paragraph, and one center‐aligned paragraph. Here is how you can do it with styles:
p.right {text-align:
right} p.center
{text-align: center
}You have to use the class attribute in your HTML document:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
To apply more than one class per given element, the syntax is:
<p class="center
bold"> This is a
paragraph.
</p>
IT: 403 Internet Programming
The id Selector
You can also define styles for HTML elements with the id selector. The id selector is defined as a #.
The style rule below will match the element that has an id attribute with a value of ʺgreenʺ:
#green {color: green}
CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with ʺ/*ʺ, and ends with ʺ*/ʺ, like this:
IT: 403 Internet Programming
How to Insert a Style Sheet
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
1. External Style Sheet 2. Internal Style Sheet 3. Inline Styles
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" /> </head>
The browser will read the style definitions from the file mystyle.css, and format the document according to it.
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:
<head>
<style
type="text/css
"> hr {color:
sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")} </style>
</head>
IT: 403 Internet Programming
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style="color: sienna; margin-left:
20px"> This is a paragraph
</p>
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color: red;
text-align:
left;
font-size: 8pt
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:
right;
font-size: 20pt
}
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color: red;
text-align:
right;
font-size: 20pt
-IT: 403 Internet Programming
CSS Background
The CSS background properties define the background effects of an element.
The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.
Possible Values 1. background‐color 2. background‐image 3. background‐repeat 4. background‐attachment 5. background‐position background‐color
The background‐color property sets the background color of an element.
The color value can be a color name (red), a rgb value (rgb(255,0,0)), or a hex number (#FF0000)
p
{
background-color: #00FF00
}
the “transparent” is Default. The background color is transparent
p
{
background-color: transparent
}
Example: ‐ This example demonstrates how to set the background color for an element.
<html>
<head>
<style type="text/css">
IT: 403 Internet Programming
h2 {background-color:
transparent} p
{background-color: rgb(250,3,255)}
</style>
</head>
<body>
<h1>Ganpat University</h1>
<h2>U.V.Patel Collge of
Engineering</h2>
<p>Computer Engineering/Information
Technology</p> </body>
</html>
Output:
background‐image
The background‐image property sets an image as the background.
none : Default. No background image
body
{
-Example: ‐ Set an image as the background <html> <head> <style type=ʺtext/cssʺ> body { background‐image: url(ʹcomputer.jpgʹ) } </style> </head> <body> </body> </html> Output: background‐repeat
The background‐repeat property sets if/how a background image will be repeated.
Possible Values
Value Description
repeat Default. The background image will be repeated vertically and horizontally
-Example: ‐ How to repeat a background image <html> <head> <style type=ʺtext/cssʺ> body { background‐image: url(ʹgnu.jpgʹ); background‐repeat: repeat } </style> </head> <body> </body> </html> background‐position
The background‐position property sets the starting position of a background image.
Possible Values
Value Description
Top left If you only specify one keyword, the second value will be top center ʺcenterʺ.
top right
Default value: 0% 0% center left center center center right bottom left bottom center bottom right
X% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
-Example: ‐ How to position a background image using pixels <html> <head> <style type=ʺtext/cssʺ> body { background‐image: url(ʹsmiley.gifʹ); background‐repeat: no‐repeat; background‐position: 50px 100px;
} </style> </head>
<body>
<p><b>BackGround Image Position 50px,100px</p> </body>
</html>
Output:
background‐attachment
The background‐attachment property sets whether a background image is fixed or scrolls with the rest of the page.
Possible Values
Value Description
scroll Default. The background image moves when the rest of the page scrolls
-CSS TEXT
The CSS text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a text, and more.
Property Value Description
color color Sets the color of a text direction ltr Sets the text direction
rtl
line‐height normal Sets the distance between lines number
length %
letter‐spacing normal Increase or decrease the space between characters length
text‐align left Aligns the text in an element right
center justify
text‐decoration none Adds decoration to text underline
overline line‐through blink
text‐indent length Indents the first line of text in an element %
text‐transform none Controls the letters in an element capitalize
uppercase lowercase
word‐spacing Increase or normal decrease the length space
-Example: ‐ Specify the space between characters <html>
<head>
<style type=ʺtext/cssʺ>
h1 { letter‐spacing: ‐2px } h4 { letter‐spacing: 0.1cm } </style>
</head> <body>
<h1>Letter Spacing</h1> <h4>Letter Spacing</h4> </body>
</html> Output: ‐
Example: ‐ Decorate the text <html>
<head>
<style type=ʺtext/cssʺ>
h1 {text‐decoration: overline} h2 {text‐decoration: line‐through} h3 {text‐decoration: underline} a {text‐decoration: none} </style>
</head> <body>
<h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3>
<p><a href=ʺnext.htmʺ>Remove Underline in HOTSPOT</a></p> </body>
-Output: ‐
Example: ‐ Control the letters in a text <html>
<head>
<style type=ʺtext/cssʺ>
p.uppercase {text‐transform: uppercase} p.lowercase {text‐transform: lowercase} p.capitalize {text‐transform: capitalize}
</style> </head>
<body>
<p class=ʺuppercaseʺ>Ganpat university</p> <p class=ʺlowercaseʺ>Ganpat university</p> <p class=ʺcapitalizeʺ>Ganpat university</p>
</body> </html>
-CSS Font
The CSS font properties allow you to change the font family, boldness, size, and the style of a text. Possible Values • font-style • font-variant • font-weight • font-size/line-height • font-family
Property Value Description
font‐family family‐name A prioritized list of font family names and/or generic generic‐family family names for an element
font‐size xx‐small Sets the size of a font x‐small small medium large x‐large xx‐large smaller larger length, %
font‐style normal Sets the style of the font italic
oblique
font‐variant normal Displays text in a small‐caps font or a normal font small‐caps
-Example: ‐ Set the font of a text
<html> <head>
<style type=ʺtext/cssʺ>
h3 {font‐family: times} p {font‐family: courier}
p.sansserif {font‐family: sans‐serif} </style>
</head> <body>
<h3>Ganpat University</h3> <p>U.V.Patel College of Engineering</p>
<p class=ʺsansserifʺ>Information Technology</p> </body>
</html> Output: ‐
Example: ‐ Set the style of the font <html> <head>
-Output: ‐
Example: ‐ Set the size of the font <html> <head>
<style type=ʺtext/cssʺ> h1 {font‐size: 32} h2 {font‐size: 22} p {font‐size: 16}
</style> </head>
<body>
<h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body>
</html>
-CSS Border
The CSS border properties allow you to specify the style and color of an elementʹs border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.
Property Value Description
border‐color color Sets the color of the four borders, can have from one to four colors
border border‐width A shorthand property for setting all of the properties border‐style for the four borders in one declaration
border‐color
border‐bottom border‐bottom‐ A shorthand property for setting all of the properties width for the bottom border in one declaration
border‐style border‐color
border‐bottom‐ border‐color Sets the color of the bottom border color
border‐bottom‐ border‐style Sets the style of the bottom border style
border‐bottom‐ thin Sets the width of the bottom border width medium
thick length
border‐left‐color border‐color Sets the color of the left border border‐left‐style border‐style Sets the style of the left border border‐left‐width thin Sets the width of the left border
medium thick length
border‐right‐color border‐color Sets the color of the Right border border‐right‐style border‐style Sets the style of the Right border border‐right‐ thin Sets the width of the Right border width medium
thick length
border‐top‐color border‐color Sets the color of the top border border‐top‐style border‐style Sets the style of the top border border‐top‐width thin Sets the width of the top border
-Example: ‐ Set the all border of text <html> <head> <style type=ʺtext/cssʺ> p {
border: medium double rgb(250,0,255) }
</style> </head> <body>
<p>U.V Patel College of Engineering</p> </body> </html>
Output: ‐
Example: ‐ Set the top border property of text <html>
<head>
<style type=ʺtext/cssʺ> p
{
border: medium double rgb(250,0,255) }
</style> </head> <body>
<p>U.V Patel College of Engineering</p> </body> </html>
-CSS Margin
The CSS margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.
Property Value Description
margin margin‐top A shorthand property for setting the margin margin‐right properties in one declaration
margin‐bottom margin‐left
margin‐bottom auto Sets the bottom margin of an element length
%
margin‐left auto Sets the left margin of an element length
%
margin‐right auto Sets the right margin of an element length
%
margin‐top auto Sets the top margin of an element length
%
Example: ‐ Set the all Margin
<html> <head>
<style type=ʺtext/cssʺ>
p.margin {margin: 2cm 4cm 3cm 4cm} </style>
</head> <body>
<p>This is a paragraph with no specified margins</p> <p class=ʺmarginʺ>Information Technology</p> <p>Ganpat University</p>
-Output: ‐
Example: ‐ Set the left Margin of text using percent value <html>
<head>
<style type=ʺtext/cssʺ> p.leftmargin {
margin‐left: 25% }
</style> </head> <body>
<p><b>Subject :‐</b> Internet Programming ‐1 </p> <p class=ʺleftmarginʺ>Information Technology</p> </body>
-CSS Padding
The CSS padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties.
Property Value Description
padding padding‐top A shorthand property for setting all of the padding padding‐right properties in one declaration
padding‐bottom padding‐left
padding‐bottom length Sets the bottom padding of an element %
padding‐left length Sets the left padding of an element %
padding‐right length Sets the right padding of an element %
padding‐top length Sets the top padding of an element %
Example: ‐ Set the padding property of table <html>
<head>
<style type=ʺtext/cssʺ>
td.test1 {padding: 1.5cm} td.test2 {padding: 0.5cm 2.5cm}
</style> </head> <body> <table border=ʺ1ʺ> <tr> <td class=ʺtest1ʺ>
-Output:‐
Example: ‐ Set the right padding using cm value.
<html> <head>
<style type=ʺtext/cssʺ>
td {padding‐right: 5cm} </style>
</head> <body>
<table border=ʺ1ʺ> <tr>
<td>
This is a tablecell with a right padding. This is a tablecell with a right padding.
</td> </tr> </table> </body> </html>
-CSS List
The CSS list properties allow you to place the list‐item marker, change between different list‐ item markers, or set an image as the list‐item marker.
Property Value Description
list‐style list‐style‐type A shorthand property for setting all of the properties list‐style‐position for a list in one declaration
list‐style‐image
list‐style‐image none Sets an image as the list‐item marker url
list‐style‐position inside Sets where the list‐item marker is placed in the list outside
list‐style‐type None, disc, circle Sets the type of the list‐item marker square , decimal
decimal‐leading‐ zero ,lower‐ roman upper‐roman ,lower‐alpha upper‐alpha, lower‐greek lower‐latin upper‐latin, hebrew , armenian georgian cjk‐ideographic hiragana katakana hiragana‐iroha katakana‐iroha
padding‐top length Sets the top padding of an element %
-</style> </head> <body> <ul>
<li>Computer Engineering</li> <li>Information Technology</li> <li>Bio‐Medical Engineering</li> </ul>
-CSS Table
The CSS table properties allow you to set the layout of a table.
Property Value Description
table‐layout auto Sets the algorithm used to display the table cells, fixed rows, and columns
caption‐side top Sets the position of the table caption bottom
left right
border‐spacing length Sets the distance that separates cell borders empty‐cells show Sets whether or not to show empty cells in a table
hide
Example: ‐ Set the layout of table. <html> <head> <style type=ʺtext/cssʺ> table.one { table‐layout: automatic } table.two { table‐layout: fixed } </style> </head> <body>
<table class=ʺoneʺ border=ʺ1ʺ width=ʺ100%ʺ> <tr> <td width=ʺ20%ʺ>1000000000000000000000000000</td> <td width=ʺ40%ʺ>10000000</td> <td width=ʺ40%ʺ>100</td> </tr> </table> <br />
<table class=ʺtwoʺ border=ʺ1ʺ width=ʺ100%ʺ> <tr>
<td width=ʺ20%ʺ>1000000000000000000000000000</td> <td width=ʺ40%ʺ>10000000</td>
<td width=ʺ40%ʺ>100</td> </tr>
-Output: ‐
Example: ‐ Set the Space between table border. html> <head> <style type=ʺtext/cssʺ> table.one { border‐collapse: separate; border‐spacing: 10px } table.two { border‐collapse: separate; border‐spacing: 10px 50px
} </style> </head> <body>
-Output: ‐
Example: ‐ Set the position of table caption. <html> <head> <style type=ʺtext/cssʺ> caption { caption‐side:bottom } </style> </head> <body> <table border=ʺ1ʺ> <caption>Student Information</caption> <tr> <th>Name</th> <th>Roll No</th> </tr> <tr> <td>Peter</td> <td>IT061</td></tr> <tr> <td>Lois</td> <td>IT061</td></tr> </table>
</body> </html>
-CSS Dimension
The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines.
Property Value Description
height Auto ,length ,% Sets the height of an element width Auto, % ,length Sets the width of an element
max‐height None ,length,% Sets the maximum height of an element
max‐width None, length, % Sets whether or not to show empty cells in a table min‐height Length ,% Sets the minimum height of an element
min‐width Length ,% Sets the minimum width of an element
Example: ‐ Set the height and width of image using pixel value. <html> <head> <style type=ʺtext/cssʺ> img.normal { height: auto; width: auto } img.big { height: 160px; width: 160px } img.small { height: 30px; width: 160px } </style> </head> <body>
<img class=ʺnormalʺ src=ʺlogocss.gifʺ width=ʺ95ʺ height=ʺ84ʺ / > <br />
<img class=ʺbigʺ src=ʺlogocss.gifʺ width=ʺ95ʺ height=ʺ84ʺ /> <br />
<img class=ʺsmallʺ src=ʺlogocss.gifʺ width=ʺ95ʺ height=ʺ84ʺ /> </body>
-CSS Pseudo Classes
CSS pseudo‐classes are used to add special effects to some selectors.
Syntax
The syntax of pseudo‐classes:
Selector : pseudo‐class {property: value}
Anchor Pseudo‐classes
Pseudo Class Description
Active Adds special style to an activated element
Hover Adds special style to an element when you mouse over it
Link Adds special style to an unvisited link Visited Adds special style to a visited link
A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS‐supporting browser:
a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */
Pseudo‐classes and CSS Classes
Pseudo‐classes can be combined with CSS classes:
a.red:visited {
color: #FF0000 }
<a class=ʺredʺ href=ʺcss_syntax.aspʺ>CSS Syntax</a>
If the link in the example above has been visited, it will be displayed in red.
Example: ‐ Example to demonstrate different hyperlink color <html>
<head>
<style type=ʺtext/cssʺ> a:link {color: #FF0000}
-a:hover {color: #FF00FF} a:active {color: #0000FF} </style>
</head> <body>
<p><b><a href=ʺdefault.aspʺ target=ʺ_blankʺ>This is a link</a></b></p></body> </html>
-CSS Image Opacity
First we will show you how to create a transparent image with CSS.
Regular image:
The same image with transparency:
Example :‐
<html> <head>
<style type=ʺtext/cssʺ> img {
opacity:0.4;
filter:alpha(opacity=40) }
</style> </head> <body>
-<img src=ʺlogo.jpgʺ width=ʺ150ʺ height=ʺ113ʺ alt=ʺklematisʺ onmouseover=ʺthis.style.opacity=1;this.filters.alpha.opacity=100ʺ onmouseout=ʺthis.style.opacity=0.4;this.filters.alpha.opacity=40ʺ /> </body>
