Step 3

CSS Compound Rules

CSS compound rules involve selectors that target HTML elements based on their relationship within the document's structure. For instance, using the parent/child selector, you can style specific elements that are nested within others. This allows for precise targeting of elements based on their hierarchical placement in the HTML document.For example, if you utilize the h2 tag within both the header and the body sections, you can individually style of each h2 element. In this senario, the parent elements would be the header or the body, while h2 would be the child element. This capability extends to other HTML tags as well, such as emphasis and strong tags.This feature is valuable for applying styles selectively and maintaining a structured and consistent design across a website.


HTML Symbols

HTML symbols, also known as character entities or entities, are special codes used to display symbols, characters, and glyphs that may not be readily available on the keyboard or may have specific meanings in HTML syntax. For instance, &amp; represents the ampersand symbol (&), &lt; represents the less-than symbol (<), and &copy; represents the copyright symbol (©). These symbols enhance the presentation and functionality of web content, such as displaying mathematical symbols, arrows, or special characters, and are essential for accessibility and internationalization.


Span Tag

The span tag in HTML is an inline element used to apply styling or differentiate specific parts of text within a larger block of content. Unlike block-level elements like div, span does not create a new line or section in the document flow, making it ideal for applying styles to small sections of text or inline elements. Developers commonly use the span tag in conjunction with CSS to target and apply styles, such as changing text color, font size, or background color, to specific words, phrases, or elements within a paragraph or heading.


Stylizing Links

Stylizing tags in CSS involves applying different styles to HTML anchor (a tag) elements to create interactive and visually appealing links. The a selector targets all anchor elements, while pseudo-classes like :visited, :hover, and :active allow for styling based on the link's state. For example, a:visited styles visited links, a:hover styles links when the cursor hovers over them, and a:active styles links when they are being activated (clicked). This allows designers to enhance user experience by providing visual feedback and improving accessibility for navigating within web content.