"I made a homepage, but it looks a bit plain..."
"I want to change the color and text, but how do I do that?"
Such problems for beginners can be easily solved by learning CSS.
CSS is used to applyThe magical art of adding designis.
In this article,From the basics of CSS to how to adjust layout, color, and textto,
In language that even elementary school students can understandEasy-to-understand explanations from a professional perspectiveI will.
If you want to be able to create the designs you want, be sure to read to the end.
- What is CSS? How it makes design magic happen
- Learn the basic structure of CSS
- How to specify colors and recommended color schemes
- Tips for using fonts
- Basic layout techniques
- Common CSS errors and how to fix them
- A profile card made entirely from CSS (complete code)
- Summary: CSS is the first design language you should learn
What is CSS? How it makes design magic happen
Conclusion: CSS is a tool for styling HTML.
CSS stands for "Cascading Style Sheets."
A system for adding color, text, layout, and other decorations to pages created with HTMLis.
For example, even if you create an "introduction page" using HTML,
If the text was black on a white background, all left-justified… it would be a bit boring.
So using CSS you can make the following changes:
- Change the font size and color
- Centering images and text
- Freely adjust background color and margins
CSS is,An important role in designing appearance by combining with HTMLI have.
Learn the basic structure of CSS
Conclusion: Write it as a set of selector, property, and value
CSS is written in the following format:
1 | h 1 { color : red ; font-size : 24px ; } |
There are three elements to this syntax:
- selector: The HTML tag to be targeted (e.g. h1)
- Properties: What you want to change (e.g. color, font size)
- value: The actual content to be specified (e.g. red, 24px)
You can specify multiple properties for one selector.
How to specify colors and recommended color schemes
Conclusion: Colors can be specified using keywords, hexadecimal numbers, or RGB.
In CSS, there are three ways to specify a color:
- By color name:
color: red;
- In hex:
color: #ff0000;
- Specify in RGB:
color: rgb(255, 0, 0);
Some common background color combinations:
- Black background + white text (highly readable)
- White background + dark gray text (easy on the eyes)
- Blue background + yellow text (when you want to draw attention to it)
Official reference material (Color Universal Design):

Tips for using fonts
Conclusion: You can control the impression with font-family and font-size
The font isKey elements that determine the impression of a pageis.
1 | body { font-family : "Arial" , sans-serif ; font-size : 16px ; } |
font-family
: The type of font you want to use (Gothic, Mincho, etc.)font-size
: Font size (px, em, rem)
You can also use bold and italics:
1 | h 2 { font-weight : bold ; font-style : italic ; } |
Basic layout techniques
Conclusion: Just remember margin, padding, and text-align
The positioning of text and images can be controlled with the following CSS:
text-align: center;
: Center the textmargin: 20px;
: Add outer marginpadding: 10px;
: Add inner margin
example:
1 | .box { background-color : lightblue; padding : 20px ; margin : 10px auto ; width : 300px ; text-align : center ; } |
Specify centering, margins, and background color as a setThe key point is...
Common CSS errors and how to fix them
Conclusion: Selector errors and spelling mistakes are the main culprits
Here are some common CSS stumbling blocks:
- Typo in selector name (e.g.
.mainn
(I end up writing it like this.) - Misspelled property name (e.g.
Color
) - Forgot to add a semicolon
Solution:
- Use the completion feature of your editor (such as VSCode)
- Check the CSS reflection status with Google Chrome's validation tool
A profile card made entirely from CSS (complete code)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <! DOCTYPE html> < html lang = "ja" > < head > < meta charset = "UTF-8" > < title >プロフィール</ title > < style > body { background-color: #f5f5f5; font-family: "Arial", sans-serif; text-align: center; } .card { background-color: white; padding: 20px; margin: 50px auto; width: 300px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .card img { width: 100px; border-radius: 50%; } .card h1 { font-size: 24px; color: #333; } .card p { font-size: 16px; color: #666; } </ style > </ head > < body > < div class = "card" > < img src = "me.jpg" alt = "プロフィール画像" > < h1 >Taro Yamada</ h1 > < p >I'm an engineer who loves web development.</ p > </ div > </ body > </ html > |
Summary: CSS is the first design language you should learn
CSS is a basic skill for creating visual appearance.
- You can freely change the color, text, and layout.
- As long as you follow the rules, even beginners can create beautiful pages.
- Just select a tag, set the properties and values, and you're done!
By combining HTML and CSS, you can create any web page you want!