1
Q
CSS (Cascading Style Sheets)
https://www.w3.org/Style/CSS/Overview.en.html
A
- simple mechanism for adding style (e.g, fonts, color, spacing)
- Allow web authors control over all aspects of presentation
- Colours, typography, size, placement, spacing, speech …
- Now also includes visual effects and animations
- Intended to allow separation of content and presentation
- Allows for easy change of appearance
- screen, print, slides, voice reader…
2
Q
Benefits of CSS
A
- Global changes take minutes
- One style sheet thousands of pages
- Easier site maintenance
- Dynamic prototyping
- More agile development
- Reduce design & development time
- Bandwidth
- Smaller documents
- Faster page load
- Interoperability by adhering to standards
- Increases accessibility
- Removes presentational elements from mark-up
3
Q
HTML Default Display
A
- Browsers know how to display HTML elements
- Default font size, weight, decoration, colour, cursor, …
- Default display mode
- Inline: flow with text e.g. anchor, strong, emphasis
- Block: appear full width on their own line e.g. headings, division, paragraph
- Very basic and not very pretty!
- Fine for serving plain, informational documents
- Not so good for engaging applications
- Default display can be expressed in CSS
- https://www.w3schools.com/cssref/css_default_values.php
4
Q
Including CSS in HTML
A
- Normally specified in an external file and included in head
<link></link>
OR
<style>
@import url("./style.css");</style>- Can be embedded within head in style tags
<style>
…</style>
- Only applies to HTML document it is defined in
- Can be specified in-line as an attribute of a tag
<p>Some text.</p>
- Only applies to element it is defined on
5
Q
CSS Structure
A
- CSS files are made up of rules comprising
- A selector to specify what HTML element(s) the rule applies to
- A list of properties and values to describe some aspect of visual
appearance - Permitted selectors, properties & values defined by W3C’s CSS
Working Group as modules rather than a monolithic specification - https://www.w3.org/Style/CSS/current-work
- Comments use /* and */
6
Q
Syntax: CSS Rules
A
- A rule is a selector followed by a semi-colon-separated list of key-value pairs enclosed in curly braces. For examples
p {
color: white;
background: #C210A0;
}
7
Q
Basic Selectors
A
name {
- Asterisk (aka star)
Rule applies to every HTML element in the
document - Tag name
Rule applies to every instance of that tag
in the document - Class name (preceded by a dot)
Rule applies to every element that has a
class attribute containing the class name - Should be a meaningful name that
describes purpose e.g. .warning, .author - Id (preceded by a hash)
Rule applies to the element that has the id
attribute with the id [Remember: id should
be unique so this should apply to 1
element only!]
e.g
p {
.greeting {
8
Q
Basic Properties
A
- Some affect look of the element (and possibly its children)
- For example: color, background, text-decoration, font, …
- Some affect the placement of the element (and possibly siblings)
- For example: position, left, right, top, bottom, float
- Some affect the placement of children within the element
- For example: display: flex/grid
- Some only apply to specific elements
- For example: list-style-type only applies ordered and unordered list tags
- Some combinations of properties are not valid so will be ignored
- For example: left is not valid for elements with position: static
9
Q
Font Family
A
- CSS property
- Specify in the font to be used for a CSS target
- Specify a list of fonts
- If the first cannot be applied by the browser, fallback to the next
- Examples:
font-family: Arial, Helvetica, sans-serif;
First choice Arial,
Fallback to Helvetica if necessary,
Last resort to the browsers default sans-serif font.
10
Q
Units of Measurement - Absolute Units
A
- Pixels (px): Fixed-size units, 1px is
1/96th of an inch. - Inches (in): 1 in equals 96px.
- Centimeters (cm) and Millimeters
(mm). - Points (pt) and Picas (pc): Typically
used in print design.
11
Q
Units of Measurement - Relative Units
A
- Percentages (%): Relative to the parent
element’s size. - em: Relative to the font size of the
element. - rem: Relative to the root element’s font
size.
Viewport units - vw: 1% of viewport width.
- vh: 1% of viewport height.
- vmin/vmax: 1% of viewport’s
smaller/larger dimension.
12
Q
Colours
A
- Colours can be specified in a number of different ways.
- Named Colours - predefined names like ‘red’ or ‘blue’.
- Hexadecimal Notation - one or two hex digits per channel:
#ff0099 or #f09 (shorthand). - RGB and RGBA - use the rgb and rgba functions: rgb(255, 0, 153).
- HSL and HSLA - use the hsl and hsla functions: hsl(150, 30%,
60%). - There are functions for other colour spaces, such as HWB, LAB,
and LCH.
13
Q
Combining selectors
A
- Specific tags that have a particular class or id
- Tag name followed by class name or id with no space between
- e.g. div.warning is all div with the class warning
- Elements with a particular attribute
- Selector followed by square brackets containing the attribute name
- e.g. p[data-value] is all paragraphs with the attribute data-value
- Elements with a particular attribute with a specific value
- Selector followed by square brackets containing the attribute name
- e.g. p[data-value=”ruth”] is all paragraphs with the attribute data-value that
have the value ruth - Multiple elements
- Comma-separated list of selectors
- e.g. .warning, strong is any strong tag and any element with class warning
14
Q
Relational Selectors
A
- Elements that are direct children of others
- Right-angle-bracket-separated list of selectors
- e.g. .warning > strong is any strong tag that is directly inside any element with class warning
- Elements that are descendants of others
- Space-separated list of selectors
- e.g. .warning strong is any strong tag that is descendant of an element with class warning
- Elements that are siblings of another
- Tilde-separated list of selectors
- e.g. .warning ~ strong is any strong tag that has the same parent as an element with class
warning - Elements that are direct siblings of another
- Plus-separated list of selectors
- e.g. .warning + strong is any strong tag that is has an element with class warning immediately
before them
15
Q
Pseudo-classes
A
- What if you want more control over which elements to select?
- Select a target based on ‘extra’ information
- Pseudo-classes
- Selector is followed immediately by a colon and the name of the pseudoclass
- Can be dynamic, e.g. how a user has interacted with it
- E.g. :visited, :hover, :focus
- Can be structural, e.g. where it is in relation to other elements
- E.g. :first-child(), :nth-child(), :nth-of-type()
- Some can take arguments to select a particular pattern e.g. :nth-child(odd)
16
Q
Pseudo-elements
A
- We can specify styles for part of an element (pseudo-element)
::first-letter first letter in an element
::first-line first line in an element
::selection selected by the user - Example:
p::first-line { … } // the first line of all p elements
17
Q
Cascading and precedence
A
- An element might match more than one style selector
- E.g. one style based on tag, another based on class, another based on pseudo-element, …
- If styles affect different aspects of appearance all are applied to the element
- If styles affect the same aspects of appearance the browser needs to decide which to apply…
- First the browsers selects based on the source – this is called the Cascade.
- https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
- Then if conflict still exists, it selected the most specific.
- https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
- Style rules can be declared using !important to override other conflicting rule.
- If element does not have its own style, most will inherit from parent container.
Cascade
Browser default
External sheet
Embedded
Inline
Specificity
Wildcard
tag name
class
id
18
Q
Inheritance
A
- Some CSS property values set on parent elements
are inherited by their descendants - E.g. color and font styles
- Can be overridden by specify styles for the descendants
- Some CSS property values are not inherited by their
descendants - E.g. widths, margins, padding, and borders
- Which are inherited by default is designed to be
intuitive - But consider what happens if you specify font size as a
percentage…
19
Q
Flow
A
- Without CSS, elements are laid out based on the browser’s user agent
stylesheet, referred to as ”normal flow” or “document flow”. - For layout, elements fall into one of four categories:
1. Block-level elements: stack vertically and take up the full width.
2. Inline elements: flow horizontally and wrap to the next line when necessary.
3. Inline-block elements: flow inline but respect width and height properties.
4. List-item elements: behave like block-level elements with additional listspecific styling. - Flow is hierarchical, so child elements are laid out inside the parent as
though the parent were a document
20
Q
The Box Model
A
- Each block element appears full-width
on the page - Each block element has an associated
box - Each box has:
- Content: to be displayed in the element
- Padding: edge that surrounds the content;
included in the background - Border: stylable, visible element
surrounding the padding - Margin: transparent edge that surrounds the
border
21
Q
A
CS2003
flashcards
Decks in class (1)
# Cards
