Scribd
Upload
47 views

IT Elective I - Cascading Style Sheets

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.

Uploaded by

Noelyn Franco
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
47 views

IT Elective I - Cascading Style Sheets

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.

Uploaded by

Noelyn Franco
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
You are on page 1/ 37

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

<style type="text/css">
body
{
background-color:yellow;
}
h1
{
background-color:green;
}
p
{
background-color:rgb(255,0,255);
}
</style>
Set an image as the background

<style type="text/css">

Body
{
background-image:url('paper.gif')
}
</style>
How to repeat a background image only vertically
<style type="text/css">
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
</style>

How to repeat a background image only horizontally

<style type="text/css">
body
{
background-image:url('paper.gif');
background-repeat:repeat-x;
}
</style>
How to display a background image only one time
<style type="text/css">
body
{
background-image:url('paper.gif');
background-repeat:no-repeat;
}
</style>

How to place the background image


<style type="text/css">
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
How to position a background image using %

<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%;
}
</style>
How to position a background image using pixels

<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;
}
</style>
How to set a fixed background image

<style type="text/css">
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
All the background properties in one declaration

<style type="text/css">
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%.

You might also like