COMP 1537

Cascading Style Sheets (CSS)

Copyright Ⓒ 2022, Arron Ferguson 1

INTRO TO CSS (1/2)

 So far, no real styling

 (i.e., no ability to change font colors, font size, colors, borders, images,
etc.
 HTML is for content structure
 Enter Cascading Style Sheets (CSS) …
 CSS are for
 formatting details such as Font size, font style, background colors, layout
 Specify layout details based upon screen size
 Any images/fonts that are to be downloaded/rendered for styling
 Animating page components (e.g., changing color, movement, etc.)
Copyright Ⓒ 2022, Arron Ferguson 2
INTRO TO CSS (2/2)

 CSS works by:

 Allowing style to be specified by elements
 Having child element inherit style
 Style 'cascades' down to children, childrens' children, etc.
 Having child elements override style if they require different style than
what was inherited by the parent elements/containers

Copyright Ⓒ 2022, Arron Ferguson 3

 CSS SYNTAX
 CSS uses the following syntax:
selector {
/* comments */
property: value;

}
 Braces wrap around multiple property-value pairs
 Property keys followed by the colon symbol, a value, then the semicolon
 Comments – multi-line, start with front-slash, asterisk, end in reverse
 There are different types of selectors

Copyright Ⓒ 2022, Arron Ferguson 4

CSS SELECTORS (1/4)

 The following types of selectors:

 Element selectors (use the name of elements)
 ID selectors (references the id attribute of any element)
 Class selectors (uses the class attribute of a group of elements)
 Universal selector (uses '*' which acts to affect many different elements)
 Combinators (combination of selectors to select sibling/child elements)
 Attribute selectors (use element attributes/attribute values)
 Pseudo selectors (uses pseudo class/pseudo elements)
 You can also group selectors
 Use a comma separated list

Copyright Ⓒ 2022, Arron Ferguson 5

CSS SELECTORS (2/4)

 Element selectors:
 Use the element names to create selections
 ID selector:
 Uses the id attribute of any element
 Each id attribute value has to be unique within the document!
 Failing to adhere to this will cause problems in JavaScript code
 Since JavaScript will assume only one element has that id attribute value

 Class selectors:
 Use the class attribute – which are added to elements
 Name of class can be any alphabetic name (usually lower case)

Copyright Ⓒ 2022, Arron Ferguson 6

CSS SELECTORS (3/4)

 Universal selector:
 Uses the asterisk to select – usually used in tandem with other selectors
 E.g., element or class

 Combinators, four types:

 Descendant selector – select all descendants of a particular type
 Child selector – select only direct descendants of a particular type
 Adjacent sibling selector – select only a particular type that comes
directly after
 General sibling selector – select a particular type that come after
 Directly or indirectly

Copyright Ⓒ 2022, Arron Ferguson 7

CSS SELECTORS (4/4)

 Attribute selectors:
 Select an element based upon:
 The existence of an attribute
 The value of an attribute
 Can be used in conjunction with other selectors
 Pseudo selectors
 Create pseudo elements/classes that don't actually exist
 i.e., no element by that name
 The element/class is something that is created on the spot to represent a
context/state

Copyright Ⓒ 2022, Arron Ferguson 8

CSS BOX MODEL (1/2)

 Each element is represented by a rectangular box

 There are certain spaces that can be references with CSS
 And grown/shrunk, colored, etc.
 The content area contains …
content
 Padding is between content and
the border
 Border separates the padding
from the margin

Copyright Ⓒ 2022, Arron Ferguson 9

CSS BOX MODEL (2/2)

 The calculated width of a box is:

 width + padding-left + padding-right + border-left + border-right
 The calculated height of a box is:
 height + padding-top + padding-bottom + border-top + border-bottom
 General heuristics
 Don't forget to give some space between your content (e.g., text) and
the border (padding)
 Add values to margins if you don't want boxes touching

Copyright Ⓒ 2022, Arron Ferguson 10

THREE WAYS TO INSERT STYLE

 Three ways to put 'style' into your HTML documents:

1. Inline (using the style attribute for a given element)
2. Use the style element in the head element
3. Use the link element to reference a CSS document
 Heuristics:
 Use inline if you are overriding something (e.g., a framework rule that is
messing up your layout)
 Use style element when you are in development
 Use link element when you have deployed your template to a web site
 More on how these rules take precedence later …

Copyright Ⓒ 2022, Arron Ferguson 11

INLINE STYLE

 Use the style attribute on elements

 Pros:
 Quick and easy to see changes made
 Cons:
 Messy and hard to debug if you have a lot of complex style rules
 Which usually is the case – creating layouts with CSS are usually quite involved
 Have to continually update each HTML page if you make a change in
style

Copyright Ⓒ 2022, Arron Ferguson 12

THE STYLE ELEMENT

 Place the style element within the head element

 And place your rules inside
 Pros:
 One central place where the style rules go
 Cons:
 Have to copy/paste the same thing into each of your web documents

Copyright Ⓒ 2022, Arron Ferguson 13

THE LINK ELEMENT

 The link element goes into the head element

 Some of the link attributes you will use:
 href – the hyperlink reference (use a URL to refer to the style document)
 rel – relationship between current document and linked document
 Use a value of 'stylesheet'
 There are others but we will look at them later …
 Pros:
 One central place for all docs to refer to styling rules
 Cons:
 Have to remember to create/link/manage separate documents
Copyright Ⓒ 2022, Arron Ferguson 14
STYLE PRECEDENCE

 Which overrides which?

 Uses specificity as the determinant
 i.e., more specific means higher precedence
 So:
1. !important declaration
2. style attribute
3. id attribute
4. Class, pseudo-class, or attribute selector
5. Element reference

Copyright Ⓒ 2022, Arron Ferguson 15

UNITS OF MEASURE IN CSS (1/2)

 More commonly used units of measure in CSS:

 Percentage (%) – e.g., 20%
 em (em) – current point size of the font, e.g., 1.2em
 Used to refer to the width of an 'M' during early years of typesetting
 Rem (relative em space)
 Based on the parent’s em space
 Point (pt) – a unit used in typography and is 1/72", e.g., 24pt
 Pixel (px) – represents one dot on the screen, e.g., 2px
 Viewport width, viewport height: vw100 vh100
 There are others but they aren't as commonly used

Copyright Ⓒ 2022, Arron Ferguson 16

UNITS OF MEASURE IN CSS (2/2)

 Units of measure that are relative (i.e., relative to another property)

 'em' space, percent
 Units of measure that are absolute (fixed in size)
 Pixel, point
 Use the following heuristics for units of measure:
 Use pixels for border widths
 Points for fonts
 Percentage and em-space for margins, paddings, spacing between
containers
 Avoid using:
 Pixels for fonts, margins, padding, spacing between containers
Copyright Ⓒ 2022, Arron Ferguson 17
CSS BEST PRACTICES

 Use external style sheets to practice:

 Reuse, cut down on bandwidth, keep layouts consistent
 Define base styles at the top (i.e. body element) and specialize (indirect)
child elements
 Try to avoid in-lining your CSS styles (via the style attribute)
 Easier to troubleshoot styles if they are in an external style sheet
 Although sometimes you may not have a choice

 Avoid using too many visible styles/fonts/colors

 Quantity doesn't equal quality!

Copyright Ⓒ 2022, Arron Ferguson 18

CSS PROPERTY SUPPORT

 HTML 5, CSS 3 has been supported

 When properties are not completely supported, the browsers prepend their
renderer name
 May need to prepend '-moz' or '-webkit-' to the beginning of each property
 There are six (main) browsers, three rendering engines:
 Microsoft Edge browser: EdgeHTML renderer, WebKit renderer
 Google Chrome/Android, Apple Safari/iOS: WebKit renderer
 Mozilla browser: Gecko renderer
 You can always check any CSS property by going to:
 https://caniuse.com/

Copyright Ⓒ 2022, Arron Ferguson 19

CSS TYPOGRAPHY OVERVIEW

 Many different options for changing the appearance of text

 Can break it down into the following categories:
 Web fonts
 Typography settings
 Text decorations
 Layout characteristics

Copyright Ⓒ 2022, Arron Ferguson 20

CSS 3 WEB FONTS (1/5)

 Address one of the biggest issues on the web:

 Do you have the same fonts as I do?
 Not everyone has the same:
 Computing device
 Operating system
 Operating system version
 Fonts installed

Copyright Ⓒ 2022, Arron Ferguson 21

CSS 3 WEB FONTS (2/5)

 Old way of doing fonts with HTML/Web:

font-family: "Times New Roman", Georgia, Serif;
 Which says:
 Use 'Times New Roman' … if not, use Georgia, if not, use whatever
default Serif font that is available
 This will most likely result in a different experience on users' computers
 Than what you saw on your when you created the design 

Copyright Ⓒ 2022, Arron Ferguson 22

CSS 3 WEB FONTS (3/5)

 Now can use:

 True Type Fonts (TTF)
 Open Type
 Embedded OpenType (EOT)
 Web Open Font Format (WOFF)
 To name a few (there are more)

Copyright Ⓒ 2022, Arron Ferguson 23

 CSS 3 WEB FONTS (4/5)

 Use the @font-face directive:

@font-face {
font-family: Broadway;
src: url('BROADW.TTF');
}
 And use it as:
body {
margin: 20px;
font-family: Broadway;
}

Copyright Ⓒ 2022, Arron Ferguson 24

 CSS 3 WEB FONTS (5/5)

 Handling multiple cases:

 For great free fonts, go to:
 http://www.1001fonts.com/
 For creating a font kit, go to:
 http://www.fontsquirrel.com/tools/webfont-generator
 https://www.web-font-generator.com/
@font-face {
font-family: Graublauweb;
src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */
src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */
url('Graublauweb.woff') format('woff'), /* Modern Browsers */
/* Safari, Android, iOS */
url('Graublauweb.ttf') format('truetype'),
/* Legacy iOS */
url('Graublauweb.svg#svgGraublauweb') format('svg');
} Copyright Ⓒ 2022, Arron Ferguson 25
TYPOGRAPHY CONCEPTS

 Some concepts:
 Leading – space between lines
 The term comes from the lead bars that were placed between blocks of text for printing presses
 Tracking – the overall space between characters on a line
 Kerning – the individual space between two characters

Copyright Ⓒ 2022, Arron Ferguson 26

TYPOGRAPHY SETTINGS

 In CSS we can adjust:

 The leading (via line-height property)
 The indentation of the first line in a text-block (text-indent property)
 The capitalization of text (text-transform property)
 The tracking between words in a text (word-spacing property)
 See examples …

Copyright Ⓒ 2022, Arron Ferguson 27

TEXT DECORATIONS

 Text can be given decorations:

 Decoration properties allow for:
 Underline, over line, strick-through
 Changing the line style (e.g., wavy)
 Adding a text shadow – can add multiple shadows for interesting effects

 See examples …

Copyright Ⓒ 2022, Arron Ferguson 28

TEXT WRAP & BORDERS

 Allows for text to wrap around arbitrary shapes (e.g., circle,

polygon)
 Uses the shape-outside property
 Borders can have:
 Rounded corners (border-radius)
 Drop shadows (box-shadow)
 Border images (border-image)

Copyright Ⓒ 2022, Arron Ferguson 29

BORDER – ROUNDED CORNERS &
SHADOWS
 Using border-radius
 Note: also use border property to make border show up
 Can give one value or 4 separate values
 4 separate are:
 Top left, top right, bottom right, bottom left (i.e., clockwise)

 Adds a drop shadow to a container (e.g., div)

 Using box-shadow
 H-shadow, v-shadow, blur, spread, color

Copyright Ⓒ 2022, Arron Ferguson 30

BORDER - IMAGES

 Use images to define your borders ☺

 Use the border-image property with:
 The border property (in order for it to work!)
 Values specified are:
 Height of top strip, width of right strip
 Height of bottom strip, width of left strip
 Repeat/round/stretch where:
 Repeat - image tiles to fill the area, dividing tiles if necessary
 Round - image tiles to fill the area, and is rescaled if necessary to avoid dividing tiles
 Stretch – (Default) The border image is stretched as needed to fill the area

 Use online tool!

Copyright Ⓒ 2022, Arron Ferguson 31

BACKGROUNDS

 CSS provides choices for backgrounds

 More choices than just changing the background – which is all we did so far
 We can do the following:
 Change background color
 Create a gradient (linear, radial) – which actually creates a dynamic image
 Place an image in the background
 No repeat, repeat x, repeat y, repeat both
 Place several images in the background
 Create shapes with CSS
 Embed images into the CSS itself

Copyright Ⓒ 2022, Arron Ferguson 32

CSS BACKGROUND

 The background property – a group property (i.e., multiple properties)

 Specific sub properties:
 background-color, background-image, background-position,
background-size
 background-repeat, background-origin, background-clip
 background-attachment

Copyright Ⓒ 2022, Arron Ferguson 33

BACKGROUND COLOR & GRADIENTS

 Background color can be specified in several ways:

 A hexadecimal triplet in the format #[0-F] [0-F] [0-F] [0-F] [0-F] [0-F]
 Hash symbol, 2 digits for red, 2 digits for green, 2 digits for blue
 E.g., #FF00FF (magenta)
 An RGB decimal triplet in the format rgb(0-255, 0-255, 0-255)
 Give the red value, green value, and blue value, all three values accept 0 – 255
 An RGBA decimal quadruplet in the format rgba(0-255, 0-255, 0-255, 0 - 1)
 Give the red value, green value, blue value, from 0 – 255, alpha from 0.0 to 1.0

 There are also:

 Hue, Lightness, Saturation (HLS), HLSA (with alpha), and predefined colors

Copyright Ⓒ 2022, Arron Ferguson 34

LINEAR GRADIENTS

 Can be:
 linear-gradient – single cycle
 repeating-linear-gradient – repeats a pattern
 Specified by:
 [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+

Copyright Ⓒ 2022, Arron Ferguson 35

RADIAL GRADIENTS

 Can be:
 radial-gradient – single cycle
 repeating-radial-gradient – repeats a pattern
 Specified by:
[ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+

Copyright Ⓒ 2022, Arron Ferguson 36

ADVANCED CSS SHAPES/TRICKS

 Use the:
 transform property
 :before and :after pseudo elements
 Both insert content into the page for an element

Copyright Ⓒ 2022, Arron Ferguson 37

BACKGROUND IMAGES

 Images can be used for a background in CSS

 background-image: accepts a URL (i.e., path to an image)
 Or images
 background-repeat: repeat, repeat-x, repeat-y, no-repeat
 background-size: width and height
 Can set using percentages, pixels, etc.
 For maintaining aspect ratio, set: 100% auto – height will automatically adjust

 Can give multiple values for:

 background-image, background-position, background-repeat, background-size
 For background-image, the first URL is the top image

Copyright Ⓒ 2022, Arron Ferguson 38

 FILTER EFFECTS
 Several types of filter effects that can be applied to content
 Blur – best with pixels
 Brightness – value between 0.0 and 1.0
 Contrast – 100% is normal +/- to change contrast
 Drop shadow – x and y offset, blur and spread radius, color
 Grayscale – from 0% to 100%
 Hue-rotate – from 0 degrees to 360 degrees
 Invert – from 0% to 100%
 Opacity – from 0% to 100%
 Saturate – from 0% to 100%
 Sepia – from 0% to 100%

Copyright Ⓒ 2022, Arron Ferguson 39

CLIPPING EFFECTS

 CSS allows for clipping of content as well (again, images, text, etc.)
 Can use two ways:
 With CSS functions: circle, ellipse, and polygon
 Works with Chrome, Firefox, Edge,

 Advantages:
 Create custom clipping of imagery, can use in tandem with shape-outside
 Disadvantages:
 Clipping doesn't mean crop – so empty space appears

Copyright Ⓒ 2022, Arron Ferguson 40

 RESOURCES
 Reference:
 https://www.w3schools.com/cssref/default.asp
 https://developer.mozilla.org/en-US/docs/Web/CSS#reference

 Online book/tutorial:
 https://developer.mozilla.org/en-US/docs/Web/CSS

Copyright Ⓒ 2022, Arron Ferguson 41