SE321
Lecture 3: Cascading
Style Sheets (CSS)
SK. Fazlee Rabby
Lecturer
Department of Software Engineering
Daffodil International University
What is CSS?
CSS: Cascading Style Sheets
- Describes the appearance and layout of a web page
- Composed of CSS rules, which define sets of styles
A CSS file is composed of style rules:
selector: Specifies the HTML
element(s) to style.
property: The name of the CSS
style.
value: The value for the CSS style.
Saved in a filename.css file
How To Add CSS to
There are three ways to add HTML
CSS to our HTML file.
1. Inline CSS: An inline style may be used to apply a unique style for
a single element. To use inline styles, add the style attribute to the
relevant element. The style attribute can contain any CSS property.
How To Add CSS to
2. Internal CSS: An internal HTML
style sheet may be used if
one single HTML page has a
unique style. The internal
style is defined inside the
<style> element, inside the
head section.
How To Add CSS to
3. HTML
External CSS: With an external style sheet, you can change the look of
an entire website by changing just one file! Each HTML page must
include a reference to the external style sheet file inside the <link>
element, inside the head section.
Index.html
mystyle.css
Common CSS
Properties
TEXT PROPERTIES
Property Description Values
color Sets the color of a text RGB, hex, keyword
text-align Aligns the text in an element left, right, center, justify
text-decoration Adds decoration to text none, underline, overline, line-through
text-indent Indents the first line of text in an element length, %
text-transform Controls the letters in an element none, capitalize, uppercase, lowercase
line-height Sets the distance between lines normal, number, length, %
letter-spacing Increase or decrease the space between normal, length
characters
Common CSS
Properties
LIST PROPERTIES
Property Description Values
list-style Sets all the properties for a list in one list-style-type, list-style-position, list-
declaration style-image, inherit
list-style-image Specifies an image as the list-item URL, none, inherit
marker
list-style-position Specifies where to place the list-item inside, outside, inherit
marker
list-style-type Specifies the type of list-item marker none, disc, circle, square, decimal,
decimal-leading-zero,
armenian, georgian, lower-alpha, upper-
alpha, lower-greek,
lower-latin, upper-latin, lower-roman,
upper-roman, inherit
Common CSS
Property
Properties
Description Values
BORDER PROPERTIES
border Sets all the border properties in one border-width, border-style, border-color
declaration
border-width Sets the width of the four borders thin, medium, thick, length, inherit
border-style Sets the style of the four borders none, hidden, dotted, dashed, solid,
double, groove, ridge, inset, outset,
inherit
border-color Sets the color of the four borders color_name, hex_number,
rgb_number, transparent, inherit
border-top Sets all the top border properties in one border-top-width, border-top-style,
declaration border-top-color
border-top-style Sets the style of the top border border-style
border-radius specify the border-radius to make length
rounded corners
Common CSS
Properties
Property Description Values
FONT PROPERTIES
font Sets all the font properties in one font-style, font-variant, font-weight, font-
declaration size/line-height, font-family, caption, icon,
menu, message-box, small-caption, status-
bar, inherit
font-family Specifies the font family for text family-name, generic-family, inherit
font-size Specifies the font size of text xx-small, x-small, small, medium, large, x-
large, xx-large, smaller, larger, length,
%, inherit
font-style Specifies the font style for text normal, italic, oblique, inherit
font-weight Specifies the weight of a font normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900,
inherit
Careful, many of these are not supported!
Have you heard of <div> and
<span>?
What are they?
Two generic tags with no intended purpose or style:
<div>: a generic block element
<span>: a generic inline element
<span> in Action
We can use as a generic inline HTML container
Multiple Generic Containers
But won't we often want multiple generic containers?
How do we distinguish two generic containers?
In other words, how do we select a subset of elements
instead of all elements on the page?
Classes and Ids
Class and Id
class and id are special HTML attributes that can be
used on any HTML element
class: Used on 1 or more elements; identifies a
collection of elements
id: Used on exactly 1 element per page; identifies
one unique element
Can apply multiple classes by space-separating them:
<span class="hw new">HW1</span>
Class and Id
There are 3 basic types of CSS selectors:
Element p All elements
selector
ID selector #abc element with id="abc"
Class selector .bcd elements with
class=“bcd"
Class and Id
<h1 id="title">Homework</h1>
<em class="hw">HW0</em> is due Friday.<br/>
<em class="hw">HW1</em> goes out
Monday.<br/>
<em>All homework due at 11:59pm.</em>
.hw {
color: hotpink;
}
#title {
color: purple;
}
Other Selectors
element.className
Syntax Example Example Described
element.classname p.abc <p> elements with abc class
Other Selectors
Descendent Selector
Syntax Example Example Described
selector selector div strong <strong> elements that are
descendants of a <div>
Note: The element does
.abc p <p> elements that are
not have to be a direct child.
The descendent may be descendants of an element with
nested many layers in. class=“abc”
Other Selectors
Descendent Selector
Instead of applying a class to several adjacent elements,
wrap the group in a <div> container and style the
contents via descendent selectors.
Other Selectors
Multiple Selectors
Syntax Example Example Described
h2, div <h2> elements and <div>s
selector, selector <h1> elements and all other
.abc, h1
elements with class=“abc”
Selector Summary
What HTML Elements Can I Use?
Question: Instead of <span
class="highlight"></span>, can I create a
<highlight> element?
Does this eve
work?
What HTML Elements Can I Use?
Answer: This will render perfectly fine.
But you shouldn't do this!
It is non-standard behavior.
Wait !! But Why?
What is "standard" HTML?
Why does invalid HTML/CSS still work sometimes?
If my Java code is wrong, I get a compiler error… If
my HTML or CSS is wrong, why don't I get an error?
Why does it matter that I follow "standard" HTML?
A Brief History of HTML
1989: World Wide Web created
(WWW: web pages and the protocol in which they are served
HTTP/HTTPS)
1994: World Wide Web Consortium created
- "W3C": Goal to maintain and develop standards about how
the web should work
Tim Berner’s - Oversees several languages:
- HTML, CSS, DOM, XML, etc
Lee
1997: "HTML4" published
The first major stable version of HTML
Degrading Gracefully
The W3C HTML spec lists several design principles, and
one is degrading gracefully.
"An escalator can never break:
it can only become stairs"
This is why browsers do a best-effort to render non-standard
("invalid") HTML and CSS.
Why not enforce strict HTML?
It's also why <highlight> "works", even though it’s invalid
HTML.
It's super weird that:
Browsers don't fail when given invalid HTML / CSS
Browsers not only don't fail, but they render invalid
HTML/CSS seemingly "correctly"
Q: Why doesn't the browser reject poorly written
HTML/CSS?
There was a (failed) attempt to enforce this,
but it was too late: the Internet grew too big!
The nerdy, mostly* accurate
backstory for HTML today
*I would be more accurate, but it's hard to get valid sources
online.
State of the world, 1997
Things Became
Kind of Mess
Developers
Standard say Browsers do
write weird,
one thing another thing
non-standard
code
2000ish (Not Totally Accurate)
Sure
Whatever
Oops, that "degrading
gracefully" thing was a mistake.
Browsers, stop rendering pages
that have invalid HTML.
We can’t
do that
That would
What?! break the
This was the proposal
internet
of XHTML 1.1
2004: WHATWG formed
The Web Hypertext Application Technology
Working Group
Let's burn everything and Let's work on HTML5
start from scratch with
(an imperfect but realistic standard)
XHTML 1.1
(break approx. 64 million websites)
Fast forward 2017?!
W3C gave up XHTML 1.1 in 2007
W3C and WHATWG are mostly friends (We Think), though they
are still separate entities
What You Need to Know
Q: What HTML elements can I choose from?
Check MDN's list of HTML tags
Q: How do I know if an HTML tag (or CSS property, or JS
feature) is implemented on all browsers?
Check caniuse.com
Q: Why shouldn't I use non-standard
HTML/CSS/JavaScript, even if it works in every browser?
Because it won't be guaranteed to work in the future
Because it won't be guaranteed to work on all "user agents"
LET’S GET BACK TO
CSS
GUESS WHAT
p.abc
p .abc
p, .abc
GUESS WHAT
p.abc A <p> element with the abc class
p .abc An element with the abc class that descends from <p>
p, .abc All <p> elements and all elements with the abc class
A: Read from right to left:
<strong> tags that are children
of <li> tags that have an
"important" class that are children
of the element with the "main" id.
COLLIDING STYLES
When styles collide, the most specific rule wins (
specificity)
Aside: The process of figuring out what rule applies to a given element is called the
cascade. This is where the "C" in Cascading Style Sheets comes from.
COLLIDING STYLES
Specificity precedence rules (details):
ids are more specific than classes
classes are more specific than element names
Style rules that directly target elements are more specific
than style rules that are inherited
If elements have the same specificity, the later rule wins.
The !important exception
When an important rule is used on a style declaration, this declaration
overrides any other declarations.
Although technically !important has nothing to do with specificity, it
interacts directly with it.
Using !important, however, is bad practice and should be avoided
because it makes debugging more difficult by breaking the
natural cascading in your stylesheets.
Rules of Thumb:
Always look for a way to use specificity before even considering !
important
Only use !important on page-specific CSS that overrides foreign CSS
(from external libraries, like Bootstrap or normalize.css).
Never use !important when you're writing a plugin/mashup.
Never use !important on site-wide CSS.
Inheritance
While many CSS styles are inherited from parent to child, not all CSS
properties are inherited.
There's no rule for what properties are inherited or not; the inheritance
behavior defined in the CSS spec.
You can look it up via MDN, e.g.
font-family:
display:
Generally text-related properties are inherited and layout-
related properties are not.
(You can also change this via the inherit CSS property, which is
somewhat esoteric and not often use)
Anchor Tag
Hmm, MDN says color is inherited… but if I set the body color to
deeppink, links don't change color
inherits font-family... Why
doesn’t <a> inherit color?
User Agent Styles
This is because the browser has its own default styles:
Browser loads its own default stylesheet on every webpage
Not governed by spec, but there are recommendations
SE321
Anchor Tag
Link Related CSS
How do we style visited links differently from
unvisited?
CSS pseudo-classes
pseudo-classes: special keywords you can append to selectors,
specifying a state or property of the selector
CSS BOX MODEL
Every element is composed of 4 layers:
The element's content
The border around the element's content
Padding space between the content and border (inside)
A margin clears the area around border (outside)
CSS BOX MODEL
When we add a border to an element, it sits flush against the text
Q: How do we add space between the border and the content of the
element?
CSS BOX MODEL
A: We need to use Padding for our solution.
padding is the space between the border and the content.
Can specify padding-top, padding-bottom, padding-left, padding-right
There's also a shorthand:
padding: 2px 4px 3px 1px; [ top|right|bottom|left ]
padding: 10px 2px; [ top+bottom|left+right ]
CSS BOX MODEL
CSS BOX MODEL
When we add a border to multiple divs, they sit flush against each other
Q: How do we add space between multiple elements?
CSS BOX MODEL
A: We need to use Margin for our solution.
CSS LAYOUT
Q: Do we know enough to make
something like that?
Begin visualizing the
layout in terms of
boxes
CSS LAYOUT
Q: Do we know enough to make
something like that?
Begin visualizing the
layout in terms of
boxes
CONTENT SECTIONING
Name ELEMENT
Description
<p> Paragraph (mdn)
<h1> - <h6> Section headings (mdn)
<article> A document, page, or site (mdn)
This is usually a root container element after body.
<section> Generic section of a document (mdn)
<header> Introductory section of a document (mdn)
<footer> Footer at end of a document or section (mdn)
<nav> Navigational section (mdn)
These elements do not "do" anything; they are basically more
descriptive <div>s. Makes your HTML more readable. See MDN for more
info.
Header
Navbar:
Height: 75px
Background: royalblue
<nav>
Header:
Height: 400px;
Background: lightskyblue
<header>
Main section
Gray box:
Surrounding space: 75px
above and below; 100px
on each side
Height: 700px
Background: gray
<section>
Footer
Subscribe:
Height: 250px
Background: #bdc3c7
<section>
Footer:
Height: 150px
Background: #2c3e50
<footer>
Main Contents
Paragraph:
Height: 200px
Background: khaki
Space beneath: 75px
<p> This is where we get stuck.
Orange Box:
Height: 400px;
Width: 48% of the parent's
width, with space in between
Background: tomato
<div>
Float
Float is a CSS positioning property. To understand its purpose and origin, we can
look to print design. In a print layout, images may be set into the page such that
text wraps around them as needed. This is commonly and appropriately called
“text wrap”. Here is an example of that.
Float
In web design, page elements with the CSS float property applied to them are
just like the images in the print layout where the text flows around them. Floated
elements remain a part of the flow of the web page.
What Are Floats Used
Aside from the simple example of For?
wrapping text around images, floats can be
used to create entire web layouts.
While floats can still be used for layout, these days, we have much stronger tools for creating layout on
web pages. Namely, Flexbox and Grid.
What Are Floats Used
Floats are also helpful for layout in For?
smaller instances. Take for example this little
area of a web page. If we use float for our little avatar image, when that image
changes size the text in the box will reflow to accommodate.
Clearing the Float
Float’s sister property is clear. An element that has the clear property set on it
will not move up adjacent to the float like the float desires, but will move itself
down past the float. Again an illustration probably does more good than words
do.
The Great Collapse
One of the more bewildering things about working with floats is how they can
affect the element that contains them (their “parent” element).
If this parent element contained nothing but floated elements, the height of it
would literally collapse to nothing.
One way we can solve this issue can be applying “overflow: auto” to the
parent element so that the parent element includes all the floated elements.
The box-sizing Property
The box-sizing property defines how the width and height of an element are
calculated: should they include padding and borders, or not.
The default value is content-box. In the content box, The width and height
properties (and min/max properties) includes only the content. Border and padding
are not included
The box-sizing Property
To solve this problem, we can apply box-sizing: border-box property to our
element. In border-box, The width and height properties (and min/max properties)
includes content, padding and border.
The box-sizing Property
