Css Part1 CHP 4 Hamid

CSS Part 1: Introduction
▪ Chapter 4
Textbook to be published by Pearson Ed in early 2014

http://www.funwebdev.com
Objectives
1 What is CSS?
2 CSS Syntax
3 Location of Styles
4 Selectors
5 The Cascade: How

Styles Interact 6 The Box Model
7 CSS Text Styling

▪ Section 1 of 7
WHAT IS CSS?
Presentation Summary
• What is CSS?
• CSS & HTML
• The Box Model
• Style Sheet Implementation
• CSS Rule Structure
• HTML & DIVs
• Common CSS properties
Cascading Style Sheets (CSS) is a simple mechanism for adding style
(e.g. fonts, colors, spacing) to Web documents.
What is CSS?
Cascading Style Sheet.
▪ CSS stands for Cascading Style Sheets Styles
define how to display HTML elements
▪ Contains the rules for the presentation of HTML.
CSS was introduced to keep the presentation information separate

from HTML markup (content).
Cascading Style Sheet.
*To create a style sheet,
create a file using
Notepad (PC) or Text
Edit (Mac), save it as a
.css document and start
writing the CSS code
(see right).
CSS
Advantages
❑ Separates structure from presentation

❑ Provides advanced control of presentation
❑ Easy maintenance of multiple pages
❑ Faster page loading
❑ Better accessibility for disabled users
❑ Easy to learn
HTML Without CSS
“HTML without CSS is like a
piece of candy without a
pretty wrapper.”
With CSS help, we can create

containers or DIVs to better
organize content and make a
Web page visually
appealing.
Transforming the look and feel of a page using a CSS style sheet.
body {
font-family: arial, san-serif;
}
a, a:link
{
color: #0000cc;
}
...
HTML & CSS
• HTML and CSS work together to produce beautiful and
functional Web sites
HTML CSS
structure style
HTML describes the CSS control the presentation of
content of the page HTML.
HTML basics, what's Describes the appearance, layout,
involved in writing it and and presentation of information
understanding the basic on a web page
elements of a webpage. Describes how information is to be
displayed, not what is being
displayed
Can be embedded in HTML
document or placed into separate
.css file
▪ Section 2 of 7
CSS Syntax
CSS Syntax
• Where HTML has tags, CSS has 'selectors'.
• A CSS rule has two main parts:
▪ a selector,
▪ and one or more declarations:
• 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.
CSS Syntax
The declaration is the part of the rule inside the curly braces. It
specifies what a style effect will be. For example, "color: red".
p {color:red;text-align:center;}
❖ To make the CSS more readable, you can put one declaration
on each line, like this:
Example:
p
{
color:red;
text-align:center;
}
CSS comments /*…*/
CSS Comments
❖ Comments are used to explain your code, and may help you when
you edit the source code at a later date.
❖ Comments are ignored by browsers.
❖ A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
Common Types of Selectors:
– HTML element name selector

– class selector
– id selector
– descendant selector
CSS Selectors
In addition to setting a style for a HTML element, CSS allows
you to specify your own selectors called "id" and "class".
The id selector
• The id selector is used to specify a style for a single, unique
element.
• The id selector uses the id attribute of the HTML element,
and is defined with a "#".
• The style rule below will be applied to the element with
id="para1":
Example: #para1
{
text-align:center;
color:red;
}
Example: id selector
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Class Selector
▪ The class selector selects elements with a specific class
attribute.
▪ To select elements with a specific class, write a period (.)
character, followed by the name of the class.
▪ Apply a CSS rule to ONE OR MORE elements on a web
page
In the example below, all HTML elements with class="center" will be red
and center-aligned:
<p class=“new”>This is text is red and in italics</p>

Applying a style to a class
Example: Class selector
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Grouping Selectors
Group the same selector with different declarations

together on one line.
h1 {color: black;}
h1 {font-weight: bold;}
h1 {background: white;}
Example of grouping selectors (both are correct):
h1 {
color: black;
font-weight: bold;
background: white;
}
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center; • It will be better to group the
color: red; selectors, to minimize the
} code.
p { • To group selectors, separate
text-align: center; each selector with a comma.
color: red;
} Grouping
h1, h2, p {
text-align: center;
color: red;
}
Types of Cascading Style Sheets
▪ Inline Styles
▪ Embedded Styles
▪ External Styles
▪ Imported Styles
Description of the Types of
Cascading Style Sheets
 Inline Styles
