Scribd
Upload
23 views

Lesson 7

The document discusses Cascading Style Sheets (CSS). CSS allows managing the design and formatting of web pages and is a standard set by the W3C. It describes how HTML elements are displayed in a browser. There are three ways to add CSS - inline styles within elements, internal styles within <style> tags in the head, and external stylesheets linked via <link> tags. The document outlines the syntax for each and compares internal and inline styles. It also discusses support for CSS in web authoring tools and other software.

Uploaded by

shaheenahmedjh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
23 views

Lesson 7

The document discusses Cascading Style Sheets (CSS). CSS allows managing the design and formatting of web pages and is a standard set by the W3C. It describes how HTML elements are displayed in a browser. There are three ways to add CSS - inline styles within elements, internal styles within <style> tags in the head, and external stylesheets linked via <link> tags. The document outlines the syntax for each and compares internal and inline styles. It also discusses support for CSS in web authoring tools and other software.

Uploaded by

shaheenahmedjh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

7.

0 Cascading Style Sheets (CSS)

Lesson Introduction

In this lesson you will gain knowledge about Cascading Style Sheets (CSS). CSS is a
standard set by the World Wide Web Consortium (W3C) for managing the design
and formatting of Web pages in a Web browser. A single piece of CSS formatting
information, such as text alignment or font size, is referred to as a style. Some of
the style capabilities of CSS include the ability to change fonts, backgrounds, and
colors, and to modify the layout of elements as they appear in a Web browser.
CSS information can be added directly to documents or stored in separate
documents and shared among multiple Web pages.
Learning outcomes:
After completion of this lesson, you will be able to apply inline styles, internal
styles and external styles to web pages.
This lesson enables you to
Write inline styles with relevant attributes
Modify html elements with inline styles
Write internal styles and apply styles into web page elements
Maintain page style consistency with internal style sheets
Create and save external stylesheets and apply for a website
Apply different styles by keeping same element
Lesson Outline
Style elements, attributes and values under CSS
Syntax of Inline styles
Syntax of internal styles
Comparison of Internal and Inline styles
Support of IDE’s in maintaining style sheets
External CSS and file handling
Syntax of external styles
Style elements and classes
Use of style classes in HTML elements
Introduction to CSS3
7.1 Style elements, attributes and values under CSS

CSS can be added to the HTML document in three different ways. They are
1. Inline Style
2. Internal Style Sheet
3. External Style Sheet
Inline style is most basic method of CSS. It is used to apply a style for single element
of HTML document using style attribute. Internal and External style sheets are more
important than Inline styles. Internal and External styles can be applied to more than
one HTML elements. Internal style sheet is used to apply the styles to single HTML
page (web page). It is defined within <style> element under the <head> section in
HTML page. External style sheet is used to apply the styles to more than one HTML
pages (web site). It is defined using external CSS file. This file is connected to each
HTML page of the web site by including the <link> element to the <head> section.

7.1.1 Style element

<style> element is defined to add the style information for a single HTML page, when
you are using internal style sheet. It is declared under <head> section. CSS style type
is defined as the type attribute within <style> element. Syntax is shown in the
following statement.

<style type="text/css">

Inside the <style> element, you can specify how HTML elements represent in browser.
Each HTML tag is represented as “selector” in CSS. Each selector has property-value
pairs ( {property : value} ) within curly brackets. Property-value pairs are separated
from semi-colon. Example of syntax of style elements is given below.
<style type="text/css">
body {background-color: yellow;}
h1 {color: blue;}
p {color: red;
font-style: italic}
</style>

7.1.2 Style Attribute and Property-Value pairs


Style attribute is defined to add the style information for a single element of HTML
page, when you are using inline styles.
CSS styles are created with two parts separated by a colon. They are property and
value. The property, which refers to a specific CSS style, and the value assigned to it,
which determines the style’s visual characteristics. Property-value pair example is
given below.
color: blue

Property Value

The properties available in CSS1 (Cascading style sheet version 1.0) are grouped into
the following categories:
• Color and background properties
• Font properties
• Text properties
• Box properties
• Classification properties

Some common CSS properties are shown in the Table 7.1 below. Some properties can
be assigned a range of values.
For instance, you can assign any font name that is available on a user’s system to the
“font-family” property. For other properties, you must assign a value from a specific
set of values. Example is given below.

font-family: Arial, Helvetica, sans-serif;


Property-value pairs are assigned to style attribute using equal sign. These property-
value pairs are enclosed from quotation marks and separated from semi-colon.
Example of syntax of a inline style attribute and property-value pairs is given below.

<h1 style="color: red; text-align: center">This is a Red Heading</h1>

Table 7.1. Some common CSS properties

7.2 Syntax of Inline styles


An inline style is used to add style information to single element of HTML document.
Different styles are added to different elements separately.
Inline styles are added to style attribute of each of beginning tag. You can assign one
or more property-value pairs to style attribute using equal sign (=). Property-value
pairs are enclosed from quotation marks ("") and separated from semi-colon (;).
Following example is shown all those syntax components of inline styles.

