CSS
is one of the components of a website. Like HTML, many people don’t understand it even though it is a very important element. This is simply because it is a field of “computer language” that is difficult for many people to understand.
However, CSS is a “style sheet language” rather than a programming language, and it is not as difficult to learn as a programming language. There are many benefits to using CSS, and if you are the operator of a website or
homepage
, it is one of the languages that you should definitely learn.
Here we will touch on the relationship between CSS and
HTML
, and explain what CSS can do and basic syntax.
What is CSS? Relationship with HTML
CSS and HTML are computer languages that are often explained together, but what is the relationship between them? I will explain each of them below.
What is CSS?
CSS is an abbreviation for “Cascading Style Sheets” and is a “style sheet language” for decorating websites, web pages, and content within a website. For example, you can make adjustments and changes to the design part, such as “coloring or thickening the text,” “changing the layout on the page,” and “inserting a background image.”
What is HTML?
On the other hand, HTML is an abbreviation for “HyperText Markup Language” and is the most basic component that is responsible for the “outline” of the content on a website. It is a markup language for defining the content of a website in a way that computers can understand.
For example, even if you enter text that is the content of a website as is, the computer will not be able to understand which headings are headings and which are paragraphs. Therefore, we use a markup language called HTML to make it easier to understand by instructing the computer, “This is a heading” or “This is a paragraph.”
This makes it easier for search engines to understand the structure and content of your website. In addition to HTML, markup languages include “XML,” “XHTML,” and “SGML,” and mainly refer to languages that allow computers to understand content created by humans.
Use CSS and HTML in combination
CSS and HTML have no meaning or are not effective enough when used alone. On top of the “basic outline” made up of HTML, the design specified by CSS is applied, and the content looks good for the first time.
In other words, by using CSS and HTML in combination, a synergistic effect is created, resulting in one complete piece of content.
Importance of CSS
CSS is a very important technology for SEO, and it also makes maintenance easier and allows you to specify styles. Below, we will explain the importance of CSS.
SEO and CSS
Using CSS can be expected to be advantageous for SEO. Using CSS can reduce the amount of source code written on a single web page, making the page lighter. Reducing the amount of data on your page will make it load faster for search engine web crawlers, and at the same time, it will display faster.
This can also be expected to improve SEO effects from a usability and UX perspective. In this way, simply separating the HTML and CSS on a page as separate files can improve page loading speed, which in turn is advantageous for SEO.
Improved website maintainability
By using CSS, you can easily maintain your website. For example, when decorating a web page or content, it is possible to decorate the HTML directly, but it is necessary to make similar specifications for all web pages within the website.
However, if you create CSS and manage it all at once, you can change similar elements on a web page all at once just by specifying them from CSS. In other words, it is possible to make changes to web pages and decorate content all at once, which can be expected to improve the maintainability of websites.
You can specify the style and easily change it.
CSS allows you to specify styles depending on the media. In other words, the website can be displayed in the display format appropriate for each device, such as when displayed on a PC, smartphone, or tablet.
Since these different media can be displayed in the optimal style for each, and designs can be managed all at once, it is expected to have the potential to be used in a wide range of fields.
CSS so far
For internal
SEO
measures and for the purpose of improving usability, improving the appearance of your website is a very important point. Below, we explain the importance of web design, which also influences search rankings, and the background to the spread of CSS.
CSS was born in 1994
Especially in the early 1990s, when good or bad web design was not reflected in search engine rankings, the appearance of a website was not that important. In the 1990s, when the Internet first became popular, dial-up modems were the norm, and there was a need to make websites lighter and to increase communication speeds as much as possible.
In the early 2000s, when CSS started to become popular
However, since the early 2000s, which was called the first year of broadband, ADSL has appeared and communication lines have gradually started to become faster. Around this time, CSS was also starting to become popular, and “usability,” which makes websites easier to use from a design perspective, began to be considered.
Usability is also one of the factors that determine search rankings
As a result, good or bad web design has come to be considered important from the perspective of usability, as it can be a factor in determining search engine rankings.
Since then, the concepts of “UI (user interface)” and “UX (user experience) = customer experience” have started to attract attention, and the importance of usability in design has increased even more.
Learn CSS so you can freely change the design
Internal SEO measures are important for improving crawlability, and improving usability will lead to improved UX. These measures will help you rank higher in search results and help you gain good reviews from search engines.
Where to write CSS
The main places where CSS can be written are as follows.
Write directly within the HTML page (inline)
The method of writing CSS directly in HTML tags is called an inline style sheet. Write “style=””” in the HTML and specify the selector, property, and value. Although it is easy to understand and use intuitively because it is written directly, it is extremely time-consuming and labor-intensive because each item must be written manually, and corrections and additions cannot be made all at once.
■Inline style sheet description example
<p style=”font-weight: bold;”>Text is displayed in bold</p>
Write in the header of the web page (internal style sheet)
The method of writing CSS in the head tag of a web page is called an internal style sheet. This is useful when you want to apply styles only to specific pages. However, you will no longer be able to load the internal style sheet CSS file from other HTML files. This also requires a lot of time and effort if you want to make corrections or additions because they cannot be done all at once.
■Internal style sheet description example
<head>
<style>
h1{
color: red;
font-size:20px;
}
</style>
</head>
Create a separate CSS sheet (external style sheet)
The method of creating CSS separately and setting it to be read in an HTML file is called an external style sheet. Since you can link multiple web pages, you can modify or add linked pages all at once.
Although it is very efficient compared to inline style sheets and internal style sheets, it has the disadvantage that the display speed becomes slower as the CSS file becomes larger.
■External style sheet description example
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
What can be changed with CSS
From the above, it can be said that it is desirable to understand what can be changed with CSS and be able to actually change it. The following are the main things that can be changed with CSS.
website decoration
You can change how your website looks when displayed in a web browser. For example, you can “make the text larger or bolder”, “change the color of the entire site”, “change the background image or button illustrations”, etc.
Layout changes and adjustments within the website
CSS also allows you to change and fine-tune the layout when displayed on a web browser. Layout means “arrangement” or “arrangement,” and by properly and evenly allocating the layout and arranging the appearance, web pages and content will look better.
Normally, when you display text in a web browser using only HTML code without using CSS, everything is displayed left-aligned and stacked vertically. If this continues, the information will not be organized, and as the amount of information increases, it will become harder to understand the content. In order to resolve and improve these issues, we will use CSS to change the layout and fine-tune the margins.
Using animation
CSS also allows you to use animations. For example, when you hover over a button or image, you can create eye-catching effects such as the color or image changing or slightly indenting. Nowadays, from a usability perspective, it is sometimes used to clearly separate simple images from buttons with links.
Basic syntax of CSS
Next, we will explain what CSS actually is and touch on its basic syntax. CSS mainly consists of the following elements:
First, specify which element it is using the “selector”, then specify which element you want to change using the “property”, and finally specify the “value” to indicate what state you want the property to be in.
The “property” and “value” parts are called “declaration (style declaration)”, and after “property” write “colon =:”, after “value” write “semicolon =;”, and finally Enclose it in curly braces (curly braces). The part enclosed in curly braces (curly braces) is called a “declaration block”, and the part including the selector is called a “rule (rule set)”.
selector
The basic CSS selectors are as follows.
universal selector
The universal selector applies styles to all elements within a website by writing “*=asterisk”. The format is “* {property name: value;}”.
element type selector
Element type selectors apply styles only to specific elements within a website by writing the “element name”. The format is “element name {property name: value;}”.
class selector
The class selector applies styles to elements that have a “class name” specified by the class attribute. The format is “.class name {property name: value;}”. Please note that there is a dot in front of the class name.
id selector
The id selector applies styles to elements that have an “id name” attached to them using the id attribute. The format is “#id name {property name: value;}”. Please note that “# = hash” is added before the ID name.
attribute selector
Attribute selectors apply styles to elements with specific attributes. The format is “element name[attribute name] {property name:value;}”. Please note that the element name is placed before the attribute name, and the attribute name is enclosed in “[ ]=square brackets”.
properties
Since there are many types of CSS properties depending on their functions, we will introduce only the basic ones here.
color
Colors are mainly specified by writing the “color” property, such as the font color and background color.
| property name | explanation |
| color | Specify font color and foreground color |
| background-color | Specify the background color |
| border-color | Specify the border color |
| border-top-color | Specify the color of the top border |
| border-bottom-color | Specify the color of the bottom border |
| outline-color | Specify the outline color |
font
Fonts mainly specify size, thickness, font, etc. by writing the “font” property.
| property name | explanation |
| font | Specify fonts all at once |
| font-style | Specify italics and italics for the font |
| font-weight | Specify font weight |
| font-size | Specify font size |
| font-family | Specify the font type |
list
By writing the “list” property in a list, you can specify the “marker” that will be displayed at the beginning of the string.
| property name | explanation |
| list-style | Specify markers all at once |
| list-style-type | Specify the type of marker character |
| list-style-image | Specify the marker image |
| list-style-position | Specify the marker display position |
ruled line
By writing the “border” property, you can specify each border line, top, bottom, left, and right.
| property name | explanation |
| border | Specify border color, thickness, style, etc. all at once |
| border-color | Specify the border color |
| border-width | Specify the thickness of ruled lines |
| border-style | Specify the border style |
By the way, if you want to change the top, bottom, left, and right borders individually, you can do so by writing the “position property” in the 〇〇 part of “border-〇〇-color.” (In this example, the last item is “color”, so you can change the color)
position property (position property)
| property name | explanation |
| top | above |
| bottom | under |
| left | left |
| right | right |
outline
For outlines, specify to display a line outside the element by writing the “outline” property. The “outline” property displays a line further outside the line displayed by the “border” property.
| property name | explanation |
| outline | Specify outline color, thickness, style, etc. all at once |
| outline-color | Specify the outline color |
| outline-width | Specify the thickness of the outline |
| outline-style | Specify outline style |
background
For the background, specify the background for the entire website by writing the “background” property.
| property name | explanation |
| background | Specify backgrounds all at once |
| background-color | Specify the background color |
| background-image | Specify the background image |
value
Values in CSS include alphanumeric characters, symbols, and keywords, and may or may not include units. Here we will explain the values of “numeric data type” when changing the design of a website. Since there are a large number of values for numeric data types, we will introduce some representative ones.
integer
To specify an integer value in CSS, write “<integer>”. An integer is a decimal number up to 9, including zero. For example, values including negative values such as “1120” and “-1120” are considered “integers”. By the way, the decimal system is a way of representing numbers that uses 10 as the base and increases a new unit every 10 times. For example, 1120 means “1000+100+20+0”.
numerical value
A number in CSS is a real number, and “<number>” is written to specify a real number value. In addition to integers, real numbers include decimal places and can also include a minus sign. For example, “1120”, “-1120”, “1.120”, etc. correspond to real numbers.
size
To specify the size value in CSS, write “<dimension>”. The size is “<number>+unit”. For example, “1120px (pixels)”, “1120em (em)”, “1120cm (centimeter)” etc. We also use dimensions to represent the following units:
length
The “<length>” type is used to specify length values in CSS. The main units are as follows. There are also two types of length in CSS: absolute and relative.
■Unit of length
| property name | explanation |
| em | font size |
| rem (root em) | Font size at the top level (root) |
| lh | row height |
| rlh (root lh) | Row height at the top level (root) |
etc.
time
The “<time>” type is used to specify time values in CSS. The main units are as follows.
■Unit of time
| property name | explanation |
| s | seconds |
| ms | Millisecond (0.001 second = 1/1000th of 1 second) |
angle
The “<angle>” type is used to specify angles in CSS. The main units are as follows.
■Unit of angle
| property name | explanation |
| degree | degree |
| turn | Zhou |
etc.
resolution
The “<resolution>” type is used to specify resolution in CSS. The main units are as follows.
■Resolution unit
| property name | explanation |
| dpi (dots per inch) | Number of dots in 1 inch |
| dpcm (dots per cm) | number of dots in 1 cm |
| dppx (dots per px) | number of dots in 1 pixel |
percent
To specify a percentage in CSS, write “<percentage>”. The following are special data types:
color
To specify a color in CSS, write “<color>”. You can also specify everything including the background color.
image
To specify an image in CSS, write “<image>”. You can specify two-dimensional images that can be handled with CSS.
position
To specify the position in CSS, write “<position>”. “<position>” can indicate the two-dimensional position of the object.
CSS and multi-device compatible
By making good use of CSS, you can make it compatible with multiple devices. Multi-device compatibility refers to the ability to use the same services in the same way on different devices, such as PCs, smartphones, and tablets. In order to achieve multi-device support, it is necessary to understand the following main points.
What is responsive design?
Responsive design is a design that automatically adjusts the size of web pages and content within web pages according to the screen size of each device, and optimizes the screen display for easy viewing.
“Response” in English means “response” or “reaction,” and “Responsive” means “highly responsive.”
viewport settings
“Viewport” refers to the “display area,” and by setting this part, the screen display size is optimized for each device.
If you don’t set a viewport, it will default to the size of the website you created, which may be too large or too small for optimal screen viewing. In other words, by having a viewport setting, you can make it compatible with multiple devices.
media query
Media query refers to a function that allows you to switch and apply the most appropriate CSS depending on the conditions of each different device. Flexibly adapt to different device environments and optimize design and content for display.
For example, if the device is a PC, CSS 1, if it is a smartphone, CSS 2, etc. You can change the CSS as appropriate depending on the device. By setting a branching point called a breakpoint, the CSS description changes and the display changes at that point.
How to learn CSS
Here are some ways to learn CSS:
Books and reference sites
As a familiar way to learn CSS, we recommend that you start by absorbing knowledge from books and reference sites. Just by looking at the content described in books and reference sites, you can somehow acquire knowledge. First of all, it is important to get a feel for it, and the basics are to start with such steady efforts.
Video service
Once you have studied CSS to a certain extent, we recommend using video services to step up your learning. Videos often explain content that is difficult to understand in books in easy-to-understand terms, making them perfect for reviewing what you have studied so far. It can be said to be a good medium for consolidating knowledge as it also serves as a review.
specialized school
For those who think, “I don’t understand even if I study on my own,” or “I want to have an instructor teach me everything from the beginning so I don’t waste time,” one option is to take a course at a vocational school.
Many people of the current generation place emphasis on “time performance” and some people try to save time by being properly taught from the beginning. It is recommended for such people to attend a specialized school.
summary
While HTML is responsible for the “basic content components (outline)”, CSS is responsible for the decoration within a website. HTML and CSS are commonly used in combination, and both are important website components.
In recent years, the usability of a website’s design also affects search results, so CSS has become as important as HTML.