Thanks to visit codestin.com
Credit goes to www.scribd.com

0% found this document useful (0 votes)
12 views30 pages

Coding & Tech Lesson 22 Slides

The document provides an introduction to Cascading Style Sheets (CSS), covering its definition, characteristics, and common selectors. It explains the use of pseudo-classes for enhancing user interface and discusses different approaches to styling, including external, internal, and inline methods. Additionally, it addresses font management, including absolute and relative sizing, and the importance of web-safe font stacks.
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
0% found this document useful (0 votes)
12 views30 pages

Coding & Tech Lesson 22 Slides

The document provides an introduction to Cascading Style Sheets (CSS), covering its definition, characteristics, and common selectors. It explains the use of pseudo-classes for enhancing user interface and discusses different approaches to styling, including external, internal, and inline methods. Additionally, it addresses font management, including absolute and relative sizing, and the importance of web-safe font stacks.
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/ 30

Diploma in

Coding and Technology

Lesson: Introduction to CSS


What is CSS?
Working with pseudo-classes
Approaches to styling
Working with fonts

Objectives
DID YOU
KNOW?

“CSS was first proposed by


Håkon Wium Lie on October
10, 1994.” - Wikipedia
Loading…
CSS defined
Cascading Style Sheets (CSS) is a style
sheet language used for describing the
presentation of a document written in
a markup language.
Characteristics
of CSS

Allows computing devices to Enables the separation of


Improves content accessibility.
display web pages differently. presentation and content.

Uses selectors in order to Declaration blocks are used to


target HTML elements. specify changes.
Defining a CSS
declaration
block
• Selector
• Declaration block
• Attribute
• Value
Common selectors
Element/Tag Example Details
.class .container Selects all elements with a class name of container
#id #student-number Selects an element with a uniquely identifiable ID
i.e student 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
Loading…
Pseudo-classes
Used to define a special state of
an element. Elements, much
like most objects can exist in
different states.
Enables Conveys
improved meaning to
navigation for selected
end-user. elements.
Why use
pseudo-
classes?
Enhances user
interface.
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
Loading…
Approaches to styling

External Internal Inline


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.
Internal styling
Embedded between the <head>
tags of an HTML document. Styles
all elements within a single
document. Uses the <style> tag.
Inline styling
Embeds styling within HTML
elements, usually in the same
instance in which elements are
created.
Commenting in
CSS
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*/
Linking the style sheet

In order to link an externally created


style sheet, use the <link> tag
between the <head> within the HTML
document.

Specifies the relationship between


the current document and the
linked document.
Loading…
Working with fonts
Typography is the art of designing the
appearance of characters and letters
on a page. To alter the font of text, use
the “font-family” attribute.
Web safe font
stacks

(Source: ComD 2018)


Scaling fonts Absolute size Relative size
Scaling fonts

Absolute
• Sets the text to a specified size.
• Does not allow a user to change the
text size in all browsers.
• Useful when the physical size of the
output is known.
Scaling fonts

Relative
• Sets the size relative to surrounding
elements.
• Allows a user to change the text size in
browsers.
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.
Relative fonts
sizes
• Much like em, using percent %
as a unit is also highly
responsive approach to
developing content, it’s much
easier on your visitors to use
scalable text that can display
on any device.

• 1em = 12pt = 16px = 100%.


Let’s code!

You might also like