1 CSS Topics: Readings and References
- CSS: Reference and tutorials MDN: Learn to style HTML using CSS, Note the CSS recomendations W3C CSS home page are primarily for implementors rather than authors only on rare occasions will you need to dig down into these.
MDN CSS is a really good introduction and reference.
2 Introduction to CSS
Utilizing MDN Intro to CSS.
2.1 How CSS works
How CSS works. Topics covered:
- General concepts of documents and stylesheets, rendering
- External, Internal, and Inline stylesheets
2.2 CSS Syntax
CSS Syntax. Topics covered:
- CSS declarations, CSS declaration blocks
- CSS selectors and rules, CSS statements, “At-rules”
- White space, comments, and shorthand
- Simple Selectors. Topics covered:
- Element selectors, Class selectors, ID selectors
- Multiple classes on elements
Attribute Selectors. Read. Know these exist and can be used to solve problems.
Pseudo-classes and pseudo-elements. Read and practice. These are two important CSS mechanism used in a variety of situations including UIs.
Combinators. Important! This is how we combine selectors for more refined selection. These are used all the time. However, I tend to forget the syntax hence the table at the beginning of the article is great!
2.4 CSS values and units
CSS values and units. Important but you are not expected to remember everything here. Some fun code examples.
2.5 Cascade and inheritance
Cascade and inheritance. Important. This explains the notion of the cascade and which of multiple rules gets applied to an element. Discusses specificity. Key to debugging your CSS!
2.6 The Box Model
The Box Model. Fundamental. Topics covered:
- Box properties: content, padding, border, and margin
- Advanced properties: overflow (scrolling), clip, outline
- Types of boxes: block, inline, inline-block
3 Styling Text
3.1 Fundamental text and Font styling
Fundamental text and Font styling. Topics covered include:
- Fonts: color, families, default, stacks, size, style, weight, decoration, transform.
- Text layout: alignment, line height, spacing, etc…
3.2 Styling Lists
Styling Lists. Topics include: list spacing, bullet styles, position, custom bullets, list counting.
3.4 Web Fonts
4 Styling Boxes
4.1 Box Model
Box Model Recap. Nice review also hits some more advanced options such as max/min width/height.
Backgrounds. Important since a lot of very nice styling can be done via backgrounds. Topics covered: color, image, position, repeats, gradients, size.
- Design idea: Go to one of the Websites to Generate SVG Patterns and use one of these to generate background and or border patterns. Make sure you understand what you are getting!
Borders. A more in depth look at borders.
4.4 Styling Tables
Styling Tables. Tables have lots of “knobs and dials” for styling. This is a good tutorial, however we may not explicitly cover this in class.
5 CSS Layout
5.1 Introduction to CSS Layout
Introduction to CSS layout. Good overview. Topics include: floats, positioning, tables, flex box, and grid.
Floats. Important note: Floats were also the foundation for most website layouts. Now we have Flexbox and Grid. In this class when doing layouts “by hand” (rather than a CSS framework) we will use Flexbox and Grid only.
Reference: All about Floats
Positioning. Important. Topics include: static, relative, absolute, fixed, top, bottom, left, right, positioning contexts, z-index, margin-collapse.
5.4 Practical Positioning Examples
- DOM API: document.querySelectorAll(), GlobalEventHandlers.onclick, Element.getAttribute(), Element.setAttribute(), Element.removeAttribute()
- Functions, anonymous functions, passing a function as a value, shows a closure being used.
References: 1. A Complete Guide to Grid 2. Possible guide to CSS Grids 3. A pretty good introduction: Getting to know CSS Grid Layout. Note for class we would not be concerned with their “legacy grid” discussion.
References to be reviewed:
6 CSS Transitions & Animations
Optional topic. Note that CSS transitions are well supported now.
7 CSS Practice
TO BE UPDATED
Hands on Practice with CSS selectors via either
document.querySelectorAll(...). querySelector/querySelectorAll are new features of the document interface and available in current versions of IE, edge, Firefox, and Chrome. Can use the
HTMLElement.styleDOM attribute to look at and set the style.
- Style frameworks: Bootstrap, Foundation, Pure, and many others.
- All provide grid systems, these systems are implemented via classes and underneath are CSS floats.
- All provide a nice uniform look and feel.
- One usually starts with one of these rather than doing all your styling from scratch, unless your primary role is page layout/design.
CSS processors: Sass (note bootstrap 4 is moving to sass), Less. These “languages” compile into regular CSS but add programming capabilities such as variables, containment, inheritance, etc… to help reduce code size and maintain consistency across large CSS projects.
Invisible CSS. Good review and in depth look at important CSS concepts.
- CSS in the Large. One thing we didn’t have time to cover is techniques for dealing with CSS when the amount of styling work becomes large.
BEM “BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.” How we use BEM to modularise our CSS