Web Design

Lecture3
Getting Started with CSS

2022 Dr. Ibrahim Al-Baltah 1

Introducing CSS

• HTML only defines a document’s content and structure, not how it

should be displayed.
• The appearance of the page is determined by style sheets written in the
Cascading Style Sheets (CSS).
• CSS has gone through several versions, the latest of which is CSS
Version 3, more commonly known as CSS.

2022 Dr. Ibrahim Al-Baltah 2

Types of Style Sheets

2022 Dr. Ibrahim Al-Baltah 3

Types of Style Sheets…

• browser styles or user agent styles, built into the browser itself.
• user-defined styles, created by the user within the browser.
• external styles, which are styles created and placed within a CSS file
and linked to the website. <link href=“style_file.css” rel=“stylesheet”/>
• embedded styles, which are the styles placed within the HTML file
itself. <style> css rules <style>
• inline styles, which are added as attributes of specific elements within
the HTML file.
<p style=“color: red;”>

2022 Dr. Ibrahim Al-Baltah 4

Exploring Style Rules

• Style rules have the general form

where selector identifies an element or a group of elements within the

document and the property: value pairs specify the style properties and
their values applied to that element or elements.

2022 Dr. Ibrahim Al-Baltah 5

Exploring Style Rules…

Change the font color of all h1 tags

into red and align them centrally

Change the font color of all h1 and

h2 tags into red

2022 Dr. Ibrahim Al-Baltah 6

Browser Extensions

• Most browsers supply their own extended library of style properties,

known as browser extensions.
• Many of the styles that become part of the W3C specifications start as
browser extensions and for older browser versions, sometimes the
only way to support a particular CSS feature is through a browser
extension tailored to a particular browser

2022 Dr. Ibrahim Al-Baltah 7

Browser Extensions…

2022 Dr. Ibrahim Al-Baltah 8

Browser Extensions…

2022 Dr. Ibrahim Al-Baltah 9

Embedded Style Sheets

• Embedded styles are inserted directly into the HTML file by adding
the following style element to the document head

External style

Embedded style
2022 Dr. Ibrahim Al-Baltah 10
Inline Styles

• The very last styles to be interpreted by the browser are inline styles,
which are styles applied directly to specific elements using the
following style attribute

where the property: value pairs define the styles, which are applied
directly to that element.

2022 Dr. Ibrahim Al-Baltah 11

Style Specificity and Precedence

• With so many different style rules to be applied to the same document,

there has to be an orderly method by which conflicts between those
different rules are resolved.
• Another important principle is that the more specific style rule has
precedence over the more general style rule.

More specific
Less specific

2022 Dr. Ibrahim Al-Baltah 12

Style Inheritance

• An additional factor in how style rules are interpreted is that styles are
passed from a parent element to its children in a process known as
style inheritance.
• Thus, the following style rule sets the color of article text to blue and
that rule is passed to any paragraph, header, footer, or other element
nested within an article element. In addition, the paragraph text within
that article is centered:

2022 Dr. Ibrahim Al-Baltah 13

Browser Developer Tools

2022 Dr. Ibrahim Al-Baltah 14

2022 Dr. Ibrahim Al-Baltah 15
Creating a Style Sheet

• Writing Style Comments:

/* comment */
• Defining the Character Encoding: @charset "encoding";
@charset “utf-8”;
• Importing Style Sheets: @import url(url);
• The @import is used to combine style rules from several style sheets
into a single file.

@import url(basic.css);
@import url(sales.css);
2022 Dr. Ibrahim Al-Baltah 16
Working with Color in CSS

• Colors can be defined by names or by RGB

• CSS supports 147 color names covering common names such as red,
green, and yellow to more exotic colors such as ivory, orange, crimson,
khaki, and brown.
• RGB Color Values: RGB color values are based on classical color
theory in which all colors are determined by adding three primary
colors—red, green, and blue—at different levels of intensity.

2022 Dr. Ibrahim Al-Baltah 17

Working with
Color in CSS

2022 Dr. Ibrahim Al-Baltah 18

hsl(hue, saturation,
lightness)
where hue is the tint
of the color in
degrees, saturation is
the intensity in
percent,
and lightness is the
brightness in percent
of the color. Thus, a
medium orange color
would be represented
as
hsl(38, 90%, 60%)

2022 Dr. Ibrahim Al-Baltah 19

Defining Semi-Opaque Colors

• Colors can also be semi-opaque by setting the color’s opacity, which

