painting the house
"As a new face it should, by the grace of God and the art of man, have been broad and open, generous and ample; instead, by the vice of Mammon and the misery of the machine, it is bigoted and narrow, mean and puritan."
Stanley Morison, imagining William Morris on Times New Roman
making a webpage with
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.
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:
- margins: how these boxes get spaced relative to one another
- padding: how the stuff inside the box gets spaced relative to the edges of the box
- borders: how thick the border surrounding the box is
- top, right, bottom, left: how the box gets spaced reative to the box it’s sitting inside
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
HEX RGB not yet! CMYK
Laurel Schwulst’s Decade in Internet
fonts, fonts, fonts
web typography history
web safe fonts
lots and lots of open source fonts
free font library
shapes and text wrapping
SVG simpsons in css
console and CSS
google console tools mozilla
W3C CSS Validator
other cool CSS bits
Tutorial: CSS combinators and selectors, the Box Model
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:
<img>, and no external links! Link elements may link to other parts of the text, but not outside.
Lay out the recipe 5 different ways, using the allowed HTML, and only the following CSS properties:
top, right, bottom, left
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.
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.
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).