본문으로 건너뛰기

<style> Tag

<style> Tag

The <style> tag contains embedded style information for a web document. This tag allows you to add CSS styles directly within an HTML document.

How to Use

The <style> tag should be located within the <head> section. You can add CSS rules here to apply styles to various elements on the web page.

<style> tag example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello there!</h1>
</body>
</html>

In the example above, the web page's background color is set to light blue, the text color of the <h1> tag is white, and it is aligned to the center.

Advantages of the <style> Tag

  • It allows you to apply styles directly to the web page without the need to reference a separate CSS file.

  • It is useful when you want to apply styles to a specific page only.

Disadvantages of the <style> Tag

  • In complex websites, it might be hard to maintain as the same styles may need to be applied repeatedly across multiple pages.

  • It can affect the loading time of the web page. The more style information there is, the larger the page size becomes.

Summary

  • The <style> tag is used to add embedded style information to a web document.

  • This tag is usually located within the <head> section.

  • While it eliminates the need to reference a separate CSS file, it can be difficult to maintain in complex websites.

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!