defines how solid the color appears.
• The color’s opacity can be specified using either of the following rgba
and hsla properties
rgba(red, green, blue, opacity)
hsla(hue, saturation, lightness, opacity)
• There opacity is the opacity of the color ranging from 0 (completely
transparent) up to 1.0 (completely opaque).
hsla(38, 90%, 60%, 0.7)
Rgba(120,130,150,0.5)
2022 Dr. Ibrahim Al-Baltah 20
Setting Text and Background Colors
• CSS supports the following styles to define both the text and background
color for each element on your page
color: color;
background-color: color;
• The style rules to modify the appearance of these document elements are
html {
background-color: hsl(27, 72%, 72%);
}
body {
color: rgb(91, 91, 91);
background-color: ivory;
}

2022 Dr. Ibrahim Al-Baltah 21

2022 Dr. Ibrahim Al-Baltah 22
Exploring Selector Patterns

• The following style rule matches every h1 element in the HTML

document, regardless of its location within the page:
h1 {
color: red;
}
• To direct a style rule to an element at a specific location use selector
patterns to match only those page elements that match a specified
pattern.

2022 Dr. Ibrahim Al-Baltah 23

1- Contextual Selectors

• The first selector pattern you’ll examine is a contextual selector, which

specifies the context under which a particular page element is used.
• Context is based on the hierarchical structure of the document, which
involves the relationships between a parent element containing one or
more child elements and within those child elements several levels of
descendant elements.
• A contextual selector relating a parent element to its descendants has
the following pattern, for example
header h1 { color: red; }
sets the text color of h1 headings to red but only when those
headings are nested somewhere within the header element
2022 Dr. Ibrahim Al-Baltah 24
2022 Dr. Ibrahim Al-Baltah 25
2022 Dr. Ibrahim Al-Baltah 26
1- Contextual Selectors…

• To match any element, use the wildcard selector with the * character.
• For example, the following style rule matches every child of the article
element, setting the text color to blue:
article > * {color: blue;}

2022 Dr. Ibrahim Al-Baltah 27

1- Contextual Selectors…

• Sibling selectors select elements based on the elements that are

adjacent to them in the document hierarchy.
• The following style rule uses the + symbol to select the h2 element,
but only if it is immediately preceded by an h1 element:
h1+h2 {color: blue;}
• On the other hand, the following style rule uses the ~ symbol to select
any h2 element that is preceded (but, not necessarily immediately) by
an h1 element:
h1 ~ h2 {color: blue;}

2022 Dr. Ibrahim Al-Baltah 28

2- Attribute Selectors
• Two attributes, id and class, are often key in targeting styles to specific
elements.
• Recall that the id attribute is used to identify specific elements within
the document.
• To apply a style to an element based on its id, you use either the
selector
#id
or the selector
elem#id

2022 Dr. Ibrahim Al-Baltah 29

2- Attribute Selectors…
• For example, the selector for the following h1 heading from the HTML file
<h1 id="title">Tri and Succeed Sports</h1>.
• The following h1 element and paragraph element both belong to the intro
class of elements:
<h1 class="intro">Tri and Succeed Sports</h1>
<p class="intro"> … </p>
• To select an element based on its class value, use the selector elem.class
where class is the value of the class attribute. Thus the following style rule
displays the text of h1 headings from the intro class in blue:
h1.intro {color: blue;}
• And this style .intro {color: blue;} can be applied for all element that has
intro as a class attribute in the element.
2022 Dr. Ibrahim Al-Baltah 30
2022 Dr. Ibrahim Al-Baltah 31
Attribute selectors…

2022 Dr. Ibrahim Al-Baltah 32

Working with Fonts

• Choosing a Font font-family: fonts;

• where fonts is a comma-separated list, also known as a font stack, of
specific or generic font names
font-family: ‘Arial Black’, Gadget, sans-serif;

2022 Dr. Ibrahim Al-Baltah 33

2022 Dr. Ibrahim Al-Baltah 34
The @font-face Rule
• To access and load a web font, you add the following @font-face rule
to the style sheet

where name is the name of the font, url is the location of the font definition file,
text is an optional text description of the font format, and the descriptor: value
pairs are optional style properties that describe when the font should be used.
2022 Dr. Ibrahim Al-Baltah 35
The @font-face Rule...

• Now we can use our font, for example

P{
color: Gentium;
}
2022 Dr. Ibrahim Al-Baltah 36
The @font-face Rule...

