HTML Introduction | HTML Extensions | HTML Style Sheets (CSS)

Tags:

What is CSS?

CSS stands for Cascading Style Sheets. CSS is a language that defines how HTML elements should appear in various media.

Starting with HTML4, it became possible to separate all such formatting settings from the HTML document.

How to apply CSS

The ways to apply CSS styles to an HTML document are as follows.

  • Inline style
  • Internal style sheet
  • External style sheet

Inline style

Inline CSS is a method of applying CSS styles by using the style attribute inside an HTML element. This inline style can apply styles only to that element.

<p style="color:green; text-decoration:underline">이 글은 녹색이고 밑줄이 있습니다.</p>

Run code

Internal style sheet

The method using internal CSS specifies styles by using the <style> tag inside the <head> tag of the HTML document. This internal style sheet can apply styles only to that HTML document.

<style>
    body { background-color: lightyellow; }
    p { color: red; text-decoration: underline; }
</style>

Run code

External style sheet

The method using external CSS lets you change the style of an entire website from a single file. Include the external style sheet with the <link> tag inside the <head> tag of every web page to which the style should be applied.

<link rel="stylesheet" href="/external_style_sheet.css">

Run code

CSS application priority

When the style application methods described above are mixed, the style finally applied is determined in the following order.

  1. Inline CSS
  2. Internal / external CSS
  3. Web browser default styles

For example, a tag with an inline style always uses the inline style regardless of internal or external style sheets. Also, for internal and external style sheets, the style sheet applied last is used.

For more details, see CSS selectors.

CSS selectors

Representative selectors used to select HTML elements to which styles will be applied are as follows.

  • HTML element selector
  • ID selector
  • Class selector

HTML element selector

You can select the target for applying CSS by specifying the tag name of the HTML element.

p { color: red; font-size: 14px; }

In the example above, the style is applied to all elements whose tag is <p>.

ID selector

The ID selector is used to select an element whose ID is specified as the target for applying CSS. This selector selects only the element that corresponds to a specific ID among the many elements included in a web page.

At this time, write a hash (#) before the attribute value to select.

<style>
  #text { color: blue; font-weight: 600; }
</style>
...
<p id="text">이 문장은 파란색이고 두껍습니다.</p>

In the example above, the style is applied to all elements whose id is text.

In HTML and CSS, using the same ID for multiple elements on one web page may work without obvious problems. However, if JavaScript work is done with these duplicate IDs, errors can occur. Therefore, it is better to use different IDs for all elements on one web page or use classes.

Class selector

The class selector is used to select multiple elements in a certain group at once. Such a group is called a class, and it selects all elements that have the same class name.

At this time, write a period (.) before the attribute value to select.

<style>
  .text { color: lime; text-decoration: overline; }
</style>
...
<p class="text">이 문장은 파란색이고 두껍습니다.</p>
<p>이 문장은 스타일 스타일이 적용되지 않았습니다.</p>
<p class="texts">이 문장도 파란색이고 두껍습니다.</p>

In the example above, the style is applied to all elements whose class is text.