FashioningText StylesAndColor PDF

Objectives
•Be familiar with in-line, internal and external

CSS.
•Experiment with different font and text
properties.
•Choose the background color that
complements the text color and vice versa.
•Input special characters and comments.
Cascading Style Sheets (CSS)
• Is in charge of the presentation and formatting – defining
the characteristics of the element used in HTML document.
• The basic pattern of CSS command is:
property:value
Property=feature : Value=style
Example: Property Is the font-style and the Value is Italic
<span style=”font-style:italic> this text is italicized”</span>

3 Types of CSS
*note: The 3 types of CSS are arranged or cascaded, according to
superiority. The browser will read the most superior style sheet.
1. Inline Style Sheet
2. Internal Style Sheet
3. External Style Sheet

• It is the 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 among the three,
it is also the least flexible.
Inline - by using the style attribute in HTML
elements, an inline CSS is used to apply a unique
style to a single HTML element. This example sets the
text color of the <h1> element to blue:
<h1 style="color:blue;">This is a Blue Heading</h1>
• It is the second priority, which resembles a summary of CSS
commands located at the upper portion of the HTML document.
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML
page, within a <style> element:
<!DOCTYPE html>
<html> <body>
<head>
<style> <h1>This is a heading</h1>
body {background-color: powderblue;} <p>This is a paragraph.</p>
h1 {color: blue;}
p {color: red;}
</body>
</style>
</head> </html>
• It is the most highly recommended type, which list all of the
CSS commands in a separate document. This is a plain text
file that can be written in any text editor and has the file
extension name .css.
•
• An external style sheet is used to define the style for many
HTML pages.
• With an external style sheet, you can change the look of
an entire web site, by changing one file!
HTML Document EXTERNAL CSS FILE
(Save as “font.html”) (Save as “external.css”)
<!DOCTYPE html>
<html> body {
<head> background-color: powderblue;
<link rel="stylesheet" href="external.css"> }
</head> h1 {
<body> color: blue;
}
<h1>This is a heading</h1> p{
<p>This is a paragraph.</p> color: red;
}
</body>
</html>
<link />
<link /> empty tag use to link the HTML document to

external.css file, it reads the CSS commands, and
then format the document according to the style
information stored in .css. The <link /> must be put
inside the <head> element.
<head>
<link rel="stylesheet" href="external.css">
</head>
• Deprecated Tags means that, in a future XHTML, none of
these tags will be accepted or supported by browsers.
TAG DESCRIPTION REPLACEMENT

<center> Centers text <p style=”text-align:center>
<u> Underlines text Text style sheet
<s> or Define strike Text style sheet
<strike through text
<font> Identifies font font style sheet
characteristic
3 parts of CSS syntax
Style Sheet Syntax Selector, Property and Value
selector { property: value }
Selector is the HTML tag you want to define while Property
corresponds to an attribute, with each property capable of taking
on a Value.
Example: p { font-family: arial }
note: if you want to specify more than property, you must
separate each property with a semicolon (;)
Example:
p { font-family: arial; font-style: italic }