◦ Configured in the body of the web page
◦ Use the style attribute of an HTML tag
◦ Apply only to the specific element
 Embedded Styles
◦ Configured in the head section of a web page.
◦ Use the HTML <style> element
◦ Apply to the entire web page document
 External Styles
◦ Configured in a separate text file with .css file extension
◦ The HTML <link> element in the head section of a web page
associates it with the .css file
 Imported Styles
◦ Similar to External Styles
◦ We’ll concentrate on the other three types of styles.
Cascade
The CSS cascade assigns a
weight to each style rule.
When several rules apply, the
one with the greatest weight
takes precedence. Order of
preference for various styles:
– Default browser style sheet

(weakest)
– User style sheet
– Author style sheet
– Author embedded styles
– Author inline styles (strongest)
CSS cascade hierarchy
Ways to link style sheets to HTML
Inline CSS
▪ An inline style may be used to apply a unique style for a single
element.
▪ To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
Examples
<h1 style="color:#ff0000">Heading text is red</h1>
<h1 style="color:#FF0000;background-color:#cccccc">This is displayed

as a red heading with gray background</h1>
Configure Embedded CSS
with the Style Element
▪ Configured in the head section of a web page.
▪ Use the HTML <style> element
▪ Apply to the entire web page document
▪ Style declarations are contained between the opening and
closing <style> tags
▪ Example:
<style
body { background-color: #000000;
color: #FFFFFF;
}
</style>
Example: Embedded Styles
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
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>
• 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");}
Example
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
< link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is heading 1</h1>
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
<p>This is an ordinary paragraph. Notice that this text is red. The default
text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
CSS Styling
STYLING Background
▪ CSS background properties are used to define the background effects of
an element.
CSS Background Properties

Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with

