CSS
Cascading Style
Sheet
Lab 2 August 9, 2023
What CSS does
How CSS works
Rules, properties, and values
Color, Fonts, Images
CSS
▪ Styles define how to display HTML elements
▪ Cascading Style Sheets (CSS) is a simple mechanism for
adding style (e.g., fonts, colors, spacing) to Web documents.
▪ CSS works by associating rules with HTML elements.
▪ These rules govern how the content of the specified elements
should be displayed.
▪ The key to understanding how CSS works is to imagine that
there is an invisible box around every HTML element.
▪ The basic HTML page can be seen in a different way by adding
outlines to each of the elements through CSS.
▪ Then, you can see how CSS will treat each element as if it lives
inside its own box. 3
CSS Syntax
▪ A CSS rule has two main parts: a selector, and one
or more declarations:
▪ The Selector indicates the element to which the rule is applied.
▪ The Declaration determines the property values of a selector.
▪ The Property specifies a characteristic, such as color, font-
family, position,
. and is followed by a colon (:).
▪ The Value expresses specification of a property, such as red for
color, arial for font family, 12 pt for font-size, and is followed by
a semicolon (;). 4
CSS Rule
Selector Declaration Block
body {
font-family: “Tahoma”;
color: black;
background: white;
margin: 8px;
}
Attribute Name Value
Slide
5
Try It Yourself
<html>
<head> <body>
<style type="text/css"> <h1> This heading is styled with CSS. </h1>
p{color:red; <marquee> Hello World !</marquee>
text-align:center;}
<marquee direction="down"> Hi!</marquee>
h1{font-family:
<p><marquee BEHAVIOR="ALTERNATE"
“Tahoma”;
loop="4" scrollamount="100px"
color: pink;
scrolldelay=“400"> Hello How are you !
background: black; </marquee></p>
margin: 8px;}
<p><marquee scrolldelay=“5"> Nice to see
</style> you ! </marquee></p>
</head>
<p>This paragraph is styled with CSS.</p>
<marquee> Bye-Bye ! </marquee>
</body></html>
6
CSS - How To...
▪ Three ways to insert CSS:
▪ External style sheet
▪ Internal style sheet
▪ Inline style
7
Adding Styles to HTML
<head> External style sheet
...
<link rel="stylesheet" type="text/css"
href="myStyles.css" />
</head>
<head>
...
Internal style sheet
<style type="text/css">
body {
font-family: Tahoma, Arial, sans-serif;
...
}
</style>
</head>
<body>
...
Inline style
<p style="color:sienna;margin-left:20px">This is a paragraph.</p> ...
</body>
8
External Style Sheet (1/4)
▪ Can be written in any text editor.
▪ The file should not contain any html tags.
▪ Style sheet should be saved with a .css extension.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
• Each page must link to the style sheet using the <link> tag.
– It is an empty element (meaning it does not need a closing tag), has
three attributes and it lives inside the <head> element.
– href: the path to the CSS file
– Type: the type of document being linked to (value should be text/css)
– Rel: the relationship between the HTML page and the file it is linked
9
to. The value should be stylesheet when linking to a CSS file.
External Style Sheet (2/4)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
▪ An HTML page can use more than one CSS style sheet.
▪ To do this it could have a <link> element for every CSS
file it uses.
▪ For example, some authors use one CSS file to control
the presentation (such as fonts and colors) and a
second to control the layout.
10
External Style Sheet (3/4)
CSS: mystyle.css HTML:
body { <head>
font-family: Tahoma, Arial, sans- <title>Using External CSS</title>
serif; <link rel="stylesheet" type="text/css"
font-size: 13px; href="mystyle.css" /> </head>
color: black; <body>
background: white; <h1>First Section Heading</h1>
margin: 8px; <p> This is first paragraph. </p>
} <div class="shaded">
h1 { <h1>Another Section Heading</h1>
font-size: 19px; <p>Another paragraph. </p> </div>
margin-top: 15px; </body>
margin-bottom: 5px;
border-bottom: 1px solid black
}
.shaded {
background: #d0d0ff;
}
11
External Style Sheets saved in external .css files
External Style Sheet (4/4)
▪ External Style Sheets can save a lot of work.
▪ When building a site with more than one page, you
should use an external CSS style sheet.
▪ This:
▪ Allows all pages to use the same style rules (rather than
repeating them in each page).
▪ Keeps the content separate from how the page looks.
▪ Means you can change the styles used across all pages
by altering just one file (rather than each individual page).
12
Internal Style Sheet
▪ An internal <html>
<head>
style sheet
<title>Using Internal CSS</title>
should be used <style type="text/css">
when a single hr {color: sienna;}
document has p {margin-left: 200px;font-size: 19px;}
a unique style. body {background-color: pink;}
</style>
▪ Internal styles </head>
define in the <body>
head section of <p> xxxxxxxxxxxx</p>
<hr>
an HTML page, <p> yyyyyyyyyyy</p>
by using the </body>
<style> tag. </html>
13
Inline Styles
▪ An inline style loses many of the advantages of
style sheets by mixing content with presentation.
▪ The style attribute can contain any CSS property.
<p style="color:sienna; margin-left:20px">This is a paragraph.</p>
14
CSS Selectors (1/2)
▪ There are many different types of CSS selector that allow you to
target rules to specific elements in an HTML document.
15
CSS Selectors (2/2)
▪ There are many different types of CSS selector that allow you to
target rules to specific elements in an HTML document.
16
CSS Id and Class
▪ CSS allows us to specify our own selectors:
▪ Id selector:
▪ It is used to specify a style for a single, unique element.
▪ It uses the id attribute of the HTML element, and is defined
with a "#".
▪ The style rule in the next slide will be applied to the element
with id=“para1”.
▪ The class selector:
▪ It is used to specify a style for a group of elements.
▪ This allows you to set a particular style for many HTML
elements with the same class.
▪ It uses the HTML class attribute, and is defined with a “.” 17
The id Selector Example
<html>
<head>
<style type="text/css">
#para1
{font-family:"Tahoma"; font-size:16px; text-align:left; color:red;}
#para2
{font-family:"Arial"; font-size:24px; text-align:center; color:blue;}
</style> </head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
<p id="para2"> This paragraph is affected by second style.</p>
</body>
18
</html>
The class Selector: Example 1
<head><style type="text/css">
.class1 { text-align:center; text-decoration:underline; }
.class1a { text-align:center; text-decoration:underline;letter-spacing:4px; }
.class2 { text-align:right; color:gray; text-decoration:blink; text-
transform:uppercase; }
.class3 { color:cyan; text-decoration:overline; text-transform:uppercase;
direction:rtl; }
</style></head>
<body>
<h1 class="class1">center-aligned heading1 by class1</h1>
<h1 class="class1a">center-aligned heading1 by class1a</h1>
<p class="class1">center-aligned paragraph by class1.</p>
<p class="class2">paragraph by class2.</p>
<p class="class3">This is a paragraph to show change in direction.</p>
19
</body></html>
The class Selector: Example 2
<head><style type="text/css">
h1.class1 {text-align:center; text-decoration:underline; color:blue }
p.class2 {text-align:right; color:pink; text-decoration:blink; text-
transform:uppercase; }
.class3 {color:red; text-decoration:line-through; text-transform:uppercase;
direction:rtl; }
</style></head>
<body>
<h1 class="class1">center-aligned heading1 by class1</h1>
<h2 class="class2">heading2 not working by class2</h2>
<h3 class="class3">center-aligned heading3 by class3</h3>
<p class="class1">paragraph not working by class1.</p>
<p class="class2">paragraph by class2.</p>
<p class="class3">paragraph working with class3.</p> 20
</body></html>
Difference between id and class
▪ Class selector - a name preceded by a full stop (.)
▪ ID selector - a name preceded by a hash character (#).
▪ ID's are unique: Each element can have only one ID and Each page
can have only one element with that ID
▪ ID selector - can be called only once in a document,
▪ Class selector - can be called multiple times in a document.
▪ ID can be called by Javascript's getElementByID function.
▪ No hard rule on use. Use class as much as possible for max flexibility
▪ Class and ID names are both case sensitive.
▪ Incorrect behavior - be careful when using IDs
▪ Some browsers allow more than one element with the same ID, thus
making it look like a synonym for class - hence the confusion. 21
How CSS Rules Cascade (1/2)
▪ Precedence: if two/more rules applied to the same element
* {font-family: Arial, Verdana, sans-serif;}
h1 {font-family: "Courier New", monospace;}
i {color: green;} <h1>Potatoes</h1> HTML
i {color: red;} <p id="intro">There are
b {color: pink;} <i>dozens</i> of different
p b {color: blue !important;} CSS <b>potato</b> varieties.</p>
p b {color: violet;} <p>They are usually described
p#intro {font-size: 100%;} as early, second early
p {font-size: 75%;} and maincrop potatoes.</p>
• If the two selectors are identical, the latter of the two will take precedence.
– Here you can see the second i selector takes precedence over the first.
• If one selector is more specific than the others, the more specific rule will
take precedence over more general ones.
– Here you can see that h1 is more specific than *, p b is more specific than p,
22
p#intro is more specific than p
How CSS Rules Cascade (2/2)
▪ Important
▪ You can add !important after any property value to
indicate that it should be considered more important
than other rules that apply to the same element.
▪ Understanding how CSS rules cascade means you
can write simpler style sheets because you can
create generic rules that apply to most elements and
then override the properties on individual elements
that need to appear differently.
23
CSS Comments
▪ A CSS comment begins with "/*", and ends with "*/"
like this:
/* this is for color codes*/
24
CSS Foreground and Background
• CSS Foreground Color
h1 { color: DarkCyan;}
• CSS background
Property Description
background Sets all the background properties in one declaration
background- Sets whether a background image is fixed or scrolls
attachment 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 25
Example (CSS background color)
<html>
<head>
<style type="text/css">
h1 {background-color:#6495ed; }
p { background-color:#e0ffff; }
div { background-color:#b0c4de; }
</style>
</head> Add
color:red;
<body>
<h1>CSS background-color example!</h1>
<div> This is a text inside a div element.
<p>This paragraph has it's own background color.</p>
We are still in the div element.
</div>
26
</body> </html>
Understanding Color
▪ RGB (you can specify separately opacity: 0.5;)
▪ RGBA
▪ HSL
▪ HSLA
▪ Hue: expressed as an angle (b/w 0 and 360 degrees).
▪ Saturation: expressed as a percentage.
▪ Lightness: expressed as a percentage with 0% being
white, 50% being normal, and 100% being black.
▪ Alpha: expressed as a number between 0 and 1.0 .
▪ For example, 0.5 represents 50% transparency, and 0.75
represents 75% transparency.
27
Color Example (1/2) : head
<html> This example shows a pH scale to
<head> demonstrate the different ways that colors
<title>Color</title> can be specified using CSS (using color
<style type="text/css"> names, hex codes, RGB, and HSL).
body {background-color: silver;
p.zero {background-color: rgb(238,62,128);}
color: white;
p.one {background-color: rgb(244,90,139);}
padding: 20px;
p.two {background-color: rgb(243,106,152);}
font-family: Arial, Verdana, sans-serif;} p.three {background-color: rgb(244,123,166);}
h1 {background-color: #ffffff; p.four {background-color: rgb(245,140,178);}
background-color: p.five {background-color: rgb(246,159,192);}
hsla(0,100%,100%,0.5); p.six {background-color: rgb(245,176,204);}
color: #64645A; p.seven {background-color: rgb(0,187,136);}
padding: inherit;} p.eight {background-color: rgb(140,202,242);}
p {padding: 5px; p.nine {background-color: rgb(114,193,240);}
Cont… p.ten {background-color: rgb(84,182,237);}
margin: 0px;}
p.eleven {background-color: rgb(48,170,233);}
p.twelve {background-color: rgb(0,160,230);}
The example also uses a property called
p.thirteen {background-color: rgb(0,149,226);}
margin to decrease the gap between the p.fourteen {background-color: rgb(0,136,221);}
paragraph boxes, and a property called </style> </head>
padding to create a gap between the
28
edge of the boxes and the text within them.
Color Example (1/2) : body
<body>
<h1>pH Scale</h1>
<p class="fourteen">14.0 VERY
ALKALINE</p>
<p class="thirteen">13.0</p>
<p class="twelve">12.0</p>
<p class="eleven">11.0</p>
<p class="ten">10.0</p>
<p class="nine">9.0</p>
<p class="eight">8.0</p>
<p class="seven">7.0 NEUTRAL</p>
<p class="six">6.0</p>
<p class="five">5.0</p>
<p class="four">4.0</p>
<p class="three">3.0</p>
<p class="two">2.0</p>
<p class="one">1.0</p>
<p class="zero">0.0 VERY ACID</p>
</body>
</html> 29
background-image
<html>
<head>
<style type="text/css">
h1{background-color:yellow;}
p {background-color:#e0ffff;}
body {background-image:url('2.jpg');}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p> Hello World </p>
</body>
</html>
30
background-image
<html> <head>
<style type="text/css">
h1{background-color:yellow;}
p {background-color:#e0ffff;}
body {background-image:url('2.jpg'); background-repeat:
repeat-x;}
</style>
</head> background-repeat:repeat-y;
<body>
<h1>Hello World!</h1>
<p> Hello World </p>
</body> </html> 31
background-image
▪ repeat
▪ The background image is repeated both horizontally and vertically (the default way it
is shown if the backgroundrepeat property isn't used).
▪ repeat-x
▪ The image is repeated horizontally only.
▪ repeat-y
▪ The image is repeated vertically only.
▪ no-repeat
▪ The image is only shown once.
▪ background-attachment property specifies whether a background image
should stay in one position or move as the user scrolls up and down the page:
▪ fixed
▪ The background image stays in the same position on the page.
▪ scroll
▪ The background image moves up and down as the user scrolls up and down the page. 32
background-image position
<html>
<head>
<style type="text/css">
h1{background-color:yellow}
p {background-color:#e0ffff;}
body {background-image:url('2.jpg');
background-repeat:no-repeat;
background-position:center top}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p> Hello world </p>
</body>
</html> 33
Text
▪ Text
▪ Size and typeface of text
▪ Bold, italics, capitals, underlines
▪ Spacing between lines, words, and letters
▪ Properties to control the appearance of text can be split into two groups:
▪ Those that directly affect the font & its appearance (including the typeface,
whether it is regular/bold or italic, and the size of the text)
▪ Those that would have the same effect on text no matter what font you were
using (including the color of text and the spacing between words and letters)
▪ The formatting of your text can have a significant effect on how readable
your pages are. You are supposed to follow some design tips on how to
display your type.
34
Typeface Terminology (1/3)
▪ Serif (Georgia, Times New Roman)
▪ Serif fonts have extra details on the ends of the main strokes of the letters. These details are
known as serifs.
▪ In print, serif fonts were traditionally used for long passages of text because they were
considered easier to read.
▪ Sans-Serif (Arial, Verdana)
▪ Sans-serif fonts have straight ends to letters, and therefore have a much cleaner design.
▪ Screens have a lower resolution than print. So, if the text is small, sans-serif fonts can be
clearer to read.
▪ MonoSpace (Courier, Courier New)
▪ Every letter in a monospace (or fixed-width) font is the same width. (Non-monospace fonts
have different widths.)
▪ Monospace fonts are commonly used for code because they align nicely, making the text
easier to follow. 35
Typeface Terminology (2/3)
▪ Cursive (Comic Sans MS, Monotype Corsiva)
▪ Cursive fonts either have joining strokes or other cursive characteristics, such
as handwriting styles.
▪ Fantasy (Impact, Haettenschweiler)
▪ Fantasy fonts are usually decorative fonts and are often used for titles. They're
not designed for long bodies of text.
▪ Browsers are supposed to support at least one typeface from each of
these groups.
▪ It is common to add the generic font name after your preferred choice of
typefaces. For ex: font-family: Georgia, Times, serif;
▪ When choosing a typeface, it is important to understand that a browser will
usually only display it if it's installed on that user's computer.
▪ Sites often use a small set of typefaces that are installed on most computers.
▪ It is possible to specify more than one typeface and create an order of
preference (in case the user does not have your first choice of typeface
installed). font stack 36
Typeface Terminology (3/3)
▪ The font weight not only adds emphasis but can also affect the amount
of white space and contrast on a page.
▪ Italic fonts have a cursive aspect to some of the lettering. Oblique font
styles take the normal style and put it on an angle.
▪ In condensed (or narrow) versions of the font, letters are thinner and
closer together. In expanded versions they are thicker and further apart.
37
CSS Font
Property Description
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
38
CSS Font - Example
<!DOCTYPE html> <body>
<html> <h1>Briards</h1>
<head> <p class="credits">by Ivy Duckett</p>
<title>Font Family</title> <p class="intro">
The <a class="breed"
<style type="text/css">
href="http://en.wikipedia.org/wiki/
body {font-family: Georgia, Times, Briard">briard</a>,
serif; font-size: 12px;} or berger de brie, is a large breed of
h1, h2 {font-family: Arial, Verdana, dog traditionally used as a herder and
guardian of sheep...</p>
sans-serif; font-size: 200%;}
</body> </html>
.credits {font-family: "Courier New",
Courier, monospace; • font-
You can specify a list of fonts separated by
size: 1.3em;} commas so that, if the user does not have your
</style> </head> first choice of typeface installed, the browser can
try to use an alternative font from the list.
39
• End with a generic font name for that type of font
CSS Font - Example
<!DOCTYPE html> <body>
<html> <h1>Briards</h1>
<head> <p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed"
<title>Font Family</title>
href="http://en.wikipedia.org/wiki/
<style type="text/css">
Briard">briard</a>, or berger de brie,
body {font-family: Georgia, Times, is a large breed of dog traditionally used
serif; font-size: 12px;} as a herder and guardian of sheep...</p>
</body>
h1, h2 {font-family: Arial, Verdana,
</html>
sans-serif; font-size:
200%;} • If a font name is made up of more than
one word, it should be put in double
.credits {font-family: "Courier
quotes.
New", Courier, monospace;
font-size: 1.3em;} • Designers suggest pages usually look
better if they use no more than three
</style> </head> typefaces on a page. 40
CSS Font - Example
<!DOCTYPE html> <body>
<h1>Briards</h1>
<html>
<p class="credits">by Ivy Duckett</p>
<head>
<p class="intro">The <a class="breed"
<title>Font Family</title> href="http://en.wikipedia.org/wiki/
<style type="text/css"> Briard">briard</a>, or berger de brie,
body {font-family: Georgia, Times, is a large breed of dog traditionally used
as a herder and guardian of sheep...</p>
serif; font-size: 12px;}
</body>
h1, h2 {font-family: Arial, Verdana, </html>
sans-serif; font-size: 200%;}
.credits {font-family: "Courier New",
Courier, monospace; font-size: • Several ways to specify
1.3em;} the size of a font.
</style> </head>
41
CSS Font Size
▪ Pixels (no. of pixels followed by the letters px)
▪ Pixels allow web designers very precise control over how much
space their text takes up.
▪ Percentages
▪ The default size of text in browsers is 16px. So a size of 75%
would be the equivalent of 12px, and 200% would be 32px.
▪ If you create a rule to make all text inside the <body> element
to be 75% of the default size (to make it 12px), and then
specify another rule that indicates the content of an element
inside the <body> element should be 75% size, it will be 9px
(75% of the 12px font size).
▪ ems
▪ An em is equivalent to the width of a letter m. 42
More Font Choice - @ font-face
▪ @ font-face allows you to use a font, even if it is not
installed on the computer of the person browsing, by
allowing you to specify a path to a copy of the font, which will
be downloaded if it is not on the user's machine.
▪ Because this technique allows a version of the font to be
downloaded to the user's computer, it is important that the
license for the font permits it to be used in this way.
name of the font to be used as
@font-face { a value of the font-family
font-family: 'ChunkFiveRegular'; property in the rest of the style
src: url('fonts/chunkfive.eot');} sheet
h1, h2 {
font-family: ChunkFiveRegular, Georgia,
serif;}
specifies the format that the font is
specifies the path to the font supplied in (eot, woff, ttf/otf, svg)
43
@ font-face - more
▪ In order for this technique to work in all browsers, you will probably need to
specify paths to a few different versions of the font.
▪ Many typeface makers do not allow you to use their fonts in this way, but
there are open source fonts you can use freely. See
www.fontsquirrel.com, www.fontex.org, www.openfontlibrary.org
▪ When looking at fonts on these sites, it is still important to check the font's
license agreement because some fonts are only free for personal use (that
is, not for use on commercial websites).
▪ Some sites that give you access to use commercial fonts, because they
negotiated permission to let their customers use these fonts for a fee:
www.typekit.com, www.kernest.com, www.fontspring.com
▪ Google also provides open source fonts. Rather than adding the @ font-
face rule to your own style sheet, you link to a CSS file and font files on
their servers: www.google.com/webfonts
44
Assignment 2
▪ Use CSS and update the page designed by you in
Assignment 1
45
References
▪ W3schools.com
▪ Jon Duckett, HTML & CSS: Design and Build Websites, John
Wiley & Sons, Inc. 2011.
46
8/9/2023