Font-family (property) this is the font that the text will be in.
Common font types: Arial and Times New Roman
Comma (,) used to display if more than one font type will be
use.
Quotation Mark (“”) used for font types with more than one
name.
Example:
H3 {
Font-family: “Lucida Console”, Tahoma, Arial;
}
1. Old 7 Size Font System- has the following values:
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• where medium is the default font size of the browser.
2. Larger or smaller- relative to the Old size font system
3. %- percent relative to the default font size of the
browser ex. 150%
4. pt- point size, the point sizing system of Windows ex.
22pt
5. em – where the size of the font is multiplied by the
value of the number ex. 3em is three.
Font-style Font-weight
Value This refers to how thick each letter
• Italic will become.
• Normal • Value
• Normal
• Oblique (same as italic)
• Lighter
• Bold
• Bolder
• Multiples of 100 (100-lightest,
900-boldest and 400-default)
External.css
Example:
p {
font-size: 80%;
}
h2 {
font-family: Verdana, “Dream of Me”, Garamond;
font-size: 2em;
font-style: oblique;
}
dl {
font-family: “Lucida Console”, Tahoma, arial;
font-size: 110%;
}
em {
font-weight: bolder;
Wisdom Calls
“Listen! Wisdom is calling out in the
streets and marketplaces, calling loudly at
the city gates and wherever people come
together.”
“Whoever listen to Me will have security.
He will be safe, with no reason to be
afraid.”
From the book of Proverbs 1.
Refers to the color of the text.
p {
CSS rainbow= 16, 777, 216 color: black;
font-size: 80%;
Ways to express color values: }
1. By Name: CSS can encode 16 color
names: Aqua, black blue, fushcia, gray,
green, lime, maroon, navy, olive, purple,
red, silver, teal, white, and yellow.
2. By RGB Value:
Format: rgb(n,n,n) where n is a number from 0
to 255.
Color rgb value
Red rgb(255,0,0)
Green rgb(0,255,0)
Blue rgb(0,0,255)
Black rgb(0,0,0)
White rgb(255, 255, 255)
And so on according to the different shades
h2 {
color: rgb(0,255,0);
font-family: Verdana;
font-size: 2em;
font-style: oblique;
}
• Hex (hexadecimal). It is composed of 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).
Color #RRGGBB #RGB
Red #ff0000 #f00
Green #00ff00 #0f0
Blue #0000ff #00f
Black #000000 #000
White #ffffff #fff
And so on according to the different shades
em {
color: #f00;
}
Note: do not forget the hash (#) sign, it denotes that
the color value is in the rgb-hex format and not
spelled out.
Note: when using different ways to set color
values, it is best to use “color mixing” that is
easiest for you.
p {
color: black; font-weight: bolder;
font-weight: bolder; }
em {
}
color: #f00;
h2 { font-weight: bolder;
color: rgb(0,255,0); }
}
dl {
color: blue;
Control the appearance of the textual content
through text properties.
Properties:
• Text-align. Values available: left, right, center, and
justify.
• Text-decoration. Values: overline (line above text),

strike-through (line through text), underline (use
sparingly and if possible only links) and none
(usually to remove underlines from links)
• Text-transform. Values: capitalize (to capitalize the
first letter of every word), uppercase (to capitalize
all the letters in a word), lowercase (to set capitals
to lowercase for all the letters in a word), and none.
• Letter-spacing. Refers to the space between letters,

whose values are: normal or _em (indicating the
length of space between letter, ex: 5em).
• Word-spacing. Refers to the space between words,
whose values are: normal or _em.
• Line-height. Refers to the space between lines,

whose values are: normal, _%, or _em. This adjust
the height of the line or lines of text (for examples,
in a paragraph).
• ñ, è, ç ,etc– special characters that are particularly
important if plan to display text in languages other
than English.
Escape Sequence
• Characters that has special meaning in HTML that
cannot be used in a text.
• All escape sequence starts with an ampersand (&)
and end with a semicolon (;)
• Escape sequences are case-sensitive
• If no named value is available, use the equivalent
numerical value
Ex: ç = ç
Special characters numerical value can be accessed in ISO Latin 1
standard (http//www.bbsinc.com/symbol.html.
Escape Special Description

Sequence Character
< < Less than
> > Greater than
© © Copyright
& & Ampersand
" “ Double quotes (left and right hand)
ñ ñ Lowercase n with tilde
è è Lowercase e with grave accent
ç ç Lowercase c with cedilla
&acirca; â Lowercase a with circumflex accent
ü ü Lowercase u with umlaut
Comment
• Is helpful to post reminders about the webpage
you’re working on. Comment will not appear in a
web browser when the page is displayed. They will
only visible when the HTML code is viewed.
• HTML Syntax
<!- -content- ->
• CSS Syntax
/* content */
The Rewards of Wisdom
“Trust in the Lord with all your

heart. Never rely on what you think
you know. Remember the Lord in
everything you do, and He will
show you the right way.
From the book of Proverbs 2

FashioningText StylesAndColor PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

FashioningText StylesAndColor PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Objectives

•Be familiar with in-line, internal and external

<span style=”font-style:italic> this text is italicized”</span>

1. Inline Style Sheet

2. Internal Style Sheet

3. External Style Sheet

<link /> empty tag use to link the HTML document to

TAG DESCRIPTION REPLACEMENT

p { font-family: arial; font-style: italic }

• Text-decoration. Values: overline (line above text),

• Letter-spacing. Refers to the space between letters,

• Line-height. Refers to the space between lines,

Escape Special Description

“Trust in the Lord with all your

S-ar putea să vă placă și