New terms from treehouse – CSS Foundations Part 3 – Background and Borders and Web Typography

Background and Borders

Any element can have a background color or image applied. In an element, everything except the margin area is considered the background.

background-color property set an elements background color. This accepts color keywords, hex codes, rgba and hsla. If you don’t specify  background color, the element by default will have a transparent background color.

background-image property lets you set an image for the background. These are specified with the url() value, which uses the url functional notation url(). Can be optionally enclosed in single or double quotes, and can contain whitespace before or after the optionally quoted url. If the image cannot be displayed for whatever reason (bad path, image doesn’t exist in directory, etc), then the browser would treat the background-image like it’s value was none, and show a transparent background. Because of this, it’s good practice to also specify a background color in case that happens.

bg one

By default, a background image is repeated both horizontally and vertically so it covers the entire element. In this example, the image is small and gets tiled, unlike the previous example where the image’s size was large enough to fill the element without having to repeat.

bg twoa bg two

Resource: http://subtlepatterns.com/ – great resource for free patterns and textures to us as background images in designs.

Background images are generally used for decorative things like textures, markers, buttons and icons, and sometimes as a full page background image. Note, that if the image is relevant to the content of a page, it should be added in the markup as a img element.

background-repeat property let’s you set whether or not is repeats. repeat is the default value, and makes it so the image repeats until it fills up the element. repeat-x makes it only repeat horizontally, and repeat-y makes it only repeat vertically. For any of these, images that go past the edge of the element get clipped. Finally, no-repeat makes it so the image doesn’t repeat.

repeat repeat xrepeat y no-repeat

By default, a background image is place in the top left of the element, but you can adjust this with the background-position property, which accepts position keywords, length units and percentages. If you enter just one value, it will be for both x and y values (like center). The first value it accepts determines the x-axis position, which accepts the keywords center, left and right. The second value determines the y-axis, and accepts top, bottom and center. If you use percentages, 0 is left and 100 is right, and 0 is top and 100 is bottom. If you set a negative length unit, it will move the image past the element and clip part of it.

bs pos2 bg pos

There are some new values you can use for this as well, but they’re not very well supported yet.

background-attachment property lets you set whether the background image scrolls along with the containing element and content, or if it’s stays fixed in the viewport area. When a page moves, the viewport never does, what’s moving up and down is the content of the page.

scroll is the default value, where the background image scrolls with its containing element when you scroll the page, but when you scroll the element it doesn’t move.

fixed keeps it fixed to the viewport so it doesn’t scroll with the page. This makes it look like it’s moving when you scroll down the page, but when you scroll in the element it doesn’t move.

local makes it so the image scrolls with the page, but if you scroll within the content the image scrolls as well. The image is fixed to the element and its content.

This is confusing to write about. Go here to see an example of how they work.

background is a shorthand property for all of these. The common order for the values is: background-color, background-image, background-repeat, background-attachment, background-position. However, it doesn’t matter if one or several values are left out, as you don’t have to specify every value, only the ones you want. For the ones left out, the default styles will be used instead.

bg sh ex bg sh

 


 

border-radius let’s you create round and elliptical borders on elements, by defining how rounded the corners appear. Even if there’s no border, the radius still gets applied if there’s a background-color set, and vice versa. border-radius is a shorthand property for border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius. The curve of each corner is done by defining one or two values that define its shape, which can either be a circle or an ellipse. They can be any length unit, or a percentage, but you cannot use any negative values for either.

rad 1 code  rad ex 1

If you use a percentage, it is for how much of the respective corner it will take up. 100% would take up the entire corner it’s set for:

rad c 2  rad ex 2

…and 50% would take up half:

rad c 3  rad e 3

These corners are actually formed from the radius of a corner circle.

example

Now, you can also enter a second value for elliptical corners instead.

example 2

The first value will set the horizontal radius and the second will set the vertical radius. The two combined define the curvature of the corner.

rad c 4  example 3

When using percentages, the horizontal percentage will refer to the width of the box, and the vertical percentage value refers to the height of the box.

rad c 5  example 4

Keep in mind that if you add a border to the element it will be affected and curved by the border-radius as well as well.

ex 5

Once again, you can define all these styles using the border-radius shorthand property, which accepts up to four values.

  • One value affects all four corners, and affects the horizontal and vertical radii equally
  • With two values, the first affects the top left and bottom right, and the second affects the top right and bottom left corners.
  • With three values, the first only applies to the top left corner, the second to the top right and bottom left corners, and the third only to the bottom right corner.
  • With four values, each are applied to one of the four corners in this order: top left, top right, bottom right, then bottom left. It goes clockwise starting with the top left.
  • If you need to set a horizontal radius as well with the shorthand, you can use a forward slash (/) between the values. The follows the same rules as above, only you write out the horizontal values first, then the slash, then the vertical values.
  • So, if you wrote 25px 100px / 30px 50px… 25px would be the horizontal for top left and bottom right, 100px would be the horizontal for top right and bottom left, 30px would be the vertical for top left and bottom right and 50px would be the vertical for top right and bottom left.

Making shapes! Perfectly rounded circle: make sure width and height values are the same, then set the border-radius to 50%.