<p style="color: green; font-size: 20px">This is a paragraph. </p>

Property Value
Style Attribute Property Value
7.3 Syntax of internal styles
Internal style sheet is used to add style information to single HTML page (web page).
Internal styles are defined inside the <style> element under <head> section. CSS style
type is declared as a type attribute.
HTML tag is represented as “selector” in CSS. Set of selectors and property-value
pairs are included within the <style> element. Each selector points to the relevant
HTML element you want to style. Set of property-value pairs for each selector are
enclosed from curly braces ({}) and separated from semi-colon (;). Following example
is shown all those syntax of a internal styles

p {color: green; font-size: 20px}

Property Value
Selector Property Value

Reference: https://www.w3schools.com/html/html_css.asp
https://www.w3schools.com/css/css_syntax.asp

Activity 7.1

<!DOCTYPE html>
<html>
<body>
<h1>CSS</h1>
<p>CSS is a language that describes the style of an HTML document. </p>
<p>CSS describes how HTML elements should be displayed. </p>
<h2>What is CSS? </h2>
<ul>
<li>CSS stands for Cascading Style Sheets</li>
<li>CSS describes how HTML elements are to be displayed on screen, paper, or in
other media</li>
</ul>
</body>
</html>

Change above HTML code by adding inline styles to all HTML elements using style
attribute. Refer the above given references when assigning styles for the given elements.
Upload your final output to the given link in the moodle.
7.4 Comparison of Internal and Inline styles
Internal styles are applied to the whole HTML document (web page). But inline styles
are applied to an element separately. Internal style is defined within <style></style>
tags. But inline style is defined within style attribute. Classes and ids can be used in
internal styles. But inline styles can’t be used.
HTML document with internal style sheet is shown in following example.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>

<h1>This is heading level 1</h1>


<p>This is our paragraph.</p>

</body>
</html>

HTML page with inline style is shown in following example.

<!DOCTYPE html>
<html>
<body style="background-color: yellow;">

<h1 style="color: white; padding:30px;">This is heading level


1</h1>
<p style="color: white;">Something useful here. </p>

</body>
</html>
7.5 Support of IDE’s in maintaining style sheets
Nowadays, most Web authoring tools and other software provide some sort of support
for CSS style sheets. Those tools and software are available to make it even easier.

7.5.1 Web Authoring Tools


Adobe Dreamweaver and Microsoft Expression web also contain separate management
tool to manage your styles. Those tools helps you to manage the consistency of the
styles within a website.
CSE HTML validator, an HTML editor validates HTML, CSS, and PHP code. It integrated
with syntax, link, spell, accessibility checkers, SEO etc.
CodeLobster publishes an IDE for HTML, CSS, PHP and JavaScript. It has code
highlighting, debugger, auto-complete etc.
The WebStorm JavaScript editor contains a CSS editor. It can do syntax checking,
auto-complete etc.
Liquid XML Editor has a feature to CSS editor. It enables us to edit our CSS document
and validate it.

7.5.2 Other software


RealObjects released PDFreactor which supports for CSS Transforms, CSS Regions,
Web Fonts and running elements.
Shakespeare is a Haskell library. It provides a template system for creating CSS style
sheets.
CSS.pm is an object-oriented Perl library. It is for reading, writing and manipulating
CSS style sheets.
CSSTidy that can do some rewriting the CSS style sheets to minify them.

Reference: https://www.w3.org/Style/CSS/software.en.html#other
7.6 External CSS and file handling
External style sheet is used to defined style information to more than one HTML pages
(web site). An external style sheet can be written in any text editor (eg: Notepad,
Notepad++ etc.). This file must not contain any html code. But it must contain all the
styles that are applying to entire web site. (The content of the file is same as to the
content of <style> section that used in internal styles. But beginning “<style>” and
ending “</style>” tags are omitted.) That file must be saved using .css extension. So,
you can change the look of whole web site by changing the one file (.css file). That
.css file is connected to each HTML page using <link> element under <head> section of
HTML page.
Example code of external style sheet (styles.css file) is given below. Save it as
style.css file.

body {background-color: orange}


h1 {color: white; text-decoration: underline}
p {color: blue;}

Example code of HTML page with connection to styles.css file is given below.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
7.7 Syntax of external styles
External styles are used to apply the styles to whole web site. So, it has external file
that is saved with a .css extension. That file contained a set of selectors and
property-value pairs. Above styles.css file example, selectors, property and value are
shown in Table 7.2.
Table 7.2. Selectors and property-value pairs of styles.css file

Selectors Property Value


body background-color orange
h1 color white
text-decoration underline
p color blue

External style sheet (eg: styles.css file) is linked to each HTML page of a web site
using <link> element inside the <head> section. Example html code of <link> element
is given below.

