CSS Flashcards
What was the primary limitation of early HTML that led to the development of CSS?
The primary limitation of early HTML was its limited styling capabilities, requiring styles to be embedded within each HTML element. This made it difficult to maintain consistent styling across a website and led to repetitive code. CSS was developed to separate content from presentation, allowing for easier maintenance and consistent styling.
How does the separation of style from content in CSS support the DRY principle in web development?
The separation of style from content in CSS supports the DRY principle by allowing styles to be defined once in CSS files and then applied to multiple HTML elements across a website. This avoids repetition in coding, as developers don’t need to embed style information within each HTML element. Instead, they can make global changes to the website’s appearance by simply updating the CSS, enhancing the maintainability and consistency of the website’s design.
What are the two main components of a CSS rule and what roles do they play?
The two main components of a CSS rule are the selector and the declaration block. The selector targets the HTML elements that the rule will apply to, and the declaration block contains one or more declarations that define the properties and values to style those elements. For example, in body { font-family: Tahoma, Arial, sans-serif; }, body is the selector targeting the body element, and the declaration block contains the property font-family with its value set to Tahoma, Arial, sans-serif.
Given the CSS rule h1 { color: red; } and the HTML element <h1>Today’s Specials</h1>, describe how this CSS rule is applied and its effect on the HTML element.
The CSS rule h1 { color: red; } targets all <h1> elements in the HTML document. The selector h1 specifies that the rule applies to all elements with the <h1> tag. The declaration block { color: red; } sets the color property of these elements to red. Therefore, the text “Today’s Specials” in the <h1> element will be displayed in red color.</h1></h1></h1>
How does the class attribute in the CSS rule .large { font-size: 16pt; } and the HTML element <p class="large">…</p> work together to style the paragraph?
The CSS rule .large { font-size: 16pt; } defines a class named large with a font size of 16 points. The class selector .large targets any HTML element with the class attribute set to large. When this class is assigned to a paragraph element, as in <p class="large">…</p>, the paragraph’s font size is styled to be 16 points, applying the style defined in the .large class to the paragraph.
What is the effect of combining a tag and class selector in CSS, as shown in p.large {…} with the HTML element <p class="large">…?</p>
The CSS rule p.large {…} is a combination of a tag selector (p) and a class selector (.large). This combination targets only <p> elements that also have the class large. It allows for more specific styling, as the rule will only apply to paragraph elements with the large class, and not to other elements with the large class or to all paragraph elements.</p>
Explain how the element ID selector works in CSS, as demonstrated in the rule #p20 { font-weight: bold; } and the HTML element <p>….</p>
The CSS rule #p20 { font-weight: bold; } uses an ID selector, indicated by the # symbol, to target an element with a specific ID. In this case, the selector #p20 targets any element with the id attribute set to p20. The declaration block { font-weight: bold; } sets the font weight of this element to bold. Therefore, the text in the <p> element will be displayed in bold font. This type of selector is used for styling unique elements, as IDs should be unique within a page.</p>
How does the :hover pseudo-class work in CSS, as demonstrated in the rules p:hover, a:hover { background-color: yellow; }?
The :hover pseudo-class in CSS is used to apply styles to an element when the mouse pointer is over it. In the given example, p:hover, a:hover { background-color: yellow; }, this rule targets both <p> and <a> elements. When the user hovers their mouse over either a paragraph (<p>) or an anchor (<a>) element, the background color of that element changes to yellow. This pseudo-class is often used to provide visual feedback to users, such as highlighting interactive elements.</a></p></a></p>
Explain the difference in styling for a link that has been visited (a:visited) and a link that has not been visited (a:link), as demonstrated in the CSS rules a:visited { color: green; } a:link { color: blue; }.
The CSS pseudo-classes :visited and :link are used to style links differently based on whether they have been visited or not. The rule a:visited { color: green; } applies a green color to all <a> elements (links) that have been visited by the user, indicating that the user has previously clicked on these links. On the other hand, a:link { color: blue; } applies a blue color to all </a><a> elements that have not been visited, helping users distinguish between new and previously visited links. This distinction enhances user experience by visually communicating the state of the links.</a>
If you wanted to hide an element from the page without removing it from the document flow, which CSS property would you use and how?
To hide an element from the page without removing it from the document flow, you would use the visibility property in CSS and set it to hidden. For example, div { visibility: hidden; } would hide a <div> element, but it would still take up space in the layout, unlike display: none, which removes the element from the document flow.</div>
What is the difference between the position property values absolute and relative in CSS?
In CSS, the position property can be set to absolute or relative among other values. An element with position: absolute is positioned relative to its nearest positioned ancestor, not affecting the layout of other elements. An element with position: relative is positioned relative to its normal position, allowing you to adjust its position without affecting the document flow.
Explain the difference between specifying a color in CSS using a predefined name and using an RGB value.
In CSS, specifying a color using a predefined name, like color: red;, is simpler and more intuitive, but it limits you to a set of about 140 standard color names. Using an RGB value, like color: rgb(255, 0, 0);, offers more precision and control, as it allows you to specify the exact intensities of red, green, and blue components to create a wide range of colors.
How would you specify a semi-transparent blue background color using CSS?
To specify a semi-transparent blue background color in CSS, you can use the RGBA color model. For example, background-color: rgba(0, 0, 255, 0.5); would set the background color to blue with 50% transparency. The first three values represent the red, green, and blue components, and the fourth value represents the alpha channel, which controls the opacity.
If an element has a width of 100px, left and right padding of 10px, a border of 2px on all sides, and left and right margins of 5px, what is its total width?
The total width of the element is calculated by adding the width of the content, left and right padding, left and right borders, and left and right margins. Therefore, the total width is 100px + 2(10px) + 2(2px) + 2(5px) = 100px + 20px + 4px + 10px = 134px.
