1631023732822_Chapter - 3

1
Chapter - 3
Configuring Color and Text with CSS
2 Cascading Style Sheets (CSS)
 Web designers use CSS to separate the presentation style of a web page from the
information on the web page.
 CSS is used to configure text, color and page layout.
3 What is CSS?
 Cascading Style Sheets (CSS) is used to format the layout of a webpage.

 With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images or
background colors are to be used, different displays for different devices and
screen sizes, and much more!
4 Configuring Cascading Style Sheets
 Web developers use following methods to incorporate CSS technology:

 Inline Styles are coded in the body of the web page as an attribute of an HTML tag.
The style applies only to the specific element that contains it as an attribute.
 Embedded Styles are defined in the header of a web page. These style instructions
apply to the entire web page document.
 External Styles are coded in a separate text file. This text file is associated with the
web page by using a link element in the head section.
5 CSS Selectors and Declarations
 Style sheets are composed of style rules

 Each rule has two parts: a selector and a declaration
 CSS Style Rule Selector : The selector can be a HTML element name, a class name, or
an id name.
 CSS Style Rule Declaration: The declaration indicates the CSS property you are
setting (such as color) and the value you are assigning to the property.
 body {color:blue}
 body = selector, color = declaration property, blue = declaration value
6 The background-color property
 Configures the background color of an element.

 How the declaration is enclosed within braces and how the colon symbol (: )
separates the declaration property and the declaration value.
 body {background-color : yellow;}
 p {color:green
}
7 The color property
 Configure the text (foreground) color of an element.

 body{color : blue;}
8 Configure Background and Text Color
 To configure more than one property for a selector, use a semicolon (;) to separate the
declarations as follows:
 body {color: blue ; background-color: yellow; }
 body {color: blue ; background-color: yellow}
 body {color: blue;
background-color: yellow;}
 body {
color: blue;
background-color: yellow;
}
9 Using color on Web Pages
 Monitors display color as a combination of different intensities of red, green, and

blue, a concept known as RGB color.
 RGB intensity values are numerical from 0 to 255.
 Each RGB color has three values, one each for red, green and blue.
 You will usually use hexadecimal color values to specify RGB color on web
pages.
10 Hexadecimal Color Values
 Hexadecimal is the name for the base-16 numbering system.

 Which uses the characters 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E, and F to specify numeric
values.
 Hexadecimal color values specify RGB color with numeric value pairs ranging from
00 to FF.
 Red = #FF0000 or #ff0000 (#RRGGBB)
 Green = #00FF00 or #00ff00
 Blue = #0000FF or #0000ff
 The # symbols signifies that the value is hexadecimal.
 http://webdevfoundations.net/color
