Scribd
Upload
58 views16 pages

Web Technologies - ITC 351 Lecture - 6

1. A brief overview of CSS 2. CSS document Structure 4. Applying CSS to HTML documents 3. CSS Selectors and Declarations

Uploaded by

kusiasare73
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views16 pages

Web Technologies - ITC 351 Lecture - 6

1. A brief overview of CSS 2. CSS document Structure 4. Applying CSS to HTML documents 3. CSS Selectors and Declarations

Uploaded by

kusiasare73
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

27-Apr-22

ITC351
Web Technologies
Lecture Six

Today’s Lecture

2.0
1.0 CSS
Overview Document
of CSS Structure

3.0 4.0
CSS Selectors Applying CSS
and to HTML
Declarations documents
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr. 2

1
27-Apr-22

Outline of Instruction

1. A brief overview of CSS

2. CSS document Structure

3. CSS Selectors and Declarations

4. Applying CSS to HTML documents

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Lecture Objectives
• By the end of the lecture, the student will
be able to:
– Explain CSS .
– Describe the CSS document structure.
– Identify CSS and write CSS style rules
– Describe how CSS files are applied to web
pages.
– Create and apply a CSS file to an HTML
document.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

2
27-Apr-22

What is a CSS?
 CSS is stands for Cascading Style Sheets.
 CSS is a language that defines style
constructs such as fonts, colors and positions
which are used to describe how information
on a web page is formatted and displayed.
 CSS is a style language that defines layout
and appearance of HTML documents.
 CSS, is the recommended way to control the
presentation layer in web document projects
by creating robust style rules.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Overview of CSS - 1
• A style sheet is a grouping of formatting
instructions that can control the
appearance of many HTML pages at once.
• CSS enables you to set a great number of
formatting characteristics that were never
possible before with any amount of effort.

3
27-Apr-22

Benefits of Using CSS


• By externalizing the presentation layer, CSS
offers a number of significant benefits:
1. All styling is kept in a limited number
of style sheets.
2. There is some saving on bandwidth.
3. The separation of content from
presentation makes it easier for site
owners to reuse the content for other
purposes.
4. Separate styling rules can be used for
different output media.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Types of Style Sheets


 Style sheets are classified according to
how they are applied to the HTML
documents.
 There are three types of style sheets.
 These are:
 External Styles
 Internal (Embedded) Styles.
 Inline Styles

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

4
27-Apr-22

External Style Sheet


• An external style sheet is ideal when the style
is applicable 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 reference the external style
sheet using the <link> tag.
• The <link> tag goes inside the <head> section
of your HTML page as shown in below:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css“ />
</head>

Internal Style Sheet


• An internal style sheet can be used if one
single document has a unique style.
• Internal styles are defined in the <head>
section of an HTML page, by using the
<style> tag, like this:
• <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

5
27-Apr-22

Inline Styles
• An inline style can be used if a unique style is
to be applied to one single occurrence of an
element on a web page.
• To use inline styles, use the style attribute in
the start tag of the relevant element.
• The style attribute can contain any CSS
property value pairs.
• The example below shows how to change the
text color and the left margin of a paragraph:
<p style="color:blue;margin-left:20px;">This is a
paragraph.</p>

CSS Document Structure

o In order to work in CSS, one must be


familiar with some markup languages like
HTML or XHTML so that you can add
personalized styles on the markup
documents.
o This is because CSS rules are applied to
HTML or XHTML elements.

Web Technologies Slides by: Maxwell Dorgbefu Jnr.

6
27-Apr-22

CSS Rule - 1
 A rule or "rule set" is a statement that tells
browsers how to render particular elements
on an HTML page.
 A rule set consists of a selector followed by a
declaration block.
 Each declaration consists of a property and a
value.
 A CSS declaration always ends with a
semicolon.
 Declaration groups are surrounded by curly
brackets. Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

CSS Rule/ Syntax

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

7
27-Apr-22

CSS Syntax - Selector


 Selector: the selector is used to 'select' or
'target' the HTML element that you want to
style.
 This is how we tell the web browser to
apply a particular style to a particular
html element.
 For instance, let's say you want to style all
the paragraphs on your web pages.
 The letter "p" would be our selector name
and it targets (selects) all paragraphs.
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

CSS Syntax - Declaration


 Declaration Block: is everything between
