HTML Unit 2: CSS: Colors and Links Flashcards
(39 cards)
Write the HTML code to set the background color of an <h1> element to DodgerBlue.
<h1 style="background-color:DodgerBlue;">Hello World</h1>
Write the HTML code to set the text color of an <h1> element to Tomato.
<h1 style="color:Tomato;">Hello World</h1>
What HTML attribute allows you to change the color of a border?
The style attribute is used to change the color of a border in inline HTML. You use the border property to define the size, style, and color of the border.<h1 style="border:2px solid Tomato;">Hello World</h1>
What is the formula to specify a color using RGB values in HTML?
The formula is rgb(red, green, blue), where each of the red, green, and blue parameters can have a value between 0 and 255.<p style="background-color:rgb(255, 255, 255)">This is a white paragraph.</p>
How do you represent black using RGB values?
Black is represented by rgb(0, 0, 0), with all color parameters set to 0.
What would the color look like if all RGB parameters are set to the same value, like rgb(128, 128, 128)?
When all RGB parameters are set to the same value, the color is a shade of gray. rgb(128, 128, 128) would represent a medium gray.
What is the format for specifying a color using HEX values in HTML?
The format is #rrggbb, where rr (red), gg (green), and bb (blue) are hexadecimal values ranging from 00 to ff (0-255 in decimal).
Write the hexadecimal value for green.
The hexadecimal value for green is #00ff00, where green is at its maximum value (ff) and red and blue are set to 00.
What does the hexadecimal value #ff00ff represent?
#ff00ff represents magenta, where red and blue are set to their maximum values (ff), and green is set to 00.
What is the format for specifying a color using HSL values in HTML?
The format is hsl(hue, saturation, lightness), where hue is a degree on the color wheel (ranging from 0 to 360), and saturation and lightness are percentage values.
How would you describe the color created by hsl(240, 100%, 50%)?
hsl(240, 100%, 50%) represents blue, with full saturation and normal lightness.
How does changing lightness in HSL affect a color?
Lightness determines how light or dark a color is:
0% means the color is completely black (no light).
50% means the color is balanced, neither too dark nor too light.
100% means the color is completely white (full light).
How does changing saturation in HSL affect a color?
Saturation affects the intensity of a color:
100% is the full, pure color with no gray.
50% adds 50% gray, but the color is still visible.
0% makes the color completely gray, with no trace of the original hue.
How is transparency (alpha) added to a HEX color value?
In Hex with alpha, an additional two characters are added after the usual six. The format is #rrggbbaa, where aa represents the alpha (transparency) value, ranging from 00 (completely transparent) to ff (completely opaque).
What does #ff000080 represent in terms of color and transparency?
#ff000080 represents red (ff0000) with 50% transparency (80 in hexadecimal, which is 128 in decimal, or 50% opacity).
What is the format for specifying a color with transparency using RGBA?
The format is rgba(red, green, blue, alpha), where red, green, and blue are values between 0 and 255, and alpha is a value between 0 and 1 (where 0 is fully transparent and 1 is fully opaque).
What is the format for specifying a color with transparency using HSLA?
The format is hsla(hue, saturation, lightness, alpha), where hue is a degree on the color wheel (0-360), saturation and lightness are percentages, and alpha is a value between 0 and 1 for transparency.
What does hsla(240, 100%, 50%, 0.75) represent in terms of color and transparency?
hsla(240, 100%, 50%, 0.75) represents a blue color with 75% opacity (25% transparency).
What does the border property in CSS do?
The border property defines the border around an element. It can be specified with width, style, and color. For example: border: 2px solid black;.
What does the padding property in CSS control?
The padding property controls the space between the content of an element and its border. It can be set for all sides or individually (top, right, bottom, left).
What is the purpose of the margin property in CSS?
The margin property defines the space outside the border of an element. It separates the element from other elements and can be set for all sides or individually (top, right, bottom, left).
How do border, padding, and margin differ in terms of their impact on element spacing?
Border is the line surrounding the element’s content and padding, contributing to the element’s size.
Padding is the space between the element’s content and its border, affecting the internal spacing.
Margin is the space outside the border, affecting the distance between the element and surrounding elements.
What does the shorthand margin: 10px 20px 30px 40px; represent?
The shorthand margin: 10px 20px 30px 40px; represents:
10px top margin
20px right margin
30px bottom margin
40px left margin
Write CSS to set 15 pixels of margin on the top and bottom, and 30 pixels on the left and right of a div. Do this for both inline, internal and external CSS.
Inline:<div style="margin: 15px 30px;">
Content goes here.
</div>
Internal:
`<style>
.custom-margin {
margin: 15px 30px;
}
</style>
<div class="custom-margin">
Content goes here.
</div>`
External:
HTML:
<link rel="stylesheet" href="style.css">
…
<div class="custom-margin">
Content goes here.
</div>
CSS:.custom-margin {
margin: 15px 30px;
}