circle code  circle

Oval shape: height value must be 1/2 of width value, with border-radius horizontal value 100px and vertical value 50px.

oval code  oval

Lemon shape: height = width, with values below.

lemon code  lemon

Note – although you can use this for any element, it seems that chrome and safari don’t support it for video elements.


 

box-shadow let’s you add shadows to your elements, and can accept up to six values. The first value is the horizontal offset, and it accepts can be any valid positive (moves it to the right) or negative (moves it to the left) length unit, the second is the vertical offset, and it accepts can be any valid positive (moves it down) or negative (moves it to the up) length unit. You need at least these two to make a box shadow. The third value is optional and sets the blur radius, which determines how blurry or sharp the shadow should be. 0 gives sharp edges.

sharp code  sharp

The higher the value, the less sharp it will be. It will appear softer.

blur code  blur

The fourth value is also optional and is for spread-radius, it’s useful for defining the spread distance of the box shadow. Positive values make the shadow spread in all directions by the specified radius, so from the center of the shadow.

spread rad code1 spread rad

Negative values will shrink the shadow.

spread rad code 2spread rad 2

With negative values you can make effects. If you set the x value to 0, it will look like the shadow is floating (because there’s no horizontal offset).

sc3sr3

The fifth value for the border-shadow property let’s you set the color of the shadow. It must be placed either before or after the four length values above, or the entire declaration will be ignored. If the color is not specified, the browser will render it according to the element’s color property.

sc4 sr4

The sixth value accepted is the inset value, which let’s you make it so the shadow is on the inside of the element, rather than a drop shadow where it’s outside. Once again, this must be declared either first or last or the line will be ignored.

sc5 sr5

To make the shadow even on all sides, set both the horizontal and vertical offsets to zero, then use the blur radius and spread to adjust the shadow.

sc6sr6

Finally, you can add multiple box shadows to an element, just separate them with a comma. The first shadow specified will appear on top, with the last one on the bottom.

sc7 sr7


Creating multiple backgrounds with the background property – you simply need to separate them with a comma. Note that the first image listed will be the top image layer rendered, with the last one listed being on the bottom.mb codemb1

background-size lets you set the size of these images. Like background, it can accept multiple comma separated values that set the size of each image. In the example below, keep in mind the percentage values are relative to the width and height of the entire background positioning area, and not the width and height of the image itself. You can set two values for each background image, the first is for the width and the second is for the height. If you only put one value, the second will be set to “auto“, which is the initial value. Also, negative values are not permitted.

c2e2

You can adjust the position of the images with the background property with length units and percentages as well (instead of keywords like bottom and top), which is handy because that means you don’t need to go do that in Photoshop, you can do it with the CSS.

c3 e3

You can put the background-size values in the background shorthand by putting a forward slash (/) between the background-position and background-size values, followed by the background repeat value, but keep in mind this isn’t well supported yet in safari or firefox.

c4

There are two new values for background-size, which help with creating full page, background images. The cover value fills the entire background positioning area, and if you set this for the html element, it will be for the entire background. Make sure the height value is set to 100%.

fullbgc

The contain value will also scale the image so it fits inside the background area, but it will also make sure it keeps it’s original aspect ratio (meaning it will likely not fill up the entire page like cover does).

ea ca

So, let’s say you want to make an image the background for a div or something. You’d set the background image, then set the background-size to cover like before:

bgbbgcBut, what if you didn’t want the background image to be showing behind the semi transparent border you made? The background-clip property let’s you set the background painting area, which means whether the background-position property is goes to the content, border or content area of the element, which means it basically tells the browser how far the background should physically extend, which is normally to everything except the margins. The border-box value is the default, and means the background is clipped at the border area of the element. With content-box, it’s clipped at the content area of the element. In the example below, you can see the background isn’t displaying in the padding area.

cb cbb

With the padding-box property, the background will display on the element’s content and padding:

pb

Keep in mind all these values are for any background, so colors too, not just images.

The background-origin property determines how a background-position is calculated. The three values it accepts are the same as the ones listed above for background-clip. With the border-box value, the position is relative to the border edge. With the padding-box value, the position is relative to the padding edge. With the content-box value, the border position is relative to the content area. Keep in mind that if the background-attachment property is set to fixed, this property will have no effect. The three examples are listed below in that order.

borderpaddingcontent codez


Web Typography

Typography is one of the most important elements of web design. Text is part of the user interface, because users rely on it to do whatever it is they came to the site to do. It’s purpose is to make life easier for the reader, make things easier to read, and invoke emotion. It should enhance its content and message, keeping the reader more interested.

To pick a typeface, read your content and think of the mood it conveys, try to describe it with adjectives. Even if a typeface looks great or cool, it’s not worth using if it’s hard to read. Easy to read is always better.

Choose a font based on legibility and readability, which is about how individual letters are distinguished from each other. The most legible typefaces have loose letter spacing, generous x-heights, similar cap heights, prominent ascenders and descenders and common counters, which are the fully or partially enclosed spaces in letters. They also have open bowls, which are the curved strokes surrounding the counters and open apertures (like the red part of the p below), which are the openings at the end of a counter (like at the bottom of an h). They also share common serifs, which are the little tapering strokes that tail the end of some letters.

typo

Things that make typefaces less legible: being in all caps (you lose your ascenders and descenders), too much italics (the spacing between letters starts to get lost), too much bold (the bowls start to close up).

Different moods from different fonts: bold – powerful, script type (like long cursive) – calm, elegant, serif – serious and sophisticated.

Make sure the typeface has the different fonts you’ll need (like bold, italic, etc). Is it legible at smaller fonts and lighter shades of color? Do they use lining or old-style numbers? Lining is better for tabular data and charts. The old style might be more pleasant, especially if you’re putting it in with text. Cost is another factor, not all are free.

numbers

If you want to make 2 typefaces work together, you need to pay twice as much attention to detail, they’ll need to have the right balance. It can be good to have one be serif and one be sans-serif, but that’s not set in stone. Still, if they’re too similar, that will look bad.


When people land on a page, they see before they start reading. This is when they decide if they want to begin/continue reading. They see word chunks, so we need to help them quickly scan the different blocks of content. They read based on pattern recognition, so you look for important words and fill in the rest. People don’t really want to read all of the content, most just want reasons to stop reading. They don’t read every word, just focus on important ones.

Longer line lengths are difficult to read because it forces you to move your eyes left to right. Too short lengths make you have to jump to the next line to often. The ideal line length is 45-75 characters (including spaces and punctuation.

Line heights are the vertical space between lines of text. You should be generous here, it should always be 150% times the font size. The browser default is 1em aka 1 times the browsers font size, which is too little. Many things can affect this: font design, size, weight, and case.

Like music, text has rhythm. The simplest form is the letters, words, spacing and line height in continuous lines of text. Adding images or making headings stand out help with this. Alignment can help with this as well. Things that aligned right moreso than other elements tend to have greater emphasis.

Typographic color is not about the color of the font itself, but rather the density or tone of blocks of text. Dictated by typeface, font size, space between letters and lines of text. Test this by squinting.

Chunking – when you merge related elements together. The less space between them, the more likely they seem related. We tend to read thing better when they seem similar. You can zoom out to see if the chunking is looking well.

Pay attention to the negative space around text (whitespace) and make sure text has space to breathe. It can also put emphasis on things by putting lots of it in there, or coloring certain sections.

Visual hierarchy is important, without this it makes skimming through the page and finding the important parts harder. Easiest way to do this is with the headings and setting styling contrast between the different elements.

Treatment of links affect readability of text as well. They need to be easily identifiable from the rest of the text, through color, style, case or weight, and good hover states. Make sure regular text does not appear clickable.

Links in the main nav need to be easily scannable and communicate to the user. You can use a side nav when you have a lot of links, with the most important ones near the top.

The goal is to make the user unaware of the fact that they’re reading at all.

3 Most common approaches to a typographic page:

  1. Traditional – uses a lot of center and justified alignment. The text is usually in a frame of whitespace. Should look pretty like art, will use script and serif typefaces. Example
  2. Modernist – clear cut margins and edges, to steer and guide the eyes through text, usually through sans-serif typefaces. Many columns of text may be used with large headings and stark and contrasting colors. More utilitarian than decorative. Example
  3. Post-Modernist – part of a new wave of typography, breaks a lot of previous rules for 1 and 2. Challenges the reader to interpret the text on the page. Example

Good example of a blend of all three.


Responsive text – while text is pretty fluid on it’s own, it’s often not a one size fits all solution. A header might look great on an imac, but not on an iphone. Body text might lose it’s rhythm once the viewport gets more narrow.

Font-size shouldn’t just be based on personal preference, but also reading distances and potential viewports. When sizing type, it’s bad practice to just pick one you think would look good. You should use a typographic scale, because it let’s you achieve a consistent hierarchy. It goes by 1, then by 3, then by 12.

typo scale

It’s important to use relative values like em’s rather than absolute values like px. Once again, because it’s good to know:

Equation for converting px to em: Let’s say you want to get a font size of 12px with em’s. To do this you take the size you want (12) and divide it by the default font size (16). In this case that gives you .75em.

Line-length should also be fluid, so you should use percentages rather than fixed lengths like px. This makes the line-width adjust with the viewport, but the font-size should adjust as well, otherwise you won’t have that good 45-75 character line-length, each line would have like 3-4 words.

normal

So, use a media query to adjust the width of the wrap div when the screen-width gets small as a certain point, and also the font-size for the body to 1em. Just a reminder, the rule below basically says “apply these styles instead when the viewport is less that 600 pixels wide”.

small mq1

However, now the line lengths get to long for bigger browsers. So, let’s add another media query for screens at least 900px wide. By setting the max-width: to 600px, we get the ideal line length regardless of how large the screen gets.

mq2large

Improving vertical rhythm – the header keeps having a line break at certain points in the page when resizing. We can make the smallest one better by adding a new font size for it in the media query, but it’s also happening at around 628-782px. We can use another media query, OR:

  1. Use one of the new viewport relative units. vw stands for viewpoint width, remember 1 vw = 1/100th or 1% of the viewport. In the vide they say this isn’t supported in FF but it has been implemented since the video was made.
  2. Fit text is a jquery solution for making font scalable. He adds it in. Good note: he uses a different id selector to select the h1, rather than its class we were using for CSS. Never functionality and presenation in selectors, it’s best to keep them separate.

Vertical rhythm is the balance of spacing and the arrangement of text as the user moves down the page. Each line has a baseline it sits on, an invisible line that anchors lines of text, and if it sits on it perfectly then it has a consistent vertical balance or rhythm. The concept applies to headings, lists, images, and any group of text elements. The goal is for the layout to have this and be consistent, which makes it easier to read. If different elements have different shapes, the reader is forced to recognize each new one, making it harder to read.

vert rhythm

Resource: Let’s you add baselines like that to your page – http://basehold.it/

I added that and you can see things look way off.

bslh

To fix that, we set the body line-height:1.62; which comes out to be about 29px, so 1.62 x our 18px font size. He then made a bunch of changes to margin and padding I did not fully understand, but it did fit well on the baselines. To review, it was at 9:49 in the part 2 video. This involves a good deal of tinkering.

bslh2


Web Fonts are linked to our webpages from external sources and are activated when needed. Pretty good browser support. What makes a good one? Same as before for picking a typeface – does it work well for other fonts, does it convey the right emotion, legibility, was it designed for web use, loading time (this can affect performance), price?

When you purchase a font and host it on your server, you’re buying a license to use it. Each font’s EULA (End User License Agreement) will be different.

Once you buy it, you need to test is everywhere, on different screen resolutions and fonts.

font service takes care of the font loading process and relieves us of browser support concerns as they will serve the latest version for all browsers. They offer a variety of quality fonts, and also handle the licensing stuff.

  • Subscription Examples: https://typekit.com/, http://fontdeck.com/, http://www.fonts.com/.
  • Free services: http://www.fontsquirrel.com/, https://www.theleagueofmoveabletype.com/, https://www.google.com/fonts/.

The pop out option for google will show us the font at different sizes and weights, and will list other fonts that work well with this one.

In the example I went in and got a font from google as a <link>, and downloaded another from fontsquirrel.com as a @font-face kit. The google one went into the head element like normal, and I made a rule for the @font-face kit in the CSS.

@font-face lets us link to each one, which are then activated when needed by a specific browser or platform. First, you use the font-family property to give it a name, which you can make up because it will only be referenced internally on the stylesheet. Then, you specify the locations of the font files using src. The reason we specify different versions is for better cross browser support. They are:

  •  eot (embedded open type) – a proprietary format for IE.
  • eot?iefix – a bit of a trick to make it work for IE 6 and 7
  • woff (web open font format) – newer web font format by mozilla, works in most modern browsers and IE. Advantage is it loads quickly because they compress the data in the font, so sites using this will use less bandwidth.
  • ttf (truetype format) – used for Safari, Android and iOS displays
  • svg (scalable vector graphics) – open source, if the font is missing a glyph you can add it yourself. Used here for older versions of iOS.

You need to consider performance with font-face rules. The individual formats inside them are fine, but for overall font-face rules you should aim to have no more than 4-5.

fontf

Once you’ve done all that, to use the font, you just call it in a CSS rule like any other font. As always, it’s important to do a font stack and list other back up fonts in case there’s an issue loading your web font or a specific character. Make sure they’re similar though, as it will just load the character from the next font in the list. You can also just only subset the glyphs you need for things like ampersands, numbers, etc to speed up performance.

ffc

letter-spacing property lets you set the spacing between letters. Positive values make more spacing based on the default, negative decrease the spacing. See before and after below:

ls

ls1 ls2

icon fonts are icons or pictograms that would normally be inserted as an image or vector file, but were converted to a font instead. This speeds up the design process and site performance. They can load 14% faster than images and be 90% smaller that svg files. So, they’re superior to svg and images for icons. They’re also better resolution wise, because like any web font they can scale to any resolution without losing quality. Popular sites that offer these are: http://symbolset.com/, http://pictos.cc/, http://icomoon.io/.

Add it just like any other font-face rule. To call it, we used the before pseudo-element to add in the css3 logo. We used its unicode character, which we found by going to this part of icomoon.

icon code 2 icon code icon 1

We can then style it like any other font, giving us the following. The -webkit-font-smoothing property set to antialiased makes sure it remains smooth and not jagged.

ico

stylefont

Web fonts contain open type features, which are now supported by major browsers. the font-feature-settings property lets us access those. A ligature improves the appearance of text for letters by connecting letters that are too close together, like the f and i below, to give them a smoother appearance. You can turn these on using the -webkit-font-feature-settings property and setting it to the “liga”, “dlig” values. liga are commons ligatures to combine letters like fi and fl, which many web fonts include as standard. dlig are discretionary ligatures and are useful for non standard ligatures like script typefaces when you want to make a lot of custom combinations, the ff and fl.

ligaligaex


 

“Typography isn’t about the choice, but the quality of one’s decisions.” So it’s what you do with it more that the one you choose.

Using line rules is a good symbol of separation. They should be subtle and deemphasized with light colors and line-weights. They should be closer to the info they belong with, to draw attention to that text. You can create these by either using a <hr> tag or putting a border on the element with CSS.

You should never fake font-weights or styles. So, if your typeface does not include a bold or italics font, you shouldn’t try to use one. If you do, the browser will try to create its own, which can lead to smeared glyphs for bold (because it just renders it double), and faux italics can lead to unattractive, distorted letters. Avoid using the <b> and <i> tags, instead use <strong> and <em>, which gives us the freedom to change the appearance of text via the stylesheet. With font-weight, if your typeface uses a numerical scale (i.e. 100-700), it’s better to use that.

Pay attention to the tracking aka the letter spacing of the text. This can affect the appearance and readability of text – it will look more airy when spaced out, or dense when tightened. When there’s too much of it for body text, the word shapes seems to break up.

tracking

For headings though, they might benefit from some tighter tracking. You can adjust tracking with the letter-spacing property like in the lesson above. Tracking can also help eliminate widows and orphans in paragraphs, which are short lines or words at the start (widows) or end (orphans) of paragraphs that are split from the rest of the paragraph.

orphan widow

These create rags which are the uneven sides of the text, like the second and third lines of the paragraph below. There’s no easy way to prevent them, but you can help by adjusting font-size and line-length.

rags

Poorly justified text can create large, unsightly gaps between words in the paragraphs. These are called rivers, like several rivers of whitespace flowing throughout the text.

rivers

Hanging punctuation requires characters to be positioned outside the margin edge, usually used for pull quotes and bulleted lists. to create an even visual edge to make things more readable.

hanging

A quote that’s flush with the text interrupts that edge and makes things less readable. To fix that, you can give the text a negative text indent value in the stylesheet.

flush

You can hang the list markers in the list, which will keep the flow of text because the margin edge is still defined and continuous compared to one that’s indented. Still, either is acceptable.

bullets

There’s a css3 hanging-punctuation property on the way but it’s not supported by any browser atm.

Text in lists should be aligned with itself and not with the list marker on each line. If they’re indenting the text, then they’re inside the content flow, which messes up reading because our eyes look for straight lines.

relaunch

When using numbers, acronyms or abbreviations, they shouldn’t yell at the reader. They should be slightly smaller to blend in with the text. You can do this with the font-variant property and a value of small-caps.

HTML can’t render true quotes, n or m dashes, so you need to insert these character codes using HTML character entities. A real quotation mark is a curly quote, not the double prime set of straight quotes you sometimes see. Open and close quotes should not be the same. The correct symbols are shown below. You should also use the dashes shown below instead of a hyphen. ndashes are for ranges, like 1-10, and mdash is for a break in thought.

quotes

Similarly, for ellipses and ampersands you should use the following symbols.

ellipses

Remember, you can style the first letter in a paragraph using the drop cap, but be sure to use them sparingly.

Aw sheeeiiittttt. 7 Units down in the CSS foundations course, only 5 to go.

New terms from treehouse – CSS Foundations Part 2 – Text Fonts and Lists and The Box Model

Text, Fonts, and Lists

font-family property allows us to specify the typeface for the text in an element. There are two kinds – either a specific font name, like Proxima nova or a general ones like san-serif

typeface is interchangeable with font-family. They are made up of different fonts. So, Times New Roman would be the typeface/font-family, and the different variations of it would be the fonts, like the italicized version, the bold version, etc. Props to this article for explaining that.

Serif fonts have the little markings at the end, called stroke endings, and are usually evenly spaced. Ex Times New Roman and Georgia

Sans-serif fonts have plain stroke endings. Ex. Verdana or Helvetica

Monospace fonts’ characters and letters all have the same fixed width, and occupt the same amount of horizontal space. Ex. Courier and Lucida Console. This is often used to render code examples.

In order for the font chosen to be displayed in the browser, users viewing the sites must have the fonts specified installed on their computer.  Web-safe fonts (ex. are Verdana, Georgia, Times New Roman, and Arial) are ones available on all computers, but sometimes you’ll want to use ones they might not have. For that you use font stacks. They let you set a prioritized list of fonts that the browser will cycle through until it finds one that is installed on the users system. The safest ones are serif, san-serif and monospace. It’s good practice to include on of those as the last one in your font stack.

font stack

If a font family is made up of more than one word, you’ll need to put it in quotes: “Times New Roman”.

View more font families here.

Many fonts have various styles within their families. You can use the font-weight property to specify how thick or thin the characters are displayed. Common values include normal and bold. Headings by default have a weight of bold. These weights are mapped to a numerical scale of 100 to 900 by 100’s, with 100 the thinnest and 900 the heaviest. You can also use these as the font-weight property values. Normal is equal to 400 and bold is equal to 700. You can also use lighter and bolder values, which are interpreted relative to the weight inherited by the parent. Not all fonts will have all the numerical values, depends on what’s built into the font.

font-size property allows you to set the size of the font. You can do this with keywords or units. There are absolute size keyword values like small, medium or large, and relative size keyword values like larger and smaller, that are relative to the current font-size set. The most common way though is with length units and percentages. Keep in mind, percentages are relative to the parent element’s font-size. So if the parent element was the body of the page, and it was 16px, a font-size of 200% in the child element would be 32px. Same concept for using em units.

Remember – to convert px to em values, you divide the desired element’s pixel value by its parent element’s font size pixel value.

font-style specifies the font style for text. The values it accepts are normal, italic and oblique. normal is the default value, italic makes it slanty by selecting that version from the typeface family, and the oblique makes it look a bit slanty as well. Oblique isn’t used often because a lot of typefaces don’t have them. If you specify oblique and it’s not available, the browser will try to use the italics one, and if that’s not available, then it will make it’s own rendered one for you.

font-variant property sets whether text should be displayed in small caps font, which is a font where the lower case letters appear as smaller versions of upper case letters. Value can be set to small-caps. If a small caps font isn’t available, browsers will simulate one using the upper case characters.

font property is a convenient shorthand property for setting all these things at once. The font-size and font-family must be specified, if they’re omitted the entire line is ignored. Any optional value (font-style, font-variant and font-weight) must be submitted before the size value, and the font-family value needs to be the last one listed.

font examples

line-height property specifies the vertical spacing between lines of text. If a page has a lot of text with a lot of lines, a larger spacing between them makes them easier to read. The difference between the font-size and the line-height is the letting, which the vertical space between a line of text. It’s measured from the bottom of the descender (like the bottom of a p) to the top of the ascender (the top of the letters) on the next line.

line-height

It can accept five types of values: normal, unitless number value, px, em or %. Normal is the default value and is 1.2. It’s better to define line height with unitless values or relative units, so the line height scales with the size of the text. A common value is 1.5 which the browser multiplies by the font-size to determine the line height. 1.5 is the same as 1.5em and also 150%.

text-align property let’s you set the horizontal alignment of text. Can accept one of four values – left, right, center and justify. left, right and center align the text to that side of its parent element. justify makes it so that every line (except the last) has an equal width, taking up the whole width of its parent element. left is the easiest to read, and the default value for most browsers

text-decoration allows you to set the line decoration of text to none, underline, overline (above the text) or linethrough. Commonly used to remove underlines in links with the none value.

text-indent lets you indent the first line of text with either length units or percentages. It can also accept negative values.

text-transform let’s you control the case, aka the capitalization of the text. values are uppercase (all uppercase), lowercase (all lowercase) and capitalize (each word capitalized).

white-space sets how white space in the element will be displayed. normal is the default value, which ignores and does not render multiple spaces and line breaks. The only time you would use this is if you had already set one of the other values and you wanted to set it back. nowrap value is the most commonly used value, it ignores all whitespace and will not allow text or inline elements to break naturally to the next line. pre value renders content exactly how it was written in the markup, including extra spaces and line breaks, and the spaces in the markup indentation. pre-line value ignores multiple spaces in the markup, but does honor the line breaks. pre-wrap works like the pre value, except that it will not force everything on a single line. It will honor multiple spaces and explicit line breaks. Lines are only broken at new line characters written in the markup.

text properties

text-shadow is used to create shadows for text. It accepts 3 unit values, followed by a color. The first value is the horizontal offset, as in how far to the left or right the shadow should fall. The second is the vertical offset, which is the distance from the top to the bottom. The first and second values can also be negative numbers. The third is optional, and specifies the amount of blur aka blur radius applied to the drop shadow. Finally, you put in a color, using keywords, hex code, hgl, rgba, etc.

text shadow

You can apply multiple shadow values to the same property, by separating them with a comma. The shadows will be stacked one on top of the other, and the shadow declared first will be on top.

overflow property lets you specify what should happen when text overflows its containing element. The value hidden will hide any text that goes past the parent element, but makes it hard for the user to notice the text has been hidden.

text-overflow property is by default set to the value clip, which will clip any text that goes past the parent element. If you use the ellipsis value, it will render an ellipsis character when the text is hidden and clipped, and will replace however many characters necessary for the ellipsis to fit.

overflow 1

word-wrap property gives a simple way of wrapping text within a single word. It allows long and unbreakable words and links to continue onto the next line. The value break-word will do this for you.

wrap

overflow 2

List Styles

list-style-type property lets you set what the list markers (the dots or numbers) are to the left of an ordered or unordered list. It can accept a bunch of values like: disc, circle, square, and many others, here’s a list of them.

liststyletype

list-style-position lets you set whether the list markers appear inside or outside of a list item. outside is the default value, and the markers appear outside the content flow. The inside value will have them appear inside the content flow. The example he gave had us put borders around the li’s. When I set it to outside, the markers were outside the border, but when I set it to inside they were inside the border.

Screen Shot 2014-05-01 at 5.55.46 PM

By default, lists are left indented on the page. IE uses left margins for this, while Firefox, Safari and Chrome use left padding.

list-style-image property let’s you use an image as a list marker. This uses the url() like other properties that set images.

img marker img marker 2

However, it doesn’t give you much control over the position of the image. A more common approach is to set the list-style-type property to none, and then adding the custom marker as a background image to the list items, with the background property. norepeat is a boolean value (I think?) that makes sure the image does not repeat or tile in the background. This lets you accurately control the placement of the image marker.

better img

list-style is the shorthand property that defines all the list style properties in one declaration. It accepts up to all three mentioned above, list-style-type, list-style-position and list-style-image, in any order.

list style

 

The Box Model

Every html element can be thought of as a rectangular box made up of content, padding borders and margins.

box model

Elements are either displayed as blocks or inline elements.

block level elements create a separate block, that take up the full width available based on the width of it’s parent element, with a new line before and after the element. Examples include div, p, h1-6, ul, ol.

inline elements only take up as much space as they need. They do not force any new lines, and stay inline with the rest of the document. Examples include span, img, strong, a.

The box model is made up of four distinct parts that calculate its size.

content is the inner most area, the area containing the elements actual content, like texts or images.

padding surrounds the content and separates it form the border area above. It’s values can be a length or a percentage, but negative values are not allowed. You can set each property individually, using the padding-top, padding-right, padding-bottom, padding-left properties, or use the shorthand padding property to set the padding for all four sides.

  • If you use one value for it, that padding is applied to all four sides
  • If you use two values for it, the first value is applied to the top and the bottom, and the second value is applied to the left and the right.
  • If you have three values, the first value is applied to the top, the second value is applied to the left and the right, and the third value is applied to the bottom.
  • If you have four values, the first is for the top, the second for the right, the third for the bottom, and the fourth for the left side.

border area is the outer most area of the box. They’re optional, but different styles can be applied to them. They can be set using lengths or percentages. In order to see a border, you must define a border style, and there are three properties you can use for that.

  • border-width is used to set the width of the border. Can accept keywords or length units, but negative values are not allowed. Default value for this is medium. It also accepts thin and thick. Like padding, this can have anywhere from one to four specifying the border-width of each side of the box. This works the same way as padding where the number of values you specify affect what they style (see above). You can mix keywords and values
  • border-style sets the style of the elements border. Common values include none, which is the default value and specifies no border. dotted applies a dotted border. dashed applies a dashed border. solid applies a solid border. This can also have one to four values, one for each side of the box model.
  • border-color sets the color of the elements border. Can use color keywords, hex codes, rgba and hsla values. Once again, you can set all four sides individually if you want, and the separate properties for those are bottom-top-color, bottom-right-color, bottom-bottom-color and bottom-left-color. However, you can also just have them all in one declaration using the border-color shorthand property.

border all

  • border  is a shorthand property for the three ones listed above. You specify the border width, style and color in that order, with no commas in between them. If no border color is specified, then it will take on the text color of its element. This seems to only work for specifying one value for all for sides for each, it didn’t work when I tried individually setting sides for each value.

border shorthand

margin exists outside of the box. It’s what separates the element from other elements. It accepts three types of values: lengths, percentages and the keyword auto. Negative values are also allowed. If you put a negative value for the top or left sides, it pulls the element in that specified direction. This can make the element move outside of it’s parent element.

top left neg

A negative margin applied to the bottom or right instead will pull any succeeding element into the main element.

right bot neg

Entering auto as a value will center the child element inside of it’s parent element, so long as a width value has been specified for the child.

auto

Like previous examples, you can define a margin for each side, the properties for that are margin-top, margin-right, margin-bottom, and margin-leftmargin is the shorthand property for all four.

With Chrome web tools, in the metrics pane you can examine and edit each element’s box model parameters. Shortcut: click Command Option (or shift) C to turn on inspect element.

display property lets you override the default display settings for an element. The most common values are none, inline, block and inline-block. none will make it so that the element does not display at all or take up any space on the page. block is the default value for block elements. It makes them generate a block element box with a line before and after it. inline places the element inline with the flow of the line the element is in.

Keep in mind, if you want to apply a width, height or top or bottom margin to an inline element, it won’t work, you need to set it to inline-block. This generates a box that’s a block element flowed with surround content, like it’s an inline element. Negative top and bottom margins won’t work with inline-block.

In the example below, notice how the width and margin don’t do anything for the links that are set to inline.

block code block example

visibility property lets you hide certain elements. The hidden value is kind of like display:none in that it will make the element invisible, but the difference is it will still take up the available space. visible is the default value, the only time you’d use it would be if you’re overriding something previously set to hidden.

By default, a box’s width or height is as big or small as the content it holds. With width and height you can use percentages or length units. If you use a percentage, it will take up that amount of its parent company. em length units will make it relative to the font size. px are still commonly used because they let you set an exact length.

For height, you can’t set a height that would make the element bigger than its parent element, unless the parent is given an explicit height. In the example, if you wanted to set the div height to 100%, you’d have to set its parent’s height (the body element) and than the parent’s parent’s height (the html element).

height

Keep in mind that when you define a width and height, you’re not setting it for the whole box model (padding, borders, margin), but rather just the content itself. To calculate the width and height of the box, you must take into consideration the padding, and border width/height as well.

Let’s say that you wanted to make a box that was exactly 500px wide. You could do the math to calculate the content width based on how much padding and border you have, or you can use the box-sizing property. Its border-box value forces the padding and borders into the width and height instead of expanding it. This property is well supported, except for IE7 and firefox, which require the -moz- prefix declaration.

box sizing

You can limit the width and height of your boxes. min-width property specifies the smallest size the box can be displayed when narrow. max-width is the max width the box can be stretched when the browser is wide. You can use max-width to make sure lines of text don’t appear too wide, and min-width to make sure they don’t appear too narrow.

min width

You can also cons1train the height of a box with min-height and max-height. If you were to set a min-height of 480px, the element will never be smaller than that, but will grow if the content exceeds that height. If you set the max-height to 200px, the div will never be taller than 200px, even if the content goes past it or the height property is set to something larger.

Once again, you can handle text like that with the overflow property, which accepts visible, hidden, scroll and auto. visible is the default value, the content is not clipped, and you’d never use it unless it was previously set as something else.

visible

 

hidden will clip any content that extends beyond the contain box. This can be good for dynamic content where you’re worried your text might break your layout, but it does prevent you from seeing that content.

hidden

scroll is the same as hidden, only it adds a scroll bar so you can see the content. This will by default provide both a horizontal and vertical scroll bar. If you don’t need that, the value auto will only provide the scroll bars when needed.

scroll

a float is defined as a box that is shifted to the left or the right on the current line. The property accepts three values: left, right and none. One of its most common uses is floating an image with text wrapping around it. floats remove elements from the normal flow of the document. In the example below, the order in the markup was the img, h4 then the p. A border was added to the h4 and the p, and you can see how the floated image just pushes the content out of the way. If you were to add a margin to the p or the h4, it wouldn’t do anything, because that would just put margin between what’s next to it in the document flow.

flow1

If a block level element (like this div) contains floated children (like this img and p), it will collapse to no height, requiring a fix by using the clear property, which clears the space around the floats. clear accepts four values: left, right, both and none. none is the default value and it allows floating elements on both sides. left allows no floating elements on the left side. right allows no floating elements on the right side. Finally, with both no floating elements are allowed on the left or right sides.

Now, to make it so that the div doesn’t collapse, you can add an element to the end of the div, like a <br />, then in the css clear the br with clear: left;. However, this is bad practice as it adds a non-semantic element, meaning one that does not clearly define its content. This would be bad for a large site, because you’d have a bunch of unneed tags. A more simple and effective way is to apply the overflow property to the containing element (the div in this case), with a value of hidden or auto. This way also isn’t strongly recommended though because certain parts may get clipped or hidden due to positioning, margins or padding.

flow 2a flow 2b

The best way to do this is by using a clear fix aka a micro clear fix. This method uses the before and after pseudo elements to generate empty content via the content property. Then, it styles the content with display:table; which creates an anonymous table cell in a block formatting context. The clear property is then used below on the after pseudo element to clear it on both sides.

float fix 3

So now anytime you need something cleared, you just add the class group to its containing element (in this case the div containing the floated img, p and h4).

Also for IE6 and 7 support you need to add this:

float 3b

 

position property let’s you specify specific positioning schemes and methods. Can accept four values: static, relative, absolute and fixedstatic is the default value, it positions its element along with the normal flow of the page, and ignores any values for the top, right, bottom, left or z-index properties. If you don’t declare a position value, it will always be static, so make sure to choose one. relative behaves similar to static in that it changes an element without influencing the layout of other elements. However, with it you can use the top, left, right, bottom and z-index, and it moves it relative to its original place in the document.

See the example below, the middle div is 150px offset from the left, and 75px offset from the top of it’s original position in the document flow.

relative position

The absolute value for position completely removes the element from the normal document flow, and therefore no longer affects the position of other elements. You can see if we set the middle div to absolute, the original space it took up in the flow is no longer honored, and it has no impact on the surrounding elements. Now, it sits on top of the bottom div.

absolute1

Now, you can also use the top, right, bottom, left and z-index properties here as well. However, with absolute positioning, the offsets are based off the browser viewport, rather than the document flow like it is with the relative value. Even if you resize the page, it will remain relative to the browser viewport, and let everything else move behind it.

absolute

Now you can change the context by adding a relative position to the parent or any ancestor element. So in the example below, the div with the class “wrapper” is containing these divs, and if you set it to position:relative, it’s child elements will be based off of it when they’re set to position:absolute.

rel ab

Keep in mind! An element with position:absolute will always be relative to the first parent element with a position set to anything other than static.  If none of the parent elements up the chain have this, then it will be positioned relative to the browser window aka the viewport.

You can also position any element set to absolute, inside any other elements set to absolute as well. Here we use generated content via the :after pseudo-class to add in a little black box.

pseudo class

fixed is another value for the position property. Works similar to absolute, but with a few differences. An element will always stay fixed in the browser window, regardless if you scroll up or down. Good example is the twitter header, which always stays fixed to the top of the viewport. So, this positioning will always be relative to the viewport.

fixed2 fixed

z-index property lets you change the natural stacking order of elements, and adds a 3rd dimension to the page, the z-axis. Higher z-index values sit on top of lower ones. Can only be applied to elements positioned absolute, fixed and relative.

z example

z1 z2

NOTE! You can’t apply both position and float to an element, because they have conflicting positioning schemes.