HTML and CSS required when creating a website.
Many people may have heard of it, but don’t know what it actually is or how to use it.
In today’s website production, the meaning and structure of a document is set using HTML, and the visual style and design is set using CSS, so knowledge of CSS is essential.
This article provides an easy-to-understand explanation of the basics of CSS and how to write it, so even beginners can easily learn CSS.
What is CSS? If you are thinking of learning this, please refer to it.
What is HTML?
HTML
is required along with CSS when creating a website.
HTML is an abbreviation for HyperText Markup Language, and is a language used to specify the structure of the text and layout of a website.It is written by surrounding it with tag names as shown below.
<tag name>※※※※※</tag name>
For example, the heading “What is HTML?” would be written using the heading tag <h1> as shown below.
<h1>What is HTML? </h1>
By combining it with CSS, which will be explained later, you can make the characters and layout specified in HTML more legible and beautiful, so it’s a good idea to remember this as well.
Details of HTML are explained on the following page.
Related article:
What is CSS?
CSS
is an abbreviation for “Cascading Style Sheets” and is also sometimes called a style sheet.
It is responsible for adding decorations and adjusting the layout to the text structure created in HTML, and adjusting the appearance of the website.
It’s a good idea to remember that HTML is responsible for the text structure of a website, and CSS is responsible for the design.
Many of the websites we see on a daily basis are created using a combination of HTML and CSS.
History of CSS
CSS was first proposed by Haakon Wium Lee in 1994, and “CSS1” was born in 1996.
Since then, it has been updated to “CSS2” and “CSS2.1,” and now “CSS3” is the latest version.
What you can do with CSS
Let’s take a closer look at what you can do with CSS.
Changing font color/size
You can change the color and size of text created with HTML, adjust line spacing, etc.
By default, the font color is black and the size is 16px, so a website created using only HTML without using CSS will be a monotonous page with black fonts of the same size aligned to the left.
You can use CSS to make important parts stand out by increasing their size and making them stand out.
Change layout
You can change the layout by changing the position of elements such as text, images, and tables that make up your website.
There are two typical CSS layout structures: “grid layout” and “flexbox”.
Grid layout allows you to specify the size and arrangement of elements within a block by creating a layout using two axes: vertical and horizontal (column and row).
Flexbox is a feature that allows you to easily create horizontal layouts, and as the name suggests, allows for flexible layouts.
Up until now, floats and inline blocks have often been used to arrange elements horizontally, but Flexbox is so easy to create that it is said to be the new standard for horizontal layouts.
decoration
You can use CSS to decorate your website so that it’s more well-decorated and easy to read than a row of letters.
The typical decoration functions of CSS are as follows.
- make bold
- make it italic
- Specify text color
- Specify background color
- make a table
- underline
- Place the button
- Specify font
animation
Animations that could only be achieved through difficult programming can now be achieved using CSS.
For example, there are text animations where each character appears at a different time, and images that move when the mouse is hovered over them.
There are two types of CSS animations. The first one, “animation,” allows you to make detailed settings such as looping the animation playback.
The second is “transition”, which is played only when an action such as a mouseover occurs.
Adjusting margins
CSS allows you to freely control margins and text line spacing.
I feel that having white space makes the site easier to read and creates a better balance than having text and images all over the site.
Margins are considered an important part of a website’s design, making them easier to see and emphasizing content, so they are one of the CSS elements you should keep in mind.
Basic how to write CSS
Once you understand what CSS is, you can learn how to write basic CSS.
CSS is made up of the following three elements.
- selector
- properties
- value
selector
Selectors represent where CSS is applied.
For example, it refers to tag names such as “h1, h2, p, img”, class names such as “class=”attribute name””, and ID names.
properties
This refers to the decoration (style) that you want to apply to the part specified by the selector, such as changing the color of the text or drawing an underline.
There are countless types of properties in CSS, but we will introduce some of them.
| property name | Content |
| font-size | Specify font size |
| font-weight | Specify font weight |
| text-align | Specify line alignment and even distribution |
| color | Specify text color |
| margin | specify margins |
| border | Specify border |
| background-color | Specify background color |
| background-image | Specify background image |
value
Specifies numerically how to change the properties applied to the selector.
For example, you might want to change the font color to red or set the font size to 24px.
By the way, there are two ways to specify colors: one is a hexadecimal number like #ff0000, and the other is an RGB value (the initials of red, green, blue) like rgb(255,0,0).
Specific CSS code example
Below are the basics of how to write CSS.
selector{
property: value;
}
How to write CSS
Once you understand the basic structure, you can enter selectors, properties, and values according to the decoration you want to display.
h1 {
font-size: 20px;
}
p {
font-size: 20px;
font-weight: bold;
color: #ff0000;
}
img {
border-width: 2px;
width: 150px;
height: 300px;
}
body {
background-color: #00ff00;
}
Where to write CSS
Next to how to write CSS, let’s take a look at where to write it.
CSS does not work on its own; it is used in conjunction with HTML.
There are three places to write CSS.
1. Write inside HTML tag
2. Create and write a style tag in the HTML file
3. Create a CSS file and read it into the HTML file
Currently, the most popular method is to create a third CSS file and read it into the HTML file.
If HTML and CSS are mixed, even if only the CSS is modified, there is a risk that the HTML will be deleted or rewritten by mistake and the website will collapse.
Separating the HTML and CSS files has the advantage of avoiding such troubles.
Points to note when writing CSS
It is important to write CSS in a way that is easy to understand, not just for the person who wrote it, but for anyone looking at it.
If you write CSS that is difficult to understand when modifying or updating, it will take more time, so be careful.
Do not use full-width spaces or full-width characters
The code is made up of half-width characters, so using double-width spaces or characters will cause an error.
Please note that half-width and full-width characters are recognized as different in the program.
Enclose properties and values in {} (curly braces)
Inside {}, you can write multiple contents that you want to display with CSS, and even if one of the {} is missing, the CSS will be corrupted and will not be displayed.
What is especially easy to forget is the part that closes with } at the end, so be careful when writing it.
Add a semicolon “;” at the end of the value
Don’t forget to include {} (curly braces) and a semicolon “;” at the end of the value.
The semicolon is a symbol that indicates that the definition you want to display ends here, so if you forget to include it, the program will recognize it as if the definition continues forever, and it will not be applied correctly.
summary
We introduced the basics and code examples of CSS needed to decorate a website.
By learning CSS along with HTML, you will be able to organize the design and layout of your website and create a site that is easy to understand and convey information to users.
To master CSS, the first thing you need to do is memorize the basic grammar.
If you proceed with website production without knowing the basics, the quality and production speed will be affected.
Once you have learned the basics, you can gradually learn and master the hundreds of CSS properties that are said to exist.