Scribd
Upload
16 views23 pages

CSC336-WT Lec7 Slides

Lecture #7 of CSC336 Web Technologies covers the fundamentals of CSS, including its definition, syntax, and common properties. It explains how to add CSS through external, internal, and inline methods, as well as the differences between typefaces and fonts. Additionally, the lecture discusses the CSS box model and the concept of specificity in styling elements.

Uploaded by

hocicex411
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
16 views23 pages

CSC336-WT Lec7 Slides

Lecture #7 of CSC336 Web Technologies covers the fundamentals of CSS, including its definition, syntax, and common properties. It explains how to add CSS through external, internal, and inline methods, as well as the differences between typefaces and fonts. Additionally, the lecture discusses the CSS box model and the concept of specificity in styling elements.

Uploaded by

hocicex411
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/ 23

Lecture # 7

CSC336 Web Technologies


Credit Hours: 3(2, 1)

Course Instructor: SAIF ULLAH IJAZ


Lecturer CS Dept, CUI Vehari
MSc University of Leicester, UK
BSc COMSATS University Islamabad
CSS
CSS Introduction
What is CSS?
• CSS is the language we use to style a Web page.
▪ CSS stands for Cascading Style Sheets
▪ CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
▪ CSS saves a lot of work. It can control the layout of multiple web pages all at
once
▪ External stylesheets are stored in CSS files
CSS Syntax
• A CSS rule consists of a selector and a declaration block.
Selector Declaration

h1 {
Example
color: red;
p {
text-align: right; font-family: Arial;
font-size: 20px;
} }

Property Value
Common CSS Properties
• color
• text-align
• font-family, font-size, font-weight
• width, height
• margin, padding
• border
•...
How To Add CSS
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
Example: Inline CSS
style.html
• <h1 style="color: blue;">Hello</h1>
• <h1 style="color: red;">Hello</h1> <!-- springgreen -->
• <h1 style="color: blue; text-align: center;">Hello</h1>
• <body style="color: blue; text-align: center;">
Typeface (Font Family)
• A typeface is a distinctive design that's common to any related set of
letters, numbers and symbols.
• What’s the difference between a typeface and a font?
o the two terms are interchangeable.
o Font: A font is a particular implementation of a typeface, meaning the
typeface as rendered with a specific weight, size and style.
o Typeface: The typeface gives each character a shape and thickness that's
unique to the typeface
o Helvetica is a typeface; bold 16-point Helvetica is a font.
font: weight + size + typeface
Example: font: bold 40px sans-serif;
Typeface (Font Family)
1. Serif fonts have a small stroke at the edges of each letter. These
subtle appendages give the typeface a traditional, classy look, but
they can get lost when displayed on a screen at small sizes.
2. Sans-serif fonts have clean lines (no small strokes attached). They
create a clean modern and minimalistic look that’s well suited to
screen text, particularly at small sizes.
3. Monospace fonts - here all the letters have
the same fixed width, so skinny letters such
as i and l take up as much space as wider
letters such as m and w. They create a
mechanical look.
4. Cursive fonts are designed to resemble human
handwriting e.g. handwritten pen or brush
writing.
5. Fantasy fonts are decorative/playful fonts
Difference Between Serif and Sans-serif

• Note: On computer screens, sans-serif typeface are


considered easier to read than serif font family.
Font Selection is Important
Typeface Uses

Serif works best for headings and other text set at large sizes;

Sans-serif makes good body text

Monospace works well for code listings

Cursive best for short bits of text that require elegance or playfulness e.g. scripts

Fantasy should be used only when a special effect is required (such as being extra thick).
Example: External CSS
h1 {
color: blue;
text-align: left;
font-family: Arial, sans-serif;
font-size: 28px;
font-weight: normal;
}
CSS Box Model
• All HTML elements can be considered as boxes.
Table Border
table {
border: 1px solid black;
border-collapse: collapse;
}

td, th {
border: 1px solid black;
padding: 5px;
}
Identifying Elements
• div
• span
• id
• class
<div>
Hello, World!
</div>

div {
background-color: orange; <!-- blue -->
width: 200px; <!– 100px -->
height: 200px; <!– 400px -->
padding: 20px;
margin: 20px;
border: 3px dashed black;
}
ID, class
<body>
<h1 id="foo">Heading1</h1>
<h1 id="bar">Heading2</h1>
<h1 class="baz">Heading3</h1>
</body>
• #fo
• #bar
• .baz
Example leading to Specificity
h1 {
color: red;
}

#foo {
color: blue;

}
Specificity (Precedence)
1. inline
2. id
3. class
4. type
Specificity
<div id="foo">
Hello!
</div>

div {
Hello!
color: blue;
}
Specificity
<div id="foo">
Hello!
</div>

div { Hello!
color: blue;
}
#foo {
color: red;
}
Specificity
<div id="foo">
Hello!
</div>

#foo { Hello!
color: red;
}
div {
color: blue;
}
Lesson Learning Outcome (LLOs)
• CSS rule
• Common CSS Properties
• Inline Vs Internal Vs External CSS
• Typeface Vs Font
• CSS Box Model
• Specificity

You might also like