to class -- to about -- to syllabus -- to people -- to the library

painting the house

"As a new face it should, by the grace of God and the art of man, have been broad and open, gen­er­ous and ample; instead, by the vice of Mam­mon and the mis­ery of the machine, it is big­oted and nar­row, mean and puri­tan."
Stanley Morison, imagining William Morris on Times New Roman

making a webpage with <style>

CSS
CSS is what you use to tell a web browser how to display a webpage. ‘CSS’ stands for ‘Cascading Style Sheets’: they define rules of presentation that are applied in stages, as the browser composes the Document Object Model. The DOM is how the webpage gets represented in the memory of the computer that loaded it.

The ‘cascading’ means that the order in which you apply CSS rules matters: when two rules apply to the same element, the one that was declared last is used.

CSS and HTML
CSS is always defined relative to an HTML structure. In particular, to get CSS rules to apply to particular parts of the DOM, we use selectors and combinators. These can be pretty powerful but! there are some limitations. For lots of practice, CSS dinner is a pretty good tutorial.

It’s also possible to select HTML elements according to attributes. Attributes are used in HTML to define properties of an element that don’t necessarily relate to style: for example, all links that link to a .pdf file could be styled differently to elements that link to a .jpg.

positioning
One of the main things CSS allows us to do is change how things on the page get positioned. This can be one of the most complex CSS concepts when you first start to learn, as there are quite a few rules involved, and things can behave counter-intuitively.

To understand how these rules work, this guide to the position property by Mozilla is really thorough, and contains a lot of useful information. For some slightly more complex concepts, this document on identifying the containing block is really helpful when you’re trying to figure out why something isn’t behaving like it should.

the box model
We’ll revisit this next week, but the box model is pretty central to understanding good css layout. A lot of CSS involves putting boxes inside other boxes and next to even more boxes. The box model defines:

The box model is also affected by HTML: the display property we encountered last week (that decides if an element is a block or an inline element) will change how the box gets arranged relative to other boxes.

colours in CSS
  named colours
  encodings
    HEX RGB not yet! CMYK
  colour picker
  randomcolour.com
  colourbox
  gradient generator
  Laurel Schwulst’s Decade in Internet

fonts, fonts, fonts
  web typography history
  web safe fonts
  lots and lots of open source fonts
  google fonts
  free font library

unicode
  noto

css shapes
  shapes
  shapes and text wrapping
  SVG   simpsons in css

debugging
  console and CSS
  document.designMode=’on’ document.body.style
  google console tools mozilla
  W3C CSS Validator

other cool CSS bits

  bud uglly

a thought

Tutorial: CSS combinators and selectors, the Box Model

Assignment:

using just HTML and CSS, take last week’s recipe and explore 10 more variations

Make sure you read the instructions correctly 👀

This week’s assignment is a continuation of last week’s! You will now format the same recipe 10 more ways, using CSS in addition to HTML. In all cases, you may only use the HTML tags that were allowed at the end of last week’s assignment. To recap, those are:

the essentials:

plus:

no <img>, and no external links! Link elements may link to other parts of the text, but not outside.

Step 1

Lay out the recipe 5 different ways, using the allowed HTML, and only the following CSS properties:

The goal of this part is to focus on positioning elements using CSS. Think of different ways you can make parts of the recipe relate to one another. The passage of time! The beets! Experiment with space and possibly try a very tall page or a very wide page.

Step 2

Lay out the recipe 5 more ways. In addition to the CSS and HTML properties allowed in the previous step, you can use any of the following CSS properties:

The goal of this part is to focus on typography using CSS. Experiment with hierarchy and scale in the document, and the ideas that are expressed in different typefaces and alignments.

Just as before, document your work as you go along. How are you thinking about the problem at hand? This assignment was inspired by a conversation with Lucy Siyao Liu, and borrows its form from Laurel Schwulst’s exercise 25 Variations.

reading

Shay Howe Writing Your Best Code

Don’t just read this week’s reading, but take its suggestions on board! Perhaps write a bit in your documentation this week about any aspects of your code that you changed after you read this. (NB – changing code to improve it is a process called ‘refactoring’, and it’s a very important and necessary part of professional web development).