the curly brackets.
 What you see between these curly brackets
are referred to as Property: Value pairs.
 This is how we define the formatting
properties we want to apply to our web
pages.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

8
27-Apr-22

CSS Rule – CSS Selectors


 Rules or Style Declarations begin with CSS
Selectors.
 The Selector is very important because it tells
the web browser which HTML element to
style.
 The following are the Core CSS Selectors:
 Tag or Element
 Descendant
 Pseudo-Class
 Universal
 Id
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.
 Class

Using the <div> and <span> Elements


 The <div> (division) and the <span>
(span of words) elements are designed to
be used with CSS.
 These elements let you specify logical
divisions within a document that have
their own names and style properties.
 <div> is a block-level element and
<span> is its inline equivalent.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

9
27-Apr-22

Tag or Element Selectors


 Tag selector is simply the HTML tag you
are styling, but without the angular
brackets.
 In most CSS the tag selector is combined
with other selectors
 Tag selectors can be applied as:

body {margin: 0px; padding: 0px;}

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Descendant Selectors
 A descendant selector matches any element
that is a descendant of another—in other
words, an element that is nested at any level
inside another.
 To create a descendant selector, separate the
two selectors by a space, and putting the
descendant (nested) element on the right.
 For example, the following style rule changes
the font size of paragraphs nested at any
level inside a <blockquote> tag:
blockquote p { font-size: 13px; }
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

10
27-Apr-22

Pseudo-class Selectors
 Pseudo-classes and pseudo-elements are
used to apply styles to elements based on
their state or position in the document.
 Apply a pseudo-class or pseudo-element
by appending it to a basic selector.
 For example, a:link applies the :link
pseudo-class to the <a> tags.
 The p:first-letter applies the :first-letter
pseudo-element to the <p> tags.

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Universal Selectors
 Universal Selector is indicated with an
asterisk *.
 The purpose of this selector is to make
style one time and it will be applied to
every single elements on the web page
 The most common use of the universal
selector is to remove, or zero out, all
margins and padding. For example,
* {margin: 0px; padding: 0px;}
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

11
27-Apr-22

Id Selector
 An Id Selector is indicated by preceding its
name by the pound # sign.
 Id selectors are used for page elements
that appear one time on a web page and
require unique formatting instructions.
 For example, an Id selector could be :
#dare { text-indent: 3em }
 This would be referenced in HTML by the
id attribute as shown here:
<p id= “dare” >Text indented 3em</p>
Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

Class Selector
 A class selector’s name is preceded by a full stop (.).
 Unlike Id selectors, a class selector can be applied to
several elements on a web page.
 An example would be if you want to give all the
paragraphs on your web page the same styling.
.note {background-color: #013370;
color: white;
font-size: small;
}
 This would be referenced in HTML by the class
attribute of the element:
<p class= “note” >This my paragraph</p>

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

12
27-Apr-22

Styling Background
• CSS background properties are used to
define the background effects of an
element.
• CSS properties used for background
effects:
– background-color
– background-image
– background-repeat
– background-attachment
– background-position

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:
body {background-color:#b0c4de;}
• The background color can be specified
by:
– Name - a color name, like "red"
– RGB - an RGB value, like "rgb(255,0,0)"
– Hex - a hex value, like "#ff0000“

13
27-Apr-22

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(‘path to the image file’);}

Styling Links - 1
 Links can be style with any CSS property such
as color, font-family, and background-color.
 Links can be styled differently depending on
what state they are in.
 The four link states and the order of styling
them are:
a:link - normal, unvisited link
a:visited – link’s state when the user has visited it
a:hover – link’s state when the user mouses over it
a:active – link’s state the moment it is clicked

14
27-Apr-22

Styling Links - 2
 a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
 When setting the style for several link
states, these order rules must be applied:
 a:hover MUST come after a:link and a:visited
 a:active MUST come after a:hover

Focus Questions
Visit https://www.w3schools.com and read
on the following:
1. Attribute selectors
2. Combinator selectors,
3. Pseudo-elements selector,
4. The CSS Box Model.
Kindly bring any questions you may have
to class for discussion.

15
27-Apr-22

Our Next Lecture …

The CSS Box Model

Web Technologies Lecture Slides by: Maxwell Dorgbefu Jnr.

16

You might also like