Aplied Visual Design

Different `text-align` styles:

text-align: justify

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum pariatur, architecto consequuntur sit facilis unde officia, voluptatem nobis rem consectetur obcaecati labore excepturi laboriosam modi veniam odit fugit. Sunt, iste!

text-align: center

text-align: right

text-align: left

Use `width` and `height` to change the size of an element:

Changing width

Changing height

Use different text styles:

<strong> or font-weight: bold text:

This text is strong

<u> or text-decoration: underline text:

This text is underlined

<em> or font-style: italic text:

This text is italicized

<s> or text-decoration: line-through text:

This text is ~~strikethrough~~

Take a look at this horizontal line using <ht> tag:

Use background-color: to adjust the visibility of the text

Use font size: to adjust the size of a text.

`box-shadow: offset-x | offset-y | blur-radius | spread-radius | color`

Generic shadow

Spread radius is 5px

Inset shadow

Multiple shadows

To increase transperancy of an element use opacity:

Other useful text related properties

text-transform: lowercase

Lorem, ipsum dolor sit amet consectetur adipisicing.

text-transform: uppercase

Lorem, ipsum dolor sit amet consectetur adipisicing.

text-transform: capitalize

Lorem, ipsum dolor sit amet consectetur adipisicing.

line-height: normal;

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, dolor! Minus doloremque, eos rerum neque et asperiores mollitia ea quaerat eius nisi, necessitatibus impedit ipsa quod iure iste ipsam incidunt?.

line-height: 2.5;

line-height: 150%;

line-height: 15px;

font-weight: 300;

Lorem, ipsum dolor sit amet consectetur adipisicing.

font-weight: 500;

Lorem, ipsum dolor sit amet consectetur adipisicing.

font-weight: 900;

Lorem, ipsum dolor sit amet consectetur adipisicing.

Pseudo-class selectors

:hover pseudo class

:target pseudo class
Applied when the page points to a given element through url, for example #target1.

:active pseudo class
Applied when the user activates an element for example by clicking on it.

`position:` property variants

position: relative

Doesn't remove the element from the normal flow of the document. Other elements act as if it was in its place. But you can specify an offset using left right top bottom properties.

position: absolute

Removes the element from the normal flow of the document. It will be locked relative to its closest positioned ancestor.

This text is placed after in the HTML.

position: fixed

Removes the element from the normal flow of the document. Locks an element relative to the browser window. Won't move when the user scrolls. (Not applied).

float: right / left

float: left

float: right

Removes the element from the normal flow of the document and pushes it to either the left or right of their containing parent element.

If two elements overlap (for example if they are placed absolute, relative, fixed, or sticky), you can change their z position with z-index: property.

Click to change z-index

Different Color Harmonies

Complementary: when two colors are opposite each other on the color wheel

Monochromatic:

Split complementary: 2 colors adjacent to the complement of the base color

Analogous:

Triadic:

Tetradic:

Hue Saturation Light Color Model or `hsl()`

hsl(232, 50%, 75%)

hsl(232, 10%, 75%)

hsl(232, 80%, 20%)

hsl(232, 85%, 46%)

Linear Gradient

linear-gradient(90deg, red, yellow, rgb(204, 204, 255))

repeating-linear-gradient(90deg, yellow 0px, blue 40px, green 40px, red 80px)

radial-gradient(red, yellow, rgb(204, 204, 255))

repeating-radial-gradient(yellow 0px, blue 40px, green 40px, red 80px)

CSS Transform

transform: scale(2)

This is scaled by 2.

transform: skewX(-32deg)

This is skewed on X by -32 degrees.

translate(120px, 50%)

This is translated by 120px on X and 50% on Y.

rotate(0.01turn)

This is rotated by 0.01 turns.

Animation

Use @keyframes animation_name do define an animation. You can use % or ms or s to define animation points. Specify which animation the element must use with animation-name: or animation: animation_name duration.

@keyframes { 50% { margin: 30px 30px; } }

Aplied Visual Design

Different text-align styles:

Use width and height to change the size of an element:

Use different text styles:

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color

Other useful text related properties

Pseudo-class selectors

position: property variants

Different Color Harmonies

Hue Saturation Light Color Model or hsl()

Linear Gradient

CSS Transform

Animation

Different `text-align` styles:

Use `width` and `height` to change the size of an element:

`box-shadow: offset-x | offset-y | blur-radius | spread-radius | color`

`position:` property variants

Hue Saturation Light Color Model or `hsl()`