<link rel="stylesheet" href="styles.css">

link element Relationship to hyperlink to “styles.css”


“stylesheet”

Activity 7.2

1. Create a web site to include your family members details using internal
styles for body format (background color), paragraph format (font style, color,
size), level 1 heading format (font color, family, alignment), level 2 heading
format (font color, underline), level 3 heading format (font color, italic) and
hyperlink (color, background).
Create at least 3 web pages for your family members with above web site styles
with a main page give link the other generated web pages of your family
members details.
2. Create an external style sheet using above styles for whole web site (You
may change the style attribute values (appearance) here from the previous
one).
7.8 Style elements and classes
CSS selectors are used to select and classify (find) the HTML elements of HTML page.
The class selector selects the relevant class attribute of the HTML code. A class is
defined in CSS code using dot (.) sign followed by a class name. An example CSS code
is given below.

.intro {
color: blue;
text-align: right;
}

You can also assign a class selector (here paragraph tag <p>) to specific html element.
An example css code is shown below.
p.intro {
color: blue;
text-align: right;
}

HTML element can also refer to more than one class selectors. An example html code
is given below (for <p> element with classes intro1 and intro2).
<p class="intro1 intro2">Here refers two classes. </p>

When css code has same style definition for every selector, it is better to group the
selectors. An example css code is shown below.
h1, h2, p {text-align: center; color: red}

CSS :hover selector is used to select the html element when you move the mouse over
the word/sentence over the element. It can be used to all the html elements. An
example is given below.

a:hover { background-color: yellow; }


The descendent selector means one selector inside another selector. It refers to
relevant one element inside of another element of html code. An example is given
below.

ul li {color: red; font-weight: bold}

Please refer the following web page for further studies with those online applications.
Try those examples to enhance your knowledge.
Reference: https://www.w3schools.com/css/css_combinators.asp

7.9 Use of style classes in HTML elements


Example 1: Select all html element with class= “intro”. Apply color blue and texts
align right to relevant html code.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.intro {
color: blue;
text-align: right;
}
</style>
</head>
<body>
<h1 class="intro">Blue and right-aligned heading</h1>
<p class="intro">Blue and right-aligned paragraph. </p>
</body>
</html>

When you apply the above code the output would be looks alike the following. Create
the above web page and observe the output as follows.
Output of example 1:

Example 2: Select only <p> element with class= “intro”. Apply color blue and texts
align right to relevant html code.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.intro {
color: blue;
text-align: right;
}
</style>
</head>
<body>
<h1 class="intro">Blue and right-aligned heading</h1>
<p class="intro">Blue and right-aligned paragraph. </p>
</body>
</html>

When you apply the above code the output would be looks alike the following. Create
the above web page and observe the output as follows.
Output of example 2:

Example 3: Web page of css and html code by referring to more than one class.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.intro1 { text-align: right; color: blue }
p.intro2 { font-size: 40px }
</style>
</head>
<body>
<p class="intro1 intro2">This paragraph will be blue, right-aligned, and in a
40px font-size.</p>
</body>
</html>
Example 4: A web page of css and html code for the descendent selector.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul li {color: red; font-weight: bold}
</style> </head>
<body>
<h3>Fruits</h3>
<ul> <li>Apple</li>
<li>Mango</li>
</ul>
<ol> <li>Avacado</li>
<li>Wood Apple</li>
</ol>
</body></html>

Activity 7.3

1. Create the above web pages given in example 3 and 4. Modify those website
by including different colours and background colours.

2. Create an external style sheets for the above styles, which are available in
example 3 and 4 as you modified in previous activity.
Upload your creative web pages with styleshees (in folders) to the moodle.
7.10 Introduction to CSS3
CSS recommendation, Level 2 (CSS2) was released in 1998. CSS2 builds on the
properties in CSS1 and includes new features such as table properties and the ability
to change the appearance of the mouse pointer.
CSS level 3 (CSS3) specification structured in modules. These modules can evolve
independently. Few modules have reached the W3C recommendation status, but
many are implemented in browsers.
The CSS3 Selectors module introduces three new attribute selectors, which are
grouped together under the heading “Substring Matching Attribute Selectors”.
These new selectors are as follows:
[att^=val] – the “begins with” selector
[att$=val] – the “ends with” selector
[att*=val] – the “contains” selector
Microsoft supports CSS3 animations, transforms and transitions, without the need for
vendor prefixes, becoming the first browser to do so.

Full CSS described at http://www.w3.org/Style/CSS/specs.en.html


Summary at: http://www.css3.info

Summary

Now you have completed learning lesson 7. You have learned about Style
elements, attributes and values under CSS, Syntax of Inline styles, Syntax of
internal styles, Comparison of Internal and Inline styles, Support of IDE’s in
maintaining style sheets, External CSS and file handling, Syntax of external styles,
Style elements and classes, Use of style classes in HTML elements and
Introduction to CSS3.

You might also like