2022 Dr. Ibrahim Al-Baltah 37

Setting the Font Size

• Another important consideration in typography is the text size, which

is defined using the following font-size property
font-size: size;
• where size is a length in a CSS unit of measurement.
• Size values for any of these measurements can be whole numbers (0,
1, 2 ...) or decimals (0.5, 1.6, 3.9 ...).
• Lengths (and widths) in CSS are expressed in either absolute units or
relative units.

2022 Dr. Ibrahim Al-Baltah 38

Absolute units

• Absolute units are units that are fixed in size regardless of the output
device and are usually used only with printed media.
• They are specified in one of five standard units of measurement: mm
(millimeters), cm (centimeters), in (inches), pt (points), and pc (picas).
• For example, to set the font size of your page body text to a 12pt font,
you would apply the following style rule:
body {font-size: 12pt;}
• Note that you should not insert a space between the size value and the
unit abbreviation.

2022 Dr. Ibrahim Al-Baltah 39

Relative Units
• Relative units are expressed relative to the size of other objects within
the web page or relative to the display properties of the device itself.

https://ww
w.w3school
s.com/cssr
ef/css_unit
s.asp

2022 Dr. Ibrahim Al-Baltah 40

Using Viewport Units

• Another relative unit is the viewport unit in which lengths are

expressed as a percentage of the width or height of the browser
window.
• As the browser window is resized, the size of text based on a viewport
unit changes to match.
• There are four viewport units: vw, vh, vmin, and vmax where
• 1vw = 1% of the browser window width
• 1vh = 1% of the browser window height
• 1vmin = 1vw or 1vh (whichever is smaller)
• 1vmax = 1vw or 1vh (whichever is larger )
2022 Dr. Ibrahim Al-Baltah 41
Sizing Keywords

• Finally, you also can express font sizes using the following keywords:
xx-small, x-small, small, medium, large, x-large, xx-large, larger, or
smaller.
• The font size corresponding to each of these keywords is determined
by the browser.
aside {font-size: small;}
aside > h1 {font-size: larger;}

2022 Dr. Ibrahim Al-Baltah 42

Controlling Spacing and Indentation

letter-spacing: value;
word-spacing: value;
• where value is the size of space between individual letters or words.
• space between lines of text and is defined with the following line-
height property
line-height: size;
• An additional way to control text spacing is to set the indentation for
the first line of a text block by using the following text-indent property
text-indent: size;

2022 Dr. Ibrahim Al-Baltah 43

Working with Font Styles

• You can specify a different font style using the following font-style
Property font-style: type;
• where type is normal, italic, or oblique.
• To change the weight of the text, use the following font-weight
property font-weight: weight;
• Where weight values can be :
• keyword bold for boldfaced text and normal for non-boldfaced text.
• keywords bolder or lighter
• values ranging from 100 (extremely light) up to 900 (extremely heavy)
in increments of 100

2022 Dr. Ibrahim Al-Baltah 44

Working with Font Styles…
• You can apply decorative features to text through the following text-
decoration property text-decoration: type;
Where type values can be none (for no decoration), underline, overline,
or line-through.
• To control the case of the text within an element, use the following
text-transform property text-transform: type;
where type is capitalize, uppercase, lowercase, or none (to make no
changes to the text case).
• Finally, CSS supports variations of the text using the font-variant
property font-variant: type;
where type is normal (for no variation) or small-caps (small capital
letters).
2022 Dr. Ibrahim Al-Baltah 45
Aligning Text Horizontally and Vertically

• Text can be aligned horizontally or vertically within an element. To

align the text horizontally, use the following text-align property
text-align: alignment;
• where alignment is left, right, center, or justify (align the text with
both the left and the right margins).
• To vertically align the text within each line, use the vertical-align
property vertical-align: alignment;

vertical-align: 50%;
vertical-align: -100%;
2022 Dr. Ibrahim Al-Baltah 46
2022 Dr. Ibrahim Al-Baltah 47
Combining All Text Formatting in a Single Style

• You can combine most of the text and font style properties into the
following shorthand font property

• For example, the following style rule displays the element text in
italic, bold, and small capital letters using Arial or another sans-serif
font, with a font size of 1.5em and a line height of 2em:

2022 Dr. Ibrahim Al-Baltah 48

Textbook

Patrick Carey, 2021, New Perspectives on HTML 5 and CSS,

Comprehensive, 8th Edition, Cengage.

2022 Dr. Ibrahim Al-Baltah 49