p
{ col
or :re CSS Color Syntax
d;}
 p { color :red;}
 p { color : #ff0000;}
 p { color :#f00;}
 p { color : rgb (255,0,0);}
12 Inline CSS with the Style Attribute
 Inline styles are coded as an attribute on an HTML tag using the style attribute.
 For Example:
 <h1 style=“color:#cc0000”>This is displayed as a red heading</h1>
 <h1 style = “color:#cc0000; background-color: #cccccc”> This displayed as a red
heading on a gray background </h1>
13 Hands-On Practice
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Inline CSS Example</title>
<meta charset=“utf-8”>
</head>
<body style= “background-color:#f5f5f5; color:#008080;”>
<h1 style= “background-color:#008080;color:#f5f5f5;”>Inline CSS</h1>
<p>This paragraph inherits the styles applied to the body tag.</p>
<p style=“color:#333333”>This paragraph overrides the text color style applied to the body
tag.</p>
</body>
</html>
14 Embedded (Internal) CSS with the Style
Element
 An internal CSS is used to define a style for a single HTML page.
 You added inline styles for one of the paragraphs. To do so, you coded a style
attribute on the paragraph element.
 But what if you needed to configure the styles for 10 or 20 paragraphs instead of
just one?
Using inline styles, you might be doing a lot of repetitive coding. While
inline styles apply to one HTML element, embedded styles apply to an entire web
page.
15 Style Element
 An Internal CSS is defined in the <head> section of an HTML page, within a

<style> element.
 The opening <style> tag and the closing </style> tag contain the list of
embedded-style rules.
16 Hand-On Practice
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
17 External CSS with Link Element
 An external style sheet is used to define the style for many HTML pages.
 By using a <link> element to link to an external CSS file.
18 Link to External CSS
 External style sheets can be referenced with a full URL or with a path relative to
the current web page.
 This example uses a full URL to link to a style sheet:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
 This example links to a style sheet located in the html folder on the current web
site:
<link rel="stylesheet" href="/html/styles.css">
 This example links to a style sheet located in the same folder as the current page:
<link rel="stylesheet" href="styles.css">
19 Cont’d
 The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.
 Here is what the "styles.css" file looks like:
 "styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
20 Hand-On Practice
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
21 Configuring Text with CSS
 Using CSS to configure text is more flexible than using HTML elements and is
the method preferred by modern web developers.
22 CSS Font-family and Font-size Properties
 The font-family property defines the font to be used.

 The font size property sets the size of the font.
 Text value – xx-small, x-small, medium, large, x-large
 Pixel Unit (px) – Numeric value with unit, such as 10px
 Point Unit (pt) – Numeric value with unit, such as 10pt
 Em Unit (em) – Numeric value with unit, such as .75em
 Percentage value – Numeric value with percentage, such as 75%
 Font-size: 100% and font-size: 1 em should render the same in a browser.
Hand-On Practice
23
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
</body>
</html>
24 CSS Border
 The CSS border property defines a border around an HTML element.

 The CSS border properties allow you to specify the style, width, and color of an
element's border.
 Use of CSS border Property:
p{
border: 2px solid powderblue;
}
25 CSS Padding
 The CSS padding property defines a padding(space) between the text and the
border.
 Tip: You can define a border for nearly all HTML element.
 Use of CSS border and padding Property:
p{
padding: 30px;
}
26 CSS Margin
 The CSS margin property defines a margin (space) outside the border.
 Use of CSS border and margin Property:
p{
margin: 30px;
}
Hand-On Practice
27
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin: 30px;}
</style>
</head>
<body>
</body>
</html>
28 The font-weight property
 The font weight property configures the boldness of the text.

 Configuring the CSS rule font-weight: bold; has a similar effect as the <strong>
or <b> HTML element.
29 The font-style property
 The font-style property typically is used to configure text displayed in italics.

 Valid values for font-style are normal, italic, and oblique.
 The CSS font-style: italic; has the same visual effect in the browser as an <i> or
<em> HTML element.
30 The line-height property
 Modifies the default height of a line of text and is often configured with a
percentage value.
 Eg., code line-height:200%; to configure text to appear double spaced.
31 The text-align property
 HTML elements are left-aligned by a default; they begin at the left margin.
 The CSS text-align property configures the alignment of text elements such as
headings, paragraphs, and divs.
 The value of the text align property are left (default), right and center.
 h1 {text-align:center;}
32 The text-indent property
 Configures the indentation of the first line of text within an element.

 The value can be numeric (such as a px, pt, or em unit) or a percentage.
 p {text-indent: 5em;}
33 The text-decoration property
 The purpose of the CSS text-decoration property is to modify the display of text.
 Text-decoration property include none, underline, overline, and line-through.
 Did you ever wonder why some hyperlinks are not underlined?
 Although hyperlinks are underlined by default, you can remove the underline
with the text-decoration property.
 a {text-decoration : none;}
34 CSS Font-family Properties
 The font-family property can hold several font names as a “fallback” system. If
the browser does not support the first font, it tries the next font.
 If a font name contains white-space, it must be quoted. Single quotes must be
used when using the "style" attribute in HTML.
 There are two types of font family names:
 family-name - The name of a font-family, like "times", "courier", "arial", etc.
 generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive",
"fantasy", "monospace".
 Start with the font you want, and always end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are available.
35 Configure the h1 and h2 selector
h1 {background-color: #191970;
color: #E6E6FA;
line-height: 200%;
font-family:Georgia, “Times New Roman”,serif;
}
h2 {background-color: #AEAED4;
color: # 191970;
text-align: center;
font-family:Georgia, “Times New Roman”,serif;
}
36 Configure the paragraphs
 Configure text in paragraphs to display just slightly smaller than the default text
size.
 Use the font-size property set to 90 em.
 Configure the first line of each paragraph to be intended. Use the text-indent
property to configure a 3em indent.
 p { font-size: 90em;
text-indent:3em;
}
37 Configure the Unordered list
 Configure the text displayed in the unordered list to be bold.

 ul {font-weight: bold;}
 Can apply the same style rules to multiple selectors by listing the selectors in
front of the style rule.
 Place a comma between each selector.
 p, li {font-size: 1em;}
 The code sample shows the font-size of 1em being applied to both the paragraph
and list-item elements
38 CSS Selector
 CSS selectors are used to "find" (or select) the HTML elements you want to style.
39 The class selector
 The class selector selects HTML elements with a specific class attribute.
 When setting a style for a class, configure the class name as the selector.
 Place a dot, or period (.), in front of the class name in the style sheet.
 .feature {color:#ff0000;}
 <li class4 = “feature7”>Usability Studies</li>
40 The id selector
 The id selector uses the id attribute of an HTML element to select a specific

element.
 The id of an element is unique within a page, so the id selector is used to select
one unique element!
 To select an element with a specific id, write a hash (#) character, followed by the
id of the element.
41 Cont’d
 Eg. The copyright information in the page footer displays in small italic text with
a gray color (#333333).
 The code will configure an id called footer in a style sheet with gray, small, italic
text:
 #footer{color:#333333;
font-size:.75em;
font-style: italic;}
 <div id=“footer”> This paragraph will be displayed using styles configured in the
footer id.</div>
42 Cont’d
 Using CSS with an id selector is similar to using CSS with a class selector.
 Use an id selector to configure a single element on a web page.
 Use a class selector to configure one or more elements on a web page.
43 Configure the navigation area
 The navigation links would be more prominent if they were displayed in a larger
and bolder font.
 Create a class named nav that sets the font-size and font-weight properties.
 .nav {font-weight : bold;
font-size:1.25em;}
 Modify the opening div tag of the navigation area. Add a class attribute that
associates the div with the nav class as follows:
<div class = “nav”><a href=testing.html>Home</a>
<a href = testing2.html>Services</a>
<a href = testing3.html>Conatct</a></div>
44 Configure the content area and footer area
 Create a class named feature that configures the text color to be red (#ff0000).
 .feature {color:#ff0000}
 <li class = “feature”> Usability Studies</li>
 <li class = “feature”>Search Engine Optimization</li>
 Create an id named footer that sets the text color, font-size, and font-style properties.
 #footer{color : #333333;
font-size : .75em;
font-style : italic;}
 <div id = “footer”>Copyright © 2012 Ma Ma</div>
45 The Span element
 The span element defines a section on a web page that is not physically separated
from other areas; this formatting is referred to as inline display.
 Use the <span> tag if you need to format an area that is contained within another,
such as within a <p>, <blockquote>, <li>, of <div> tag.
46 Configure the company name
 Create a new CSS rule that configures a class called company name in bold, serif
font, and 1.25em in size.
 .companyname {font-weight: bold;
font-family: Georgia, “Times New
Roman”, seri;
font-size: 1.25em;}
<p><span class=“companyname”>Trillium Media Design</span> will bring</p>
47 Using External Style Sheet
 The flexibility and power of CSS are best utilized when CSS is external to the
web page document.
 An external style sheet is a text file with a .css file extension that contains css
style rules.
 The external style sheet file is associated with a web page by using the link
element.
 This approach provides a way for multiple web pages to be associated with the
same external style sheet file.
 The external style sheet file does not contain any HTML tags; it contains only css
style rules.
48 Link Element
 The link element associations an external style sheet with a web page.
 It is placed in the head section of the page and is a stand-alone, void tag.
 Three attributes are used with the link element; rel, href and type.
 The value of the rel attribute is “stylesheet”.
 The value of the href attribute is the name of the style sheet file.
 The value of the type attribute is “text/css”, which is the MIME type for css. The
type attribute is optional in HTML5 and required in XHTML.
 <link rel =“stylesheet” href=“color.css”>
49 Create an External Style Sheet
 body { background-color: #0000ff;

color:#ffffff;}
 Save the file as color.css
50 Configure the web page
<!DOCTYPE html>
<head>
<title>External Styles</title>
<meta charset = “utf-8”>
<link rel = “stylesheet” href=“color.css”>
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
51 Hands-On Practice
body {background-color:#e6e6fa;
color: #191970;
font-family: Arial, Verdana, sans-serif;}
h1 {background-color:#191970;
color: #e6e6fa;
line-height :200%;
font-family: Georgia, “Times New Roman”, serif;}
h1 {background-color:#aeaed4;
color: # 191970;
line-height :200%;
font-family: Georgia, “Times New Roman”, serif;
text-align : center;}
Cont’d
52
p {font-size: .90em;
text-indent: 3em;}
ul { font-weight: bold;}
.nav {font-weight: bold;
font-size: .125em;}
.feature{color:#ff0000;}
#footer{color:#333333;
font-size:.75em;
font-style:italic;}
.companyname {font-weight:bold;
font-family: Georgia, “Times New Roman”, serif;
font-size: 1.25em;}
Save trillium.css
53 Center HTML elements with CSS
<body>
<div id = “wrapper”>
…..page content goes here….
</div>
</body>
 Configure css style

#wrapper{width: 700px;
margin-left:auto;
margin-right:auto;}
54 The cascade
 The cascade that applies the styles in order form outermost (external styles) to
innermost (html attributes).
Hands-On Practice
55
<!DOCTYPE html>
<head>
<title>The cascade in Action</title>
<meta charset = “utf-8”>
<link rel = “stylesheet” href=“site.css”>
</style>
body {color:#0000ff;}
<style>
</head>
<body>
<p>This paragraph apples the external and embedded styles.</p>
<p style= “color:#ff0000”> Inline styles configure this paragraph.</p>
</body>
</html>

1631023732822_Chapter - 3

Uploaded by

Document Information

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

1631023732822_Chapter - 3

Uploaded by

Copyright:

Available Formats

1

 Cascading Style Sheets (CSS) is used to format the layout of a webpage.

 Web developers use following methods to incorporate CSS technology:

 Style sheets are composed of style rules

 Configures the background color of an element.

 Configure the text (foreground) color of an element.

 Monitors display color as a combination of different intensities of red, green, and

 Hexadecimal is the name for the base-16 numbering system.

 An Internal CSS is defined in the <head> section of an HTML page, within a

 The font-family property defines the font to be used.

 The CSS border property defines a border around an HTML element.

 The font weight property configures the boldness of the text.

 The font-style property typically is used to configure text displayed in italics.

 Configures the indentation of the first line of text within an element.

 Configure the text displayed in the unordered list to be bold.

 The id selector uses the id attribute of an HTML element to select a specific

 body { background-color: #0000ff;

 Configure css style

You might also like