CSS is one of the website components . Like HTML , it's a very important element, but many people don't understand it. This is because it is a field of "computer language" that is difficult for many people to understand.
However, CSS is not a programming language but a "stylesheet language" and is not as difficult to learn as programming languages.
The benefits of using CSS are great, and it can be said that it is one of the languages that you should definitely remember if you are an operator of a website or homepage .
Here, we will touch on the relationship between CSS and HTML, and explain what CSS can do and basic grammar.
What is CSS? Relationship with HTML
CSS and HTML are computer languages that are often explained together, but what kind of relationship do they have? We will explain each 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 websites.For example, you can make adjustments and changes in the design part, such as ``coloring or making the text bold'', ``changing the layout within the page'', and ``inserting a background image''.
What is HTML
On the other hand, HTML is an abbreviation for "HyperText Markup Language", and it is the most basic component responsible for the "outline = skeleton" of the content on the website.A markup language for defining the contents of a website so that computers can understand it.
For example, even if you enter the text that is the content of a website as it is, the computer cannot understand where the heading is and where the paragraph is.
Therefore, by using a markup language called HTML to instruct the computer side that "This is the heading" and "This is the paragraph", we will make it understandable.
This makes it easier for search engines to understand the structure and content of the website.
In addition to HTML, markup languages include "XML", "XHTML", "SGML", etc., and mainly refer to languages that allow computers to understand content created by humans.
Combine CSS and HTML
CSS and HTML are meaningless when used on their own, and cannot be fully effective.
On top of the "basic = outline (skeleton)" composed of HTML, the design specified by CSS is applied, and the content looks good for the first time.
In other words, the synergistic effect is created by using CSS and HTML in combination, and it becomes one complete content.
Why is CSS important
For internal SEO measures and for the purpose of improving usability, it is a very important point to arrange the appearance of the website.
Below, we explain the importance of web design, which affects 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 didn't affect search engine rankings, it didn't matter how good the website looked.
In the 1990s, when the Internet had just started to spread, dial-up modems were the mainstream, and there was a need to reduce the weight of the website and increase the communication speed as much as possible.
Early 2000s when CSS began to spread
However, ADSL appeared after the early 2000s, which was called the first year of broadband, and communication lines began to gradually increase in speed.
Around this time, CSS was also beginning to spread, and "usability", which makes websites easier to use from the design aspect, began to be considered.
Usability is also one of the factors that determine search rankings
As a result, from the aspect of usability, the quality of web design can be a factor that determines the ranking of search engines, and it has come to be emphasized.
Since then, the concepts of "UI (user interface)" and "UX (user experience) = customer experience" have also attracted attention, and the importance of usability in design has increased more and more.
Related article: [What is UI/UX? ] Explains the meaning and difference of each, and how to improve the design
Let's learn CSS and be able to change the design freely
Internal SEO measures are important for improving crawlability, and improving usability leads to improving UX.
These measures lead to obtaining good evaluations from search engines in order to aim for high ranking in search results.
What you can change with CSS
From the above, it is desirable to understand what can be changed with CSS and be able to actually change it. The main things that can be changed with CSS are:
・Website decoration
・Layout change and adjustment within the website
・Use of animation
Website decoration
You can change the appearance of the website when it is displayed on the web browser. For example, you can ``make the text bigger or bolder'', ``change the color of the entire site'', ``change the background image or button illustration'', etc.
Layout changes and adjustments within the website
CSS also allows you to change and fine-tune the layout when displayed in a web browser.
Layout means "arrangement" or "arrangement", and by laying out the layout evenly and arranging the appearance, the appearance of the web page and content will be improved.
Normally, when text is displayed on a web browser using only HTML code without using CSS, it is displayed left-aligned and arranged vertically.
In this way, information cannot be organized, and as the amount of information increases, it becomes difficult to grasp the contents. In order to solve and improve them, we will change the layout and fine-tune the margins with CSS.
Using Animation
Animation can also be used with CSS. For example, when you move the mouse pointer over a button or image, you can create eye-catching effects such as a floating color or image, or a slight dent.
These days, from the aspect of usability, it is sometimes used for the purpose of clearly separating simple images and buttons with links.
Basic syntax of CSS
Next, I will explain what CSS actually is and touch on basic grammar. CSS is mainly composed of the following three elements.
・ Selector
・ Property
・ Value
First, specify which element it is with "selector", then specify which one you want to change with "property", and finally specify what state you want the property to be in "value".
The part of "property" and "value" is called "declaration (style declaration)", write "colon =:" after "property", write "semicolon =;" after "value", 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 selectors is called a "rule (rule set)".
Selector
The basic CSS selectors are:
・ Universal selector
・ Element selector
・ Class selector
・ id selector
・ Attribute selector
Universal Selector
Universal selector applies style to all elements in the 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 describing the "element name". The format is "element name {property name: value;}".
Class selector
The class selector applies the style to the element with the "class name" by the class attribute. The format is ".class name {property name: value;}". As a point of caution, ". = dot" enters before the class name.
Id selector
The id selector applies the style to the element with the "id name" by the id attribute. The format is "#id name {property name: value;}". As a precaution, "# = hash" is entered 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;}". As a point of caution, the element name is entered before the attribute name, and the attribute name is enclosed in "[ ]=square brackets".
Property
Since there are so many types of CSS properties by function, we will focus on the basic ones here.
・ Color
・ Font
・ List
・ Ruled
・ Outline
・ Background
Colour
By describing the "color" property, you can mainly specify the text color, background color, etc.
font
The font mainly specifies the size, thickness, typeface, etc. by describing the "font" property.
list
The list specifies the "marker" displayed at the beginning of the string by describing the "list" property.
Ruled line
For borders, specify the top, bottom, left, and right borders by describing the "border" property.
By the way, when changing the top, bottom, left, and right ruled lines by themselves, you can change it by writing the "position property (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)
Outline
The outline specifies whether to display a line outside the element by describing the "outline" property.
The "outline" property displays a line outside the line displayed by the "border" property that displays the border.
Background
For the background, specify the background for the entire website by describing the "background" property.
Percent
Write "<percentage>" for percentage specification in CSS. Special data types include:
・ Color
・ Image
・ Position
Colour
Specify "<color>" to specify the color in CSS. You can also specify the background color, etc.
image
Specify "<image>" to specify an image in CSS. You can specify a two-dimensional image that can be handled with CSS.
Position
To specify the position in CSS, describe "<position>". "<position>" can indicate the two-dimensional position of the object.
Summary
While HTML is responsible for the "basic of content components = outline (skeleton)", CSS is responsible for decoration within the website.
HTML and CSS are commonly used in combination, and both are important components of a website.
In recent years, the usability of website design also affects search results, so CSS has become as important as HTML.