the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
33
STYLING Background - Color
▪ The background-color property specifies the background color of an
element.
▪ The background color of a page is defined in the body selector:
Example:
body {background-color:#b0c4de;}
▪ With CSS, a color is most often specified by:
– a HEX value - like "#ff0000"
– an RGB value - like "rgb(255,0,0)"
– a color name - like "red"
▪ In the example below, the h1, p, and div elements have different
background colors:
Example
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
34
STYLING Background - Image
▪ The background-image property specifies an image to
use as the background of an element.
▪ By default, the image is repeated so it covers the entire
element.
▪ The background image for a page can be set like this:
Example
body {background-image:url('paper.gif');}
Example
body {background-image:url(‘clouds’.jpg');}
35
STYLING Background - Image
Background Image - Repeat Horizontally or Vertically
▪ By default, the background-image property repeats an image
both horizontally and vertically.
▪ In the following example image is repeated only horizontally
(repeat-x)
Example
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
36
STYLING Text - All CSS Text Properties
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a
text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text
37
STYLING - Text Color
▪ The color property is used to set the color of the text.
▪ With CSS, a color is most often specified by:
• a HEX value - like "#ff0000"

• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"
▪ The default color for a page is defined in the body selector.

Example:
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
38
STYLING – 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.
Example:
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
39
STYLING – Text Decoration
▪ The text-decoration property is used to set or remove
decorations from text.
Example:
a {text-decoration:none;}
▪ It can also be used to decorate text:
Example:
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
▪ It is not recommended to underline text that is not a link, as
this often confuses users.
40
STYLING – Text Transformation
▪ The text-transform property is used to specify uppercase and lowercase
letters in a text.
▪ It can be used to turn everything into uppercase or lowercase letters, or
capitalize the first letter of each word.
Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
STYLING – Text Indentation

▪ The text-indentation property is used to specify the indentation of the first
line of a text.
Example
p {text-indent:50px;}
41
STYLING Font – All CSS Font Properties
font Sets all the font properties in one declaration
font-family Specifies the font family for text

font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in
a small-caps font
font-weight Specifies the weight of a font
42
STYLING Font – Family
▪ The font family of a text is set with the font-family property.
▪ The font-family property should hold several font names as a "fallback"
system. If the browser does not support the first font, it tries the next font.
▪ Start with the font you want, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are
available.
Note: If the name of a font family is more than one word, it must be in
quotation marks, like font-family: "Times New Roman".
▪ More than one font family is specified in a comma-separated list:
Example: p{font-family:"Times New Roman", Times, serif;}
43
STYLING Font – Style
▪ The font-style property is mostly used to specify italic text.
▪ This property has three values:
– normal - The text is shown normally
– italic - The text is shown in italics
– oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
Example
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
44
STYLING Font – Size
▪ The font-size property sets the size of the text.
▪ Being able to manage the text size is important in web design. However,
you should not use font size adjustments to make paragraphs look like
headings, or headings look like paragraphs.
▪ Always use the proper HTML tags, like <h1> - <h6> for headings and <p>
for paragraphs.
▪ The font-size value can be an absolute, or relative size.
45
 units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
 vague font sizes: xx-small , x-small , small , medium, large, x-
large, xx-large, smaller, larger
 percentage font sizes, e.g.: 90%, 120%
▪ Absolute size:
– Sets the text to a specified size
– Does not allow a user to change the text size in all browsers (bad for
accessibility reasons)
▪ Relative size:
– Sets the size relative to surrounding elements
– Allows a user to change the text size in browsers
– If you do not specify a font size, the default size for normal text, like
paragraphs, is 16px (16px=1em).
47
Set Font Size With Pixels
▪ Setting the text size with pixels, gives you full control over the text
size:
Example
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
48
STYLING Font – Size (With Em)
▪ To avoid the resizing problem with Internet Explorer, many
developers use em instead of pixels.
▪ The em size unit is recommended by the W3C.
▪ 1em is equal to the current font size. The default text size in
browsers is 16px. So, the default size of 1em is 16px.
▪ The size can be calculated from pixels to em using this

formula: pixels/16=em
Example: h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
• Use a Combination of Percent and Em
Example
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
49
STYLING Font – Weight
▪ Set different font weight for three paragraphs:
Example
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:bolder;}
▪ The font-weight property is supported in all major browsers.
STYLING Font – Variant

▪ Setting different variants for font:
Example
p.small {font-variant:small-caps;}
p.normal {font-variant:normal;}
50
STYLING Font – Variant
<html>
<head>
<style type="text/css">
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class="normal">Client-Side Internet and Web Programming.</p>
<p class="small">Client-Side Internet and Web Programming.</p>
</body>
</html>
51
Properties
Property Type Property
font
font-family
font-size
Fonts font-style
font-weight
@font-face
letter-spacing
line-height
Text text-align
text-decoration
text-indent
background
background-color
Color and background-image
background background-position
background-repeat
color
border
border-color
border-width
border-style
Borders border-top
border-top-color
border-top-width
etc
Properties
Property Type Property
padding
Spacing padding-bottom, padding-left, padding-right, padding-top
margin
margin-bottom, margin-left, margin-right, margin-top
height
max-height
Sizing max-width
min-height
min-width
width
bottom, left, right, top
clear
display
Layout float
overflow
position
visibility
z-index
list-style
Lists list-style-image
list-style-type
END OF PART 1
What you’ve learned
1 What is CSS?
2 CSS Syntax
3 Location of Styles
4 Selectors
5 The Cascade: How

Styles Interact 6 CSS Text Styling

Css Part1 CHP 4 Hamid

Uploaded by

Copyright:

Available Formats

Css Part1 CHP 4 Hamid

Uploaded by

Document Information

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

Css Part1 CHP 4 Hamid

Uploaded by

Copyright:

Available Formats

CSS Part 1: Introduction

Textbook to be published by Pearson Ed in early 2014

5 The Cascade: How

7 CSS Text Styling

▪ Contains the rules for the presentation of HTML.

CSS was introduced to keep the presentation information separate

❑ Separates structure from presentation

With CSS help, we can create

– HTML element name selector

<p class=“new”>This is text is red and in italics</p>

Group the same selector with different declarations

Example of grouping selectors (both are correct):

– Default browser style sheet

<h1 style="color:#FF0000;background-color:#cccccc">This is displayed

• An example of a style sheet file is shown below:

CSS Background Properties

background-attachment Sets whether a background image is fixed or scrolls with

background-image Sets the background image for an element

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

• a HEX value - like "#ff0000"

▪ The default color for a page is defined in the body selector.

STYLING – Text Indentation

font-family Specifies the font family for text

▪ The font-size value can be an absolute, or relative size.

▪ The em size unit is recommended by the W3C.

▪ The size can be calculated from pixels to em using this

▪ The font-weight property is supported in all major browsers.

STYLING Font – Variant

5 The Cascade: How

You might also like