본문 바로가기
개념/HTML+CSS

HTML) Styling HTML Headings with CSS

by kiseno 2025. 2. 6.
728x90
반응형
SMALL
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>all/Tage select</title>
    <style>
        h1 {color : blue;}
        h2,h3 {font-size:16pt;}
    </style>
</head>
<body>
    <h1>h1 style</h1>
    <h2>h2 style</h2>
</body>
</html>

- `<!DOCTYPE html>`: Declares the document type and HTML version (HTML5).
- `<html lang="en">`: The root element of the HTML document, with an attribute `lang="en"` specifying the language of the document's content (English).
- `<head>`:
  - `<meta charset="UTF-8">`: Specifies the character encoding for the document (UTF-8).
  - `<title>all/Tage select</title>`: Sets the title of the web page as "all/Tage select." This appears in the browser tab or window title. The title seems to be a typo or a placeholder; it might have been intended to convey "Tag Selection" or a similar concept.
  - `<style>`: Contains internal CSS used to style elements within the document.
    - `h1 {color: blue;}`: Applies a blue color to all `<h1>` elements in the document, affecting the text color of these headings.
    - `h2, h3 {font-size: 16pt;}`: Sets the font size of both `<h2>` and `<h3>` elements to 16 points. This rule groups `<h2>` and `<h3>` selectors to apply the same style to both, making their text size uniform across the document.
- `<body>`:
  - `<h1>h1 style</h1>`: Demonstrates the styling of an `<h1>` heading, which will appear in blue as specified in the `<style>` section.
  - `<h2>h2 style</h2>`: Demonstrates the styling of an `<h2>` heading, which will have a font size of 16 points according to the CSS rules. Note: There's no `<h3>` element in the body, but if added, it would also appear with a font size of 16 points, matching the `<h2>` due to the shared CSS rule.

This document is a straightforward example of how to use internal CSS to style HTML elements, specifically headings, by changing their color and font size. It's a basic demonstration suitable for educational purposes or as a template for more complex styling scenarios.

728x90
반응형
LIST