Applied Visual Design

Visual design is a combination of typography, color theory, graphics, animation, page layout, and more to help deliver your unique message.

---

Table of contents

• Create Visual Balance Using the text-align Property
• Adjust the Width of an Element Using the width Property
• Adjust the Height of an Element Using the height Property
• Use the strong Tag to Make Text Bold
• Use the u Tag to Underline Text
• Use the em Tag to Italicize Text
• Use the s Tag to Strikethrough Text
• Create a Horizontal Line Using the hr Element
• Adjust the background-color Property of Text
• Adjust the Size of a Header Versus a Paragraph Tag
• Add a box-shadow to a Card-like Element
• Decrease the Opacity of an Element
• Use the text-transform Property to Make Text Uppercase
• Set the font-size for Multiple Heading Elements
• Set the font-weight for Multiple Heading Elements
• Set the font-size of Paragraph Text
• Set the line-height of Paragraphs
• Adjust the Hover State of an Anchor Tag
• Change an Element's Relative Position
• Move a Relatively Positioned Element with CSS Offsets
• Lock an Element to its Parent with Absolute Positioning
• Lock an Element to the Browser Window with Fixed Positioning
• Push Elements Left or Right with the float Property
• Change the Position of Overlapping Elements with the z-index Property
• Center an Element Horizontally Using the margin Property
• Learn about Complementary Colors
• Learn about Tertiary Colors
• Adjust the Color of Various Elements to Complementary Colors
• Adjust the Hue of a Color
• Adjust the Tone of a Color
• Create a Gradual CSS Linear Gradient
• Use a CSS Linear Gradient to Create a Striped Element
• Create Texture by Adding a Subtle Pattern as a Background Image
• Use the CSS Transform scale Property to Change the Size of an Element
• Use the CSS Transform scale Property to Scale an Element on Hover
• Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
• Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
• Create a Graphic Using CSS
• Create a More Complex Shape Using CSS and HTML
• Learn How the CSS @keyframes and animation Properties Work
• Use CSS Animation to Change the Hover State of a Button
• Modify Fill Mode of an Animation
• Create Movement Using CSS Animation
• Create Visual Direction by Fading an Element from Left to Right
• $$$
• Make a CSS Heartbeat using an Infinite Animation Count
• Animate Elements at Variable Rates
• Animate Multiple Elements at Variable Rates
• Change Animation Timing with Keywords
• Learn How Bezier Curves Work
• Use a Bezier Curve to Move a Graphic
• Make Motion More Natural Using a Bezier Curve