CSS 101: How to get the layout, colors, and fonts you want

programming

"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

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
h1 { 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):

Ministry of Internal Affairs and Communications | Press Release | Approval for changes to the Japan Broadcasting Corporation broadcasting reception fee exemption criteria
The Ministry of Internal Affairs and Communications today consulted with the Radio Regulatory Council (Chairman: Iwao Sasase, Professor Emeritus, Keio University) regarding the approval of changes to the NHK broadcasting reception fee exemption criteria, which were requested by the NHK (Chairman: Nobuo Inaba) pursuant to Article 64, Paragraph 2 of the Broadcasting Act (Act No. 132 of 1950).
www.soumu.go.jp

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
h2 { 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 text
  • margin: 20px;: Add outer margin
  • padding: 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&#039;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!

Copied title and URL