Diploma in Coding and Technology
Introduction to
CSS
2
Contents
3 What is CSS?
4 Working with pseudo-classes
6 Approaches to styling
7 Working with fonts
8 Source code
CODING & TECHNOLOGY
3
Lesson outcomes
In this lesson, you will be introduced to CSS as a styling language. This will give you an idea of how
we go about styling our bare bone website to something more appealing to end users. CSS is the
most popular language used when it comes to styling our website and it is capable of dramatically
improving the usability of a website. So stay tuned, because things are going to become a lot more.
.colourful.
What is CSS?
CSS defined
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language. Although most often used to set the visual style of web pages
and user interfaces written in HTML, the language can be used to rendering various other media
formats.
Characteristics of CSS
• Allows computing devices to display web pages differently depending on the screen size or
viewing device.
• Enable the separation of presentation and content, including aspects such as the layout, colors,
and fonts.
• Improves content accessibility.
• Uses selectors in order to target HTML elements for visual manipulation.
• Declaration blocks are used to specify changes in element attributes
Defining a CSS declaration block
CODING & TECHNOLOGY
4
• Selector - Points to the HTML element you want to style.
• Declaration block - Contains one or more declarations separated by semicolons.
• Attribute - The attribute or property of the HTML element to you want to change.
• Value - The value the specified attribute to be changed.
Common selectors
Element/Tag Example Details
.class .container Selects all elements with a class name of container
#id #student- Selects an element with a uniquely identifiable ID i.e student number
number
element h1 Selects all <h1> elements
element,element div, p Selects all <div> elements and all <p> elements
element element nav li Selects all <li> elements inside <nav> elements
element+element div + h2 Selects all <h2> elements that are placed immediately after <div>
elements
Working with pseudo-classes
Pseudo-classes
Used to define a special state of an element. Elements, much like most objects can exist in different
states.
Why use pseudo-classes?
• Enables improved navigation for end-user.
• Conveys meaning to selected elements through interactive elements
• Enhances user interface.
CODING & TECHNOLOGY
5
Pseudo-class model
Common pseudo-classes
Element/Tag Example Details
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:focus input:focus Selects the input element which has focus
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:first-child p:first-child Selects every <p> element that is the first child
of its parent
:invalid input:invalid Selects all input elements with an invalid value
CODING & TECHNOLOGY
6
Approaches to styling
External styling
Considered best practice for most web development projects. Allows developers to change the styling
of an entire website from a single style sheet.
CODING & TECHNOLOGY
7
Internal styling
Embedded between the <head> tags of an HTML document. Styles all elements within a single
document. Uses the <style> tag.
CODING & TECHNOLOGY
8
Inline styling
Embeds styling within HTML elements, usually in the same instance in which elements are created.
Commenting in CSS
CODING & TECHNOLOGY
9
Developers usually insert comments to specify the purpose of the style sheet or to include author
details.
To comment in CSS, we use the following notation:
/*comment*/
CODING & TECHNOLOGY
10
Linking the style sheet
In order to link an externally created style sheet, use the <link> tag between the <head> within the HTML
document.
Working with fonts
Fonts in CSS
Typography is the art of designing the appearance of characters and letters on a page. Text characters
are based on fonts that define the style and appearance of each character in the alphabet. By default,
most websites use Times New Roman. This can be overridden using CSS. To alter the font of text, use
the font-family property.
Scaling fonts
Absolute Relative
Sets the text to a specified size. Sets the size relative to surrounding elements.
Does not allow a user to change the text size in all Allows a user to change the text size in browsers.
browsers.
Useful when the physical size of the output is
known.
CODING & TECHNOLOGY
11
Absolute fonts sizes
Absolute font sizes generally use fixed values, such as pixels (px), to specify text sizes.
Relative fonts sizes
Setting font sizes using the em size enables users to resize the text and is often a preferred alternative
to px. 1em is equal to the default text size of browsers, 16px.
CODING & TECHNOLOGY
12
Source code
index.html
<html>
<title> Cars </title>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<style>
/* #supra {
border-color: blue;
width: 450px;
#m2 {
border-color: orange;
width: 450px;
}
.headings {
font-style: italic;
}
.prices {
font-style: italic;
} */
</style>
</head>
<body>
<header>
<h1>Cars</h1>
<div>
<!--- THIS IS MY NAVIGATION SYSTEM WITH 4 LINKS-->
<nav>
<ul>
<li> <a href="index.html">Cars</a> </li>
<li><a href="drag-race.html">View race</a></li>
<li><a href="login-signup-form.html">Log out</a></li>
</ul>
</nav>
</div>
<hr width="1000px">
</header>
<section>
<h2 class="headings">Toyota GR Supra</h2>
<img border="5px" id="supra" src="gr-supra-night.jpg" width="640px">
<p class="prices">Price: $51,945</p>
CODING & TECHNOLOGY
13
<table border="1px">
<tr>
<th>Information</th>
<th>Details</th>
</tr>
<tr>
<td>Drivetrain</td>
<td>front-engine, rear-wheel-drive</td>
</tr>
<tr>
<td>Engine type</td>
<td>turbocharged, inline-6</td>
</tr>
<tr>
<td>Power</td>
<td>382 hp @ 6500 rpm</td>
</tr>
<tr>
<td>Torque</td>
<td>368 lb-ft @ 1800 rpm</td>
</tr>
<tr>
<td>0 - 60mph</td>
<td>3.8 sec</td>
</tr>
<tr>
<td>Transmission</td>
<td>8-speed automatic</td>
</tr>
<tr>
<td>Fuel Economy</td>
<td>Combined/city/highway: 25/22/30 mpg</td>
</tr>
</table>
</section>
<br>
<hr width="1000px">
<section>
<h2 class="headings">BMW M2 Competition</h2>
<img border="5px" id="m2" src="bmw-m2.jpg" width="640px">
<p class="prices">Price: $59,895</p>
<table border="1px">
<tr>
<th>Information</th>
<th>Details</th>
</tr>
<tr>
<td>Drivetrain</td>
<td>front-engine, rear-wheel-drive</td>
</tr>
<tr>
<td>Engine type</td>
<td>front-engine, rear-wheel-drive</td>
CODING & TECHNOLOGY
14
</tr>
<tr>
<td>Power</td>
<td>405 hp @ 7000 rpm</td>
</tr>
<tr>
<td>Torque</td>
<td>406 lb-ft @ 2350 rpm</td>
</tr>
<tr>
<td>0 - 60mph</td>
<td>3.9 sec</td>
</tr>
<tr>
<td>Transmission</td>
<td>6-speed manual</td>
</tr>
<tr>
<td>Fuel Economy</td>
<td>Combined/city/highway: 19/17/23 mpg</td>
</tr>
</table>
</section>
<br>
<hr width="1000px">
</body>
</html>
login-signup-form.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Login</h2>
<li> <a href="index.html">Cars</a> </li>
<li><a href="drag-race.html">View race</a></li>
<li><a href="login-signup-form.html">Log out</a></li>
<form id="my-form" action="">
<p>Username</p>
<input type="text" name="user-name">
<br>
<p>Password</p>
<input type="password" name="pwd">
<br>
<br>
CODING & TECHNOLOGY
15
<input id="submit-btn" type="submit" value="Login">
<br>
<a href="#">Sign up</a>
<br>
<a href="#">Forgot password?</a>
</form>
</body>
</html>
drag-race.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>View race</title>
</head>
<body>
<h1>View race</h1>
<li> <a href="index.html">Cars</a> </li>
<li><a href="drag-race.html">View race</a></li>
<li><a href="login-signup-form.html">Log out</a></li>
<hr width="1000px">
<br>
<video src="m2-supra-drag-race.mp4" controls width="720px">
</video>
</body>
</html>
stylesheet.css
#supra {
border-color: blue;
width: 450px;
#supra:hover {
width: 720px;
border-radius: 10px;
border-color: #64e764;
}
#m2 {
border-color: orange;
width: 450px;
}
CODING & TECHNOLOGY
16
#m2:hover {
width: 720px;
border-radius: 10px;
border-color: #64e764;
}
.headings {
font-style: italic;
}
.prices {
font-style: italic;
}
a:visited {
color: orange;
}
h1 {
font-family: arial black;
}
#submit-btn:hover {
background-color: orange;
color: white;
}
input:focus{
background-color: #64e764;
}
CODING & TECHNOLOGY
