Using Selector to Style HTML Elements

The chapter explains how to use CSS selectors to style HTML elements efficiently, avoiding unnecessary tags.

### Using Selectors to Style Elements in CSS
CSS Selectors provide a more efficient way to style elements on web pages. The <span> tag can be used as a colorless tag to enclose text for CSS styling, without any specific meaning or function. Unlike <div>, <span> does not create a line break, making it suitable for enclosing text. By using CSS Selectors and the <span> tag, the text on the web page can be easily styled, for example, to appear in bold.

### Using CSS to Manage JavaScript Styling
It's impractical to manually replace or style JavaScript in a page, especially in a large number of locations. CSS offers a fantastic feature to help resolve this problem. By using CSS, you can easily manage the styling of JavaScript and avoid the challenges of manual replacement in a large volume of locations.

### Using CSS to Select Elements by Class
CSS uses the "class" attribute to select and apply styles to specific HTML elements. Simply using the tag name in the CSS selector will not target elements by their class. To select by class in CSS, the period (.) is used before the class name, followed by the style declaration. In the given example, using ".js" in the CSS file will apply the style to all elements with the class "js".

### Using CSS to Style Your Web Page
CSS can easily change the font-weight to bold for all tags with the class value of js. By repeating a line of code, CSS can quickly apply changes to numerous elements, such as turning the font color to red for 100 million locations. In this chapter, the integration of CSS with HTML is demonstrated through the use of style as an attribute and a tag, as well as the selection of multiple tags using a selector.

### Using CSS Selectors to Style Web Page Content
* 🎨 The text introduces the concept of CSS selectors as a **more efficient way to style web page content** compared to using individual tags.
* 🔤 The example demonstrates how to style a specific text (e.g., "JavaScript") on a web page in **bold** using the `<span>` tag and inline CSS.
* 🚫 The text highlights the **limitation of this approach** when needing to style **multiple instances of the same text** across a **large web page**.
* 🎭 Introducing the concept of CSS classes, the text explains how to create a CSS class named "**js**" and apply it to **all instances of the target text**.
* 🎩 By using the `.js` selector in the CSS code, it becomes possible to **style all elements with the class "js" at once**, rather than individually.
* 🌟 This method is praised for its efficiency, as it allows for **easy and quick styling changes** across multiple elements by simply updating the CSS class.
* 📝 The text concludes by summarizing the two main ways to insert CSS into web pages: using the `style` attribute and using **selectors to apply styles to multiple elements**.

WEB2 JavaScript - 10.CSS 기초 (style 태그)

일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다.

채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNaPCfjS0OtBGosccoJssHdaB5i8H73dKI9jimeybLU11Hzb6a86EAaDFkM6bYaBwIDAQAB
