HTML Unit 2: CSS: Colors and Links

Question 1

Write the HTML code to set the background color of an <h1> element to DodgerBlue.

Answer 1

<h1 style="background-color:DodgerBlue;">Hello World</h1>

Question 2

Write the HTML code to set the text color of an <h1> element to Tomato.

Answer 2

<h1 style="color:Tomato;">Hello World</h1>

Question 3

What HTML attribute allows you to change the color of a border?

Answer 3

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>

Question 4

What is the formula to specify a color using RGB values in HTML?

Answer 4

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>

Question 5

How do you represent black using RGB values?

Answer 5

Black is represented by rgb(0, 0, 0), with all color parameters set to 0.

Question 6

What would the color look like if all RGB parameters are set to the same value, like rgb(128, 128, 128)?

Answer 6

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.

Question 7

What is the format for specifying a color using HEX values in HTML?

Answer 7

The format is #rrggbb, where rr (red), gg (green), and bb (blue) are hexadecimal values ranging from 00 to ff (0-255 in decimal).

Question 8

Write the hexadecimal value for green.

Answer 8

The hexadecimal value for green is #00ff00, where green is at its maximum value (ff) and red and blue are set to 00.

Question 9

What does the hexadecimal value #ff00ff represent?

Answer 9

#ff00ff represents magenta, where red and blue are set to their maximum values (ff), and green is set to 00.

Question 10

What is the format for specifying a color using HSL values in HTML?

Answer 10

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.

Question 11

How would you describe the color created by hsl(240, 100%, 50%)?

Answer 11

hsl(240, 100%, 50%) represents blue, with full saturation and normal lightness.

Question 12

How does changing lightness in HSL affect a color?

Answer 12

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).

Question 13

How does changing saturation in HSL affect a color?

Answer 13

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.

Question 14

How is transparency (alpha) added to a HEX color value?

Answer 14

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).

Question 15

What does #ff000080 represent in terms of color and transparency?

Answer 15

#ff000080 represents red (ff0000) with 50% transparency (80 in hexadecimal, which is 128 in decimal, or 50% opacity).

Question 16

What is the format for specifying a color with transparency using RGBA?

Answer 16

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).

Question 17

What is the format for specifying a color with transparency using HSLA?

Answer 17

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.

Question 18

What does hsla(240, 100%, 50%, 0.75) represent in terms of color and transparency?

Answer 18

hsla(240, 100%, 50%, 0.75) represents a blue color with 75% opacity (25% transparency).

Question 19

What does the border property in CSS do?

Answer 19

The border property defines the border around an element. It can be specified with width, style, and color. For example: border: 2px solid black;.

Question 20

What does the padding property in CSS control?

Answer 20

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).

Question 21

What is the purpose of the margin property in CSS?

Answer 21

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).

Question 22

How do border, padding, and margin differ in terms of their impact on element spacing?

Answer 22

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.

Question 23

What does the shorthand margin: 10px 20px 30px 40px; represent?

Answer 23

The shorthand margin: 10px 20px 30px 40px; represents:

10px top margin
20px right margin
30px bottom margin
40px left margin

Question 24

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.

Answer 24

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; }

Question 25

What is the syntax for defining a hyperlink in HTML?

Answer 25

The syntax for defining a hyperlink is:

<a href="url">link text</a>
The href attribute specifies the link’s destination, and link text is the clickable text visible to the reader.

Question 26

List all possible values for the target attribute in an <a> tag and their functions.

Answer 26

_self: Default. Opens the document in the same window or tab.
_blank: Opens the document in a new window or tab.
_parent: Opens the document in the parent frame.
_top: Opens the document in the full body of the window.

Question 27

What is the difference between an absolute URL and a relative URL?

Answer 27

Absolute URL: A full web address (e.g., https://www.example.com/page).
Relative URL: A partial address relative to the current site (e.g., page.html).

Question 28

How do you use an image as a link in HTML?

Answer 28

To use an image as a link, place the <img> tag inside an <a> tag:

<a href="url"> <img src="image.jpg" alt="description"> </a>

Question 29

How do you create a link that opens the user’s email program in HTML?

Answer 29

Use mailto: in the href attribute:

<a href="mailto:email@example.com">Send Email</a>

Question 30

How can you make an HTML button act as a link?

Answer 30

To make an HTML button act as a link, use JavaScript to handle the click event:

<button onclick="window.location.href='url';">Click Me</button>

Question 31

What is the purpose of the title attribute in an <a> tag?

Answer 31

The title attribute provides additional information about the element, often displayed as a tooltip when the mouse hovers over it.

Question 32

Write the CSS to set an unvisited link to green with no underline. What does it normally look like?

Answer 32

By default, an unvisited link is underlined and blue.

a:link { color: green; background-color: transparent; text-decoration: none; }

Question 33

How do you style visited links to appear pink with no underline using CSS? What does it normally look like?

Answer 33

A visited link is underlined and purple.

a:visited { color: pink; background-color: transparent; text-decoration: none; }

Question 34

What CSS rule sets the appearance of an active link to yellow and underlined? What does it normally look like?

Answer 34

By default, an active link is underlined and red.

a:active { color: yellow; background-color: transparent; text-decoration: underline; }

Question 35

What is the difference between unvisited and active links?

Answer 35

Unvisited applies to all links that haven’t been clicked or visited yet.
Active applies only during the moment when the user is actively clicking the link.

Unvisited defines the appearance of a link that hasn’t been interacted with.
Active provides feedback to the user during the click action.

Question 36

How can you style a link to change to red and underlined when the user hovers over it?

Answer 36

a:hover { color: red; background-color: transparent; text-decoration: underline; }

Question 37

How can you style a link as a button?

Answer 37

`<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}</style>

a:hover, a:active {
background-color: red;
}
</style>`
The padding and background-color function to make the element a colored area that changes color on hover/click.

Question 38

How do you create a bookmark in HTML, and how to link to it?

Answer 38

To create a bookmark, use the id attribute on an element to specify the bookmark location:

<h2 id="C4">Chapter 4</h2>

To link to a bookmark on the same page, use the href attribute with a # followed by the bookmark’s id:

<a href="#C4">Jump to Chapter 4</a>

Question 39

How do you create a link to a bookmark on a different page?

Answer 39

To link to a bookmark on a different page, include the page URL followed by the # and the bookmark’s id:

<a href="html_demo.html#C4">Jump to Chapter 4</a>