Lesson 3 pt. one | CSS Fundamentals

Because this lesson is so long, I’ve split it into two parts. Lesson 3 has 14 total sub-lessons, so I’ve chosen to split this in half and will go over seven in this blog.

This entire lesson goes over common CSS concepts, and immediately jumps into typography for your website. Focusing on fonts is a natural starting point because it’s important to the design of the site and what you’re trying to communicate to your viewers.

If you don’t specify a font and format for your text, your content will receive the browser’s default styling.

screen-shot-2017-02-02-at-2-49-38-pm

The first thing you’ll need to decide when choosing a font for your site is whether you want to use system fonts or web fonts. In the past, designers have been limited to using a small set of fonts that are preinstalled on almost every machine. These are call system fonts.

screen-shot-2017-02-02-at-2-50-12-pm

Until recently, HTML and CSS contained no mechanisms for displaying a font that wasn’t already installed on the clients machine. You can certainly specify that you wanted your webpages to use Garamond, but unless the person viewing your page had Garamond installed, it would fall back to the system’s default font. You can see this concept illustrated clearly by looking at the syntax in the image on the right:

The syntax may appear to be asking for more than one font, but actually the designer has provided fallback fonts for the system to go to if the previous fonts aren’t installed on the system. In this case, the first choice would be “Arial.” If Arial wasn’t installed, it would then request “Helvetica.” If Helvetica wasn’t found, it would then request “Verdana” and so on.

However, recent advances to CSS and browser support now make it possible to use more options of fonts. This term is web fonts. The term web fonts is used to describe the technique of embedding font files in webpages using the “@font-face” method. This allows web authors to use fonts without worrying about whether they’re installed on the client machine or not. An example of the @font-face rule syntax is in the image on the right.

Now I’m moving onto formatting text for a site. To define fonts, you use the font-family property. You can define a single font, or you can provide a fallback list of fonts, separated by commas, that instructs the browser to use the next font in order if the previous font isn’t fond on the client’s system. In the below example, all the text on the page would be set to Georgia.

screen-shot-2017-02-02-at-3-15-29-pm

If Georgia is not available, then it will set to Times New Roman. If that’s not available it will set to Times. And if that’s not available it will look for the default serif font. Now, in terms of syntax, notice that Times New Roman is in quotations. This is because there is more than one word in the font’s name.

Now, to control the size of the text you would use the font-size property. CSS gives you a ton of options when defining size, as you can use a diverse group of measurements.

screen-shot-2017-02-02-at-3-21-19-pm

Now, two common units to use for font size are pixels and em. Pixels are fixed units , meaning that if I sent the font sized to 16 pixels, it’s going to be 16 pixels, regardless of which user agent it’s viewed on. Now, on the other hand, if I use a relative unit, such as an em, the font size is relative to the device’s current default size. Below is a good visual of this in practice:

screen-shot-2017-02-02-at-3-24-07-pm

In the image below, you can see that we’re setting the font size of the headings and paragraphs relative to each other.

screen-shot-2017-02-02-at-3-28-19-pm

Now, if you’re looking to set text to either bold or italic, you’re going to use the font-weight and font-style properties, respectively. Font-weight can be either expressed as bold, normal, told to inherit, or it can be specified as a numeric weight from 100 to 900 (100 being the lightest, 900 being the boldest). Font-style allows us to specify italic, normal, oblique, or inherit. In the right image, you can see how those styles effect the document.

In some cases, you may want to style your text to have upper-case or small caps. For instance you may want an h3 heading of an author with small caps. To style this with CSS you would use the font-variant property. If you want text to be in all caps, you would need to use text-transform.

screen-shot-2017-02-03-at-1-40-52-pmscreen-shot-2017-02-03-at-1-41-28-pm

You can also control the alignment of your text with the text-align property choosing between left (which is the default), center, right and justified. In the image below, the paragraphs have been set to justified and the quote is set to center.

screen-shot-2017-02-03-at-1-42-05-pm

Along with text alignment, you can also set text-indent, which allows you to indent the first line with any value you have set (including negative values).

Screen Shot 2017-02-03 at 1.42.36 PM.png

Now, these next two text formats I’ve discussed when using Adobe Indesign and these properties allow you to have some control over kerning (spacing between letters) and leading (spacing between lines of text).

For kerning you would use letter-spacing:

And for leading you would use letter-height:

Above, you can see the subtle changes in both to get a visual of how these properties effect your the style of your document.

No matter what topic, you can always find a handful of core concepts that are critical to understanding the subject properly. For CSS, the box model is certainly one of those concepts. Without understanding the box model, almost every task related to the physical relationships of elements would be more difficult. If, on the other hand, you have a thorough grasp of the box model, tasks like page layout become much easier.

screen-shot-2017-02-03-at-2-01-27-pm

Below is a visual representation of an element’s box:

screen-shot-2017-02-03-at-2-01-50-pm

This could be a paragraph, a heading, a list item. Really, any element on your page. If we start on the outside of an element, the first time we encounter is the element’s margin. Margins represent the space around an element, and are used to define the space between page elements. Margins are not used to calculate the final width of an element, but as you can see, they’re very important in terms of how elements relate to each other and how much space an element requires within layout.

screen-shot-2017-02-03-at-2-03-08-pm

The next property we come to is the element’s border. All elements are allowed to have a border assigned to it even though, by default, most elements don’t have one. Borders have three properties that define the border itself: the border-width, border-style and border-color. You can also assign borders individually to the top, right, bottom and left sides of an element. Borders are considered to be part of the box model because they define the outside edge of an element, and because they’re physical size is used when calculating the overall size of an element.

screen-shot-2017-02-03-at-2-03-22-pm

After borders, we have padding. Padding is the space added to an element inside the border. The best analogy for padding is to imagine a box with something fragile inside of it that you need to ship. You’re going to want to add some packing material to the box to keep the fragile object from touching the edge of the box. That’s padding.

Padding is totally transparent, and it’s value is used to calculate the overall width and height of an element.

screen-shot-2017-02-03-at-2-05-01-pm

Finally, we have the width and height properties. You can set up these properties of any element using either percentages or a fixed unit of measurement. It’s important to remember, however, that there’s a big difference between the width and height properties and the total width and height of an element. This tends to be confusing to those who are new to CSS.

screen-shot-2017-02-03-at-2-06-01-pm

Below is an equation for the total width:

screen-shot-2017-02-03-at-2-06-36-pm

This often confuses new designers as they assume that the value applied to the width property represents the total width of the element. That is possible now through the box-sizing property. Box-sizing accepts two values: content-box or border-box. The content-box property calculates width and height using the default method that was described. The border-box property, however, includes the border and padding values into the width and height values allowing you to set a total width of an element through the width property.

The box model can be very simple, but there are a few things that can trip you up if you’re not careful.

screen-shot-2017-02-03-at-2-14-39-pm

After that overview, we’ll get more familiar with margins and padding. As we discussed earlier, padding is the space inside of elements that hold the contents of an element away from its edge. You can specify padding in several ways. First you can define padding individually for each side of an element, or you can also use shorthand notation when defining padding.

There are four variations on padding shorthand in the right image above. First, you can define four separate values, separated by white spaces. Now, these values are going to apply in order, from top, right, bottom and left sides respectively. Now, if you use three values, the first value will be applied to the to, the second value for the left and right sides, and the last value will be applied to the bottom. If only two values, the first value applies to the top and bottom, while the second value will apply  to both the left and right sides. Finally, if you simply use a single value, that value is going to be used for all sides equally.

There are some things to keep in mind with padding. By default, most elements that are considered block-level elements, like paragraphs, will go ahead and expand to fit the width of their parents. If you don’t define the width for those elements, padding will be added to the inside of the element, which causes the content area to shrink, and sometimes results in the element actually getting taller.

If, on the other hand, you specify a width of 100% padding will then result in the element actually becoming wider that its parent element, as the padding is added to the outside of the elements width. You can change this behavior by using the box-sizing property, but when defining element widths, it’s crucial that you understand how the element’s padding will factor into the equation.

screen-shot-2017-02-03-at-2-46-10-pm

Most designers use padding to keep the contents of a box away from its edge. This cane be used to create visual boxes, like pull quotes, out of a single element, without using graphics or background images. Padding can also be used to move the contents of an element away from the background image to give the appearance of custom bullets, or to add decorative touches to an element.

screen-shot-2017-02-03-at-2-46-58-pm

Margins represent the space between the elements, and are applied outside of an element’s edge. While it’s not factored into he total width of an element, it does affect the amount of space that an element takes up on the page and is critical to achieving proper spacing between elements.

Margins also use the same syntax as padding, so you can either specify margins for each side individually, or use the shorthand notation.

screen-shot-2017-02-03-at-2-48-13-pm

For the most part, margins are pretty straightforward, but there is one aspect of margins that tends to trip up even the most experienced of designers.

Unlike horizontal margins, vertical margins collapse. That means that, if you have two elements, stacked one on top of another, only one of the elements’ margins are applied. Take this example: if you have heading one with a bottom margin of 16 pixels, and a paragraph with a top margin of 16 pixels, there will only be 16 pixels’ worth of space between them, not 32 pixels. This prevents paragraphs and headings from having double spaces between the two of them.

screen-shot-2017-02-03-at-2-49-16-pm

If the values not the same, the higher of the two values is going to be used.

Advertisements