< Back to Course

INF-250: Web Design and Development — CSS Text Formatting

Assignment review

Overall great work! Common issues:

  • Forgetting to close tags.
  • Leaving out the <!doctype HTML> or one or more of the required HTML elements:
    • <html></html>
    • <head></head>
    • <title></title>
    • <body></body>
  • Having a complete index.html file but only partials in the other pages.
  • Using non-existing elements like <welcome> or <p2>

Code Formatting

Online HTML Formatter
Formatting in VSCode

CSS Selector Specificity

When two CSS rules try to set the same property on the same element, CSS has to choose a “winner”. That’s the cascade.

Quick rule
If both rules match the element, the winner is usually: more specific selector. If specificity is tied: the rule that appears later in your CSS wins.

1) Source order

If the selectors are the same, then the rule that comes later wins. 

/* Same selector, same property */

p {
	color: red;
}

/* Later rule wins (it comes last) */
p {
	color: blue;
}

2) Specificity

Specificity is basically the “strength” of a selector. A helpful cheat sheet is from weakest to strongest:

  1. element (p, div, section)
  2. element element (descendant selector)
  3. .class
  4. element.class
  5. #id
  6. inline style

3) !important

!important can override the normal cascade. It’s sometimes useful, but it can also make future conflicts harder to fix. 

/* !important overrides normal specificity (use sparingly) */

.intro {
	color: purple !important;
}

p {
	color: green;
}
Rule of thumb
Use !important sparingly. It’s often a sign that your CSS structure needs improvement.

Style Inheritance

Some CSS properties automatically flow from a parent element down to its children. This is called inheritance.

Big idea
Inheritance is mainly for text-related properties. Layout/box styling usually does not inherit.
Common properties that do inherit:
  • color
  • font-family, font-size, font-weight
  • line-height
  • text-align
Common properties that don’t inherit:
  • background / background-color
  • border
  • margin, padding
  • width, height

line-height

line-height controls the vertical space between lines of text. It’s one of the biggest “readability” settings.

  • normal (uses browser default)
  • Unitless number like 1.5 (recommended; scales with font-size)
  • px like 24px

Example syntax:

body {
	line-height: 1.6;
}

h1 {
	line-height: 1.1;
}
	
p{
	line-height: 24px;
}

text-align

text-align aligns inline content (text) inside a block.

  • left, right, center
  • justify (stretches lines to fill the width)

Example syntax:

/* text-align */

h1 {
	text-align: center;
}

p {
	text-align: left;
}
Text alignment only affects the inline content inside the element. It does not affect the element itself.
Text alignment only works on block-level elements (like p, div, section, etc.). It will have no effect on inline elements (like a, span, strong, etc.).
By default, <img /> elements are inline, so they will be affected by the text-align property of their parent.

text-transform

text-transform changes the casing of text visually. It doesn’t change what you typed in your HTML.

  • none (default)
  • uppercase, lowercase, capitalize

Example syntax:

/* text-transform */
section{
	text-transform: uppercase;
}

text-indent

text-indent indents the first line of a block of text.

  • em like 2em (common for paragraphs)
  • px like 24px
  • % like 10% (based on container width)
What is em? It’s a unit based on the font size. If the font size is 16px, then 1em = 16px, 2em = 32px, etc. It’s great for text properties because it scales with the font size.

Example syntax:

/* text-indent */

/* Indent only the first line */
p {
	text-indent: 2em;
}

letter-spacing

letter-spacing adds (or removes) space between characters.

  • normal (default)
  • Lengths like 0.06em or 1px (and negatives are allowed)

Example syntax:

/* letter-spacing */

h1 {
	letter-spacing: 0.06em;
}

/* Negative values are possible, but use carefully */
small {
	letter-spacing: -0.01em;
}

Setting color values

CSS Color Picker

Until now, we've been using text for colors, like red, blue, and green.

CSS actually has many different ways to specify colors, and you can even make your own custom colors. Here are a few examples:

  • #ff0000 (hexadecimal RGB)
  • rgb(255, 0, 0) (RGB function)
  • hsl(0, 100%, 50%) (HSL function)
  • rgba(255, 0, 0, 0.5) (RGB with alpha for transparency)
What is hexadecimal? It’s a base-16 number system that uses digits 0-9 and letters A-F. In a hex color like #ff0000, the first two digits (ff) represent the red value, the next two (00) represent green, and the last two (00) represent blue. So #ff0000 is pure red, while #00ff00 is pure green and #0000ff is pure blue.

text-shadow

text-shadow adds a shadow behind text. Syntax: offset-x offset-y blur color.

  • offset-x: left/right, can be negative
  • offset-y: up/down, can be negative
  • blur: softness (bigger value = softer shadow)
  • color: the color of the shadow

Example syntax:

/* text-shadow */

/* offset-x offset-y blur color */
h1 {
	text-shadow: 5px 2px 4px #ff0000;
}

To apply multiple shadows, separate them with commas.

white-space (rules about spaces + new lines)

HTML normally collapses extra spaces and ignores line breaks in your source. white-space controls what gets preserved and whether text wraps.

  • normal: collapses spaces, wraps lines (default)
  • nowrap: collapses spaces, does not wrap
  • pre: preserves spaces/newlines, does not wrap
  • pre-wrap: preserves spaces/newlines, wraps

Example syntax:

/* white-space */

/* Preserves spaces + new lines, and still wraps */
p {
	white-space: pre-wrap;
}

Using Google Fonts

https://fonts.google.com/

  • Select your font
  • Click "Get Font" button
  • Click "Get Embed Code" button
  • For CodePen, use the "@import" option. For VSCode and GitHub, use the "link" option.
  • Copy over the snippet. The @import rule goes in your CSS, and the <link> tag goes in your HTML <head> element.
  • Find the font-family rule form the example CSS and copy it to your CSS.