[CSS Introduction] The Complete Guide to Basic Properties for Web Design with Copy & Paste
Introduction
CSS (Cascading Style Sheets) is responsible for the "look and feel" of a website. The design of everything users see, including text color and size, layout, and animations, is created with CSS.
Based on the key points from 46 articles, this guide carefully selects and introduces the most essential and fundamental CSS properties that web development beginners should learn first. Each item includes a link to a more detailed explanation and code that you can copy and paste to use immediately. Let's start by getting an overview with this article, and then dive into the topics that interest you.
Table of Contents
- 1. First Things to Know! Basic Rules of CSS
- 2. Styling Text (Typography)
- 3. Mastering Spacing is Mastering Layout (The Box Model)
- 4. Arranging Elements Freely (Layout)
- 5. Defining a Site's Impression with Color and Backgrounds
- 6. Engaging Users with Decorations and Animations
- 7. A Step Further with Advanced CSS Techniques
1. First Things to Know! Basic Rules of CSS
The basis of CSS is to specify "which element" gets "what style." Let's look at some rules for that.
Selectors (class / id / tag)
This is how you specify which HTML element a style applies to. The basic distinction is to use class for general purposes, id for a specific unique element, and a tag selector like p for all paragraphs.
CSS Reset
This is the concept of resetting the default styles that browsers have, such as the underline on links, to prevent design inconsistencies.
2. Styling Text (Typography)
The impression of a website changes dramatically with the appearance of its text. Here are the basics of creating readable and attractive text expressions.
Text Color (color)
This is the most basic property for specifying the color of text. Using red text for warnings or error messages allows you to convey information accurately.
Font Weight (font-weight)
This makes text bold to emphasize important parts.
Italic Style (font-style)
This makes text italic. It's used as an accent for quotes or in designs.
Font Size (font-size)
This adjusts the size of the text. Using em units allows you to specify a size relative to the parent element.
Line Height (line-height)
This adjusts the spacing between lines of text, improving readability for long passages.
Letter Spacing (letter-spacing)
This adjusts the space between characters. Spacing them out slightly in headings can create a sophisticated impression.
Text Alignment (text-align)
This horizontally aligns inline elements like text within their parent element.
3. Mastering Spacing is Mastering Layout (The Box Model)
All HTML elements are treated as "boxes," and adjusting the space around them is fundamental to layout.
Border (border)
This draws a line around a box. You can create various styles like solid or dotted lines.
Inner and Outer Spacing (padding / margin)
padding adjusts the space inside a box, while margin adjusts the space outside it. Mastering these is key to beautiful layouts.
4. Arranging Elements Freely (Layout)
This is the technique for not just stacking elements vertically, but also arranging them side-by-side or wrapping them.
The Basics of Side-by-Side Layout (display: flex)
This is the most powerful and mainstream technique in modern web layout. By simply specifying it on a parent element, you can easily arrange child elements side-by-side.
Wrapping (float)
This is a classic layout technique used for things like wrapping text around an image.
Inline-Block (display: inline-block)
A convenient property that allows elements to be arranged side-by-side while also having width and height.
Controlling Height and Width (width / height)
This specifies the size of a box. Specifying a percentage relative to the parent element, like width: 100%, is fundamental to responsive design.
Hiding Elements (display: none)
This completely hides an element from the screen. Since it's also removed from the layout, it behaves as if the element never existed.
Practical 2-Column Layout
Using display: flex, you can easily create a common 2-column layout, such as a sidebar and main content.
5. Defining a Site's Impression with Color and Backgrounds
Color and background are important elements that determine the overall atmosphere of a site.
Background Color (background-color)
This sets the background color of an element. Specifying it on the `body` tag sets the background color for the entire site, creating a unified design.
Gradient (linear-gradient)
This creates a smooth color transition (gradient) in the background. It can express a more profound and modern design than a single solid color.
Translucency (rgba)
This allows you to specify the transparency of a color. This is useful for things like overlaying text on a background image, where you can maintain readability while still allowing the background to show through.
6. Engaging Users with Decorations and Animations
These are techniques for creating an interactive and attractive site.
Rounded Corners (border-radius)
This rounds the corners of a box, giving it a softer impression. It's frequently used in the design of buttons and cards.
Adding Shadows (box-shadow)
This adds a shadow to an element, creating a sense of depth. It's effective for making elements like buttons appear to float.
Card Layout
Create a card-style design that organizes information neatly by combining rounded corners and shadows.
Mouse Hover Effects (:hover)
This changes the style of an element when the mouse cursor is over it, providing visual feedback.
Disabling Buttons (:disabled)
This is the style used when a button should intentionally be unclickable, such as when a form's input is incomplete.
Animation (@keyframes)
This is a powerful feature for adding motion to elements. It allows for a wide range of expressions, such as making an element blink, fade in, or slide in.
Line Under Heading
Use the border-bottom property to draw a line under a heading, which clearly defines sections.
7. A Step Further with Advanced CSS Techniques
Once you've learned the basics, let's also learn techniques for writing more efficient and manageable code.
CSS Variables (:root)
Define values like theme colors as "variables" and reuse them in various places to dramatically improve maintainability.
Scrollable Content (overflow)
This fixes the height of an element and displays any content that overflows with a scrollbar.
Form Design
Styling input fields on focus or customizing radio buttons is important for improving form usability.
Conclusion
In this guide, we've organized and introduced basic CSS properties by purpose. While each function is simple on its own, combining them opens up endless design possibilities.
First, try using this summary article as a reference to experiment with the techniques that interest you. Then, by copying and pasting the code from the individual explanation pages, we hope you'll experience the fun of CSS by seeing it in action.