IT Elective I - Cascading Style Sheets

IT Elective I – Cascading Style Sheets
Cascading Style Sheets (CSS)
CSS controls the style and layout of multiple Web pages all at once.
Styles can be specified:
* inside an HTML element

* inside the head section of an HTML page
* in an external CSS file
CSS Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property:value}
Selector
The HTML element/tag you wish to define
Property
The attribute you wish to change
;and each property can take a value.
Note: If the value is multiple words, put quotes around the value.
More than one property
You must separate each property with a semicolon ( ; ).
p {text-align:center;color:red}
p
{
text-align:center;
color:black;
font-family:arial
}
Grouping
You can group selectors. Separate each selector with a comma.
h1,h2,h3,h4,h5,h6
{
color:green
}
The Class Selector
Let you define different styles for the same type of HTML element.
p.right {text-align:right}
p.center {text-align:center}
<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>

Omitting the Tag Name
You can also omit the tag name in the selector to define a style that
will be used by all HTML elements that have a certain class.
.center {text-align:center}
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>

The id Selector
The id selector is defined as a #.
#green {color:green}
The style rule below will match the p element that has an id with a value of "par1":
p#par1
{
text-align:center;
color:red
}
Class vs ID Selector
Use a class tag if:
1. The style is used in various places throughout the document.

2. The style is very general.
Use an id tag if:
1. The style is only used once ever in the document.

2. The style is specific to a certain area of the document.
Remember that an id can only appear once in any HTML document.

Once you've used the id, it should not be used again on that page.
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.
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial
}
Ex. 1
CSS File
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}\
p {margin-left: 50px}
HTML File
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex1.css" />
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html
Ex. 2
CSS File
body {background-color: tan}

h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
HTML File
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex2.css" />
</head>
<body>
<h1>This is a header 1</h1>
<hr />
<p>You can see that the style sheet formats the text</p>
<p><a href="http://www.w3schools.com" target="_blank">This is a link</a></p>
</body>
</html>
How to Insert a Style Sheet
External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
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.
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,.
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
Inline Styles
Use this method when a style is to be applied to a single occurrence of an element.
<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.
External:
h3 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:left; color:red;
font-size:8pt text-align:right;
} font-size:20pt
Internal: The color is inherited from the external style sheet and
the text-alignment and the font-size is replaced
h3 by the internal style sheet.
{
text-align:right;
font-size:20pt
}
CSS Background
The CSS background properties define the background effects of an element.

Set the background color
body
{
background-color:yellow;
}
h1
{
background-color:green;
}
p
{
background-color:rgb(255,0,255);
}
</style>
Set an image as the background
Body
{
background-image:url('paper.gif')
}
</style>
How to repeat a background image only vertically
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
</style>
How to repeat a background image only horizontally
body
{
background-repeat:repeat-x;
}
</style>
How to display a background image only one time
body
{
background-repeat:no-repeat;
}
</style>
How to place the background image

body
{
background-image:url('smiley.gif');
background-attachment:fixed;
background-position:center;
}
</style>
How to position a background image using %
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 30% 20%;
}
</style>
How to position a background image using pixels
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>
How to set a fixed background image
body
{
background-image:url('smiley.gif');
background-attachment:fixed
}
</style>
All the background properties in one declaration
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
All CSS Background Properties
Property Description Values
background A shorthand property background-color
for setting all background-image
background properties background-repeat
in one declaration background-attachment
background-position
background-attachment Sets whether a scroll

background image is fixed
fixed or scrolls with the
rest of the page
background-color Sets the background color-rgb

color of an element color-hex
color-name
transparent
background-image Sets an image as the url(URL)

background none
background-position Sets the starting top left
position of a top center
background top right
image center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat Sets if/how a repeat
background repeat-x
image will be repeat-y
repeated no-repeat
CSS Text
The CSS text properties define the appearance of text.

Text Color
The color property is used to set the color of the text. The color can be set by:
* name - specify a color name, like "red"

* RGB - specify an RGB value, like "rgb(255,0,0)"
* Hex - specify a hex value, like "#ff0000"
Body
{
color:blue
}
H1
{
color:#00ff00
}
H2
{
color:rgb(255,0,0)
}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
h1
{
text-align:center
}
p.date
{
text-align:right
}
p.main
{
text-align:justify
}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
a
{
text-decoration:none
}
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
Text Transformation
The text-transform property is used to specify uppercase
and lowercase letters in a text.
p.uppercase
{
text-transform:uppercase
}
p.lowercase
{
text-transform:lowercase
}
p.capitalize
{
text-transform:capitalize
}
Text Indentation
p
{
text-indent:50px
}
Spaces Between Characters
H
{
letter-spacing: -3px
}
H4
{
letter-spacing: 0.5cm
}
Space between lines
p.small
{
line-height: 90%
}
p.big
{
Line-height: 200%
}
The default line height in most browsers is about 110% to 120%.

IT Elective I - Cascading Style Sheets

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IT Elective I - Cascading Style Sheets

Uploaded by

Copyright:

Available Formats

IT Elective I – Cascading Style Sheets

Cascading Style Sheets (CSS)

Styles can be specified:

* inside an HTML element

;and each property can take a value.

You must separate each property with a semicolon ( ; ).

<p class="right">This paragraph will be right-aligned.</p>

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

<p class="center bold">This is a paragraph.</p>

<h1 class="center">This heading will be center-aligned</h1>

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

1. The style is used in various places throughout the document.

Use an id tag if:

1. The style is only used once ever in the document.

Remember that an id can only appear once in any HTML document.

body {background-color: tan}

External Style Sheet

An external style sheet can be written in any text editor.

Use this method when a style is to be applied to a single occurrence of an element.

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

h3 If the page with the internal style sheet also links

The CSS background properties define the background effects of an element.

How to repeat a background image only horizontally

How to place the background image

background-attachment Sets whether a scroll

background-color Sets the background color-rgb

background-image Sets an image as the url(URL)

The CSS text properties define the appearance of text.

* name - specify a color name, like "red"

Text can be centered, or aligned to the left or right, or justified.

The text-decoration property is used to set or remove decorations from text.

Spaces Between Characters

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

You might also like