CSSJHL

CASCADING STYLE
SHEETS (CSS)
FASHIONING TEXT STYLES AND COLORS
CASCADING STYLE SHEETS
✓ Using CSS would help you present your webpage
that is pleasing to the eye.
• It defines how to display HTML elements.
If HTML handles the contents of the webpage, then CSS is in
charge of the presentation.
HTML is about the meaning, while CSS is about formatting
– in other words defining the characteristics of the design
elements used in your HTML documents.
BIG PROBLEM
HTML was never intended to contain tags for formatting a
document.
BASIC HTML
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
BIG PROBLEM
When tags like <font>, and color attributes were
added to the HTML 3.2 specification, it started a
nightmare for web developers.
Development of large web sites, where fonts and
color information were added to every single page,
became a long and expensive process.
SOLUTION
➢ To solve this problem, the World Wide Web
Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed from
the HTML document, and stored in a separate CSS
file.
All browsers support CSS today.
CSS SYNTAX
A CSS rule has two main parts: a selector, and one or more
declarations:
CSS SYNTAX
The selector is normally the HTML

element you want to style. Each declaration consists of a
property and a value.
The property is the style attribute you want

to change. Each property has a value.
TYPES OF CSS
There are three types of style sheets and they are arranged, or cascaded,
according to superiority.
1. IN-LINE STYLE SHEET

◦ The first, most specific, and highest priority among the three
different sheets.
◦ It contains CSS commands embedded or placed inside HTML tags.
◦ Although this is the most superior of the three, this is also flexible.
TYPES OF CSS
There are three types of style sheets and they are arranged, or
cascaded, according to superiority.
2. INTERNAL STYLE SHEET

◦ The second priority sheet
◦ It resembles a summary of CSS commands located at the
upper portion of the HTML
<!DOCTYPE html> EXAMPLE FOR INTERNAL CSS
<html>
<body>
<style>
h1 {
font-family: Verdana;
}
p{
font-size: 30px;
font-style: bold;
color: red;
}
</style>
<h1> Self-Love </h1>
<p> Do you love yourself? </p>
</body>
</html>
TYPES OF CSS
There are three types of style sheets and they are arranged, or
cascaded, according to superiority.
3. EXTERNAL STYLE SHEET

◦ The third and most highly recommended type of CSS
◦ It lists all of the CSS commands in a separate documents.
◦ This is a plain text file that can be written in any text editor
and has file extension name .css.
EXAMPLE FOR EXTERNAL CSS
HTML Document HTML Document

(save as “file.html”) (save as “external.css”)
<!DOCTYPE html> h1 {
<html> font-family: Verdana;
<body> }
<h1> Self-Love </h1> p{
<p> Do you love yourself? </end> font-size: 30px;
</body> font style: bold;
</html> color: red;
}
Deprecated Tags and Attributes
Deprecated Tags Description
<center> Centers text
<u> Underlines text
<s> or <strike> Defines strikethrough text
<font> Identifies font characteristics
Deprecated means that, in a future version of HTML, none of these

tags will be accepted or supported by browsers.
STYLE SHEET SYNTAX
1. font-family: This is font that your text will be in. You may
input more than one font type, as long as you separate them
with commas. (If the browser didn’t recognize the first one, it
will display the next one and so on. Also remember to put
font types with more than one name inside a quotation
marks, such as “Comic Sans”.
2. font-style: italic, normal, oblique, bold, etc.
3. font-weight: This refers to how thick each letter will become.
Its values are: normal, lighter, bold and bolder. You can also
use multiples of 100, where 100 is the lightest and 900 is the
boldest. (400 being the default)
STYLE SHEET SYNTAX
4. color
These are some ways to express color values:
◦ BY NAME – There are 16 colors the can be encoded by
name in CSS: AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN,
LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL,
WHITE, YELLOW.
In addition, transparency can be set in CSS.
For example:
p { color: black; font-size: 75%;}
STYLE SHEET SYNTAX
◦ BY THE RGB VALUE – You type it in this format” rgb(n,n,n),
where n is a number from 0 to 255.
For example:
p { color: rgb(0,255,0);}
STYLE SHEET SYNTAX
◦ BY THE RGB-HEX CODE – Hex means hexadecimal. It is
composed by 16 digits 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E and F
(with 0 being the lowest and F being the highest).
For example:
p { color: #f00; }
STYLE SHEET SYNTAX
5. text-align: Values available are: left, right, center and
justify.
6. text-decoration: Values available are: overline (line above
texts, strike-through (line through texts), underline , none
(removes line from links)
7. text-transform: Values available are: capitalize (capitalize
the first letter of every word), uppercase (to capitalize all the
letters), lowercase (to set capitals to lowercase for all the
letters), and none.
STYLE SHEET SYNTAX
8. letter-spacing: This refers to the space between letters,
whose values are: normal or __ em.
9. word-spacing: This refers to the space between words,
whose values are: normal or ___ em.
10. line-height: This refers to the space between lines,
whose values are: normal, __%, or ___em. This adjusts the
height of the line of lines of the text (for example, in a
paragraph).
P{
word-spacing: normal;
Color: black;
Font-size: 80%;
}
H2 {
Letter-spacing: 1em;
Text-align: center;
Color: rgb (0, 255, 0);
Font-family: Verdana, “Monotype Corsiva”, Tahoma;
Font-size: 85px;
Font-style: italic;
}

CSSJHL

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

CSSJHL

Uploaded by

Copyright:

Available Formats

CASCADING STYLE

The selector is normally the HTML

The property is the style attribute you want

1. IN-LINE STYLE SHEET

2. INTERNAL STYLE SHEET

3. EXTERNAL STYLE SHEET

HTML Document HTML Document

Deprecated means that, in a future version of HTML, none of these

You might also like