E4a: In-class Exercise

Without box-sizing

This div is smaller (width is 300px and height is 100px).
* 1. add margin and padding. 2.Change the existing sizes of border. 3. Change the height of box


This div is bigger (width is also 300px and height is 100px).
* 1. add margin. 2.Change the existing sizes of padding and border

With box-sizing

second set of div 1 and 2

This div is smaller (width is 300px and height is 100px).
* 1. Make this box as the same size as the one below by using box-sizing. 2. Make it look nicer 3. Challenge: can you only make the width of these two div box the same?




This div is bigger (width is also 300px and height is 100px).
* 1. Make this box as the same size as the one above by using box-sizing. 2. Make it look nicer

Paragraph Indents

Separating paragraphs from one another is one of the most fundamental functions of typography. There’s two generally accepted solutions: either use a first-line indent or a margin between the paragraphs. Your readers (hopefully) aren’t stupid—they don’t need two signs that a new paragraph is happening, so never use both an indent and a margin. That would be redundant.

The CSS text-indent property defines the size of the first-line indent of a particular element.

Manageable Line Length

You should try to limit the length of your lines to approximately 80 characters or less. It reduces strain on the reader’s eyes, since they don’t need to move back and forth as much. It also helps prevent them from jumping to the wrong line when they get to the end of the previous line. The end result is that it’s easier for visitors to digest your content.

Don’t believe us? Try reading Wikipedia with a narrow browser window. It makes a big difference.

* 1. Adjusting line length, leading, indents or space, alighments (try different ones). 2.Design it

Locally Hosted Web Fonts

“Web typography” refers to the appearance of all the text on your website. It includes basic CSS text properties like what font to use and whether it should be italic or not, but typography is much more than that. It’s about the space between and around letters, words, and lines. It’s the size of different runs of text in relation to one another, and the history behind each font family.

Woff Fonts

Recently, the industry has standardized on the Web Open Font Format (WOFF), so things have gotten a little bit simpler for us. Over 90% of modern browsers support .woff fonts, and support for its next evolution, .woff2, is growing. WOFF2 is similar to the original WOFF format, but offers a significant reduction in file size (which means better performance).

Eventually, you’ll only need to support WOFF2, but right now, we suggest providing both WOFF and WOFF2 web fonts to get decent coverage for older browsers and improved performance on modern ones. Unless legacy browsers make up a large chunk of your target audience, .ttf, .svg, and .eot fonts are a thing of the past.

* 1. Use locally hosted fonts for em, h3, h4, and p. 2. You may use different typefaces or different styles of the same font. 3. style the content. 4. list the name of your fonts.