Advanced HTML / CSS

0.0(0)
studied byStudied by 0 people
learnLearn
examPractice Test
spaced repetitionSpaced Repetition
heart puzzleMatch
flashcardsFlashcards
Card Sorting

1/49

encourage image

There's no tags or description

Looks like no tags are added yet.

Study Analytics
Name
Mastery
Learn
Test
Matching
Spaced

No study sessions yet.

50 Terms

1
New cards

Assume you have two files for your website, and these files exist in the same folder:

home.html
style.css

Which of the following is the proper way to apply the CSS code inside style.css to the home.html file?

Inside home.html:

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

2
New cards

Assume you have two files for your website, and these files exist in the same folder:

index.html
about.html

Which of the following is the proper way to link to the about.html page from the index.html page?

<a href="about.html">About This Site</a>

3
New cards

What are IFrames?

HTML pages embedded inside of other HTML pages

4
New cards

True or False: It is possible to embed any website inside IFrames.

False

5
New cards

What is the function of the div tag?

  1. To define a section of an HTML page

  2. To group a block of elements together to format them with CSS

  3. To efficiently apply the same style to several different elements

6
New cards

Which of the following correctly uses div to style multiple elements the same way?

<div class="intro">
        <h2>Welcome</h2>
        <p>Hi, welcome to my page.</p>
</div>

7
New cards

What is the difference between <span> and <div>?

<span> is used to group and style inline elements, while <div> creates a line break

8
New cards

Which of the following selects all p tags with the class alert and makes them red?

p.alert {
    
}

9
New cards

How can I select all h1 tags that are immediate children of div tags?

div > h1 {
    ...
}

10
New cards

What is the reasoning behind the Don’t Repeat Yourself principle?

Repeated code makes it harder to read and edit

11
New cards

What are some ways to cut down on repetitive code in your website?

  1. Group together multiple selectors with commas

  2. Strategically plan ahead to make sure the site is coded concisely

  3. Use a div to style multiple elements

12
New cards

Which of the following will turn the h1 tag blue as the mouse hovers over it?

h1:hover {
    
}

13
New cards

True or False: If a selector’s display property is set to none, selected elements will still take up space on the page.

False

14
New cards

Which of the following is not a property that can hide the visibility of an element?

hidden

15
New cards

True or False: You will learn everything there is to know about HTML and CSS from CodeHS.

False

16
New cards

Who might need to look something up in HTML/CSS documentation?

  1. A student learning about web development

  2. A web developer using a new feature

  3. A person building a personal website as a hobby

17
New cards

The Inspector would be a useful tool for which of the following tasks?

  1. Starting to write the HTML and CSS based on a design

  2. Correct Answer

    Testing what small CSS changes will do to the site presentation

  3. Finalizing changes made to the styling of the website

18
New cards

Which of the following is not a part of the box model?

background

19
New cards

For the given div, what is the size of the right padding?

div {
    width: 10px;
    height: 10px;
    padding: 15px 10px 5px 20px;
}

10px

20
New cards

True or False: An image can have more than one CSS filter.

True.

21
New cards

Which of the following applies a grayscale filter to all images?

img {
    filter: grayscale(100%);
}

22
New cards

Which of the following defines an animation increase-font that increases the font size from 5px to 20px?

@keyframes increase-font {
    from {}
    to {}
}

23
New cards

Which of the following applies an animation named grayscaleFilter over 10 seconds to every img tag?

img {
    animation: grayscaleFilter 10s;
}

24
New cards
img {
     width: 100px;
     height: 100px;
     transition: width 2s, height 2s;
}
img:hover {
     width: 200px;
     height: 200px;
}   

What would be the resulting difference if the line transition: width 2s, height 2s; was removed from the first CSS rule?

There would no longer be a smooth transition for the image:hover rule.

25
New cards

True or False: You can only transition one property at a time.

False

26
New cards

Assume you have two files for your website, and these files exist in the same folder:

about.html
style.css

Which of the following is the proper way to apply the CSS code inside style.css to the about.html file?

Inside about.html:

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

27
New cards

Which of the following would you use an IFrame for?

Embedding a map from Google Maps in your website

28
New cards

You are trying to apply the same style to several different elements in a block, with line breaks before and after. Which tag should you use?

<div>

29
New cards

Which of the following selects all elements with the class footer that are inside of divs?

div .footer {
    ...
}

30
New cards

Which of the following selects all a tags that are immediate children of div tags?

div > a {
    ...
}

31
New cards

Why is it important to avoid repetitive code while creating a website?

  1. Excessive code is harder to read and understand

  2. It is easier to make edits to websites when CSS rules are strategically grouped and organized

  3. It demonstrates good coding style

32
New cards

Which of the following will turn the first letter of all p elements blue?

p::first-letter {
    
}

33
New cards

Which of the following selects images as the mouse hovers over them and sets their size to 350px by 350px?

img:hover {
    width: 350px;
    height: 350px;
}

34
New cards

Which of the following settings will not make an element invisible?

appearance: off

35
New cards

True or False: Only CSS has online documentation because it is a more complex language than HTML.

False.

36
New cards

True or False: None of the changes you make in the Inspector will be saved.

True.

37
New cards

Which of the following defines border thickness so that the top and bottom borders are 10px thick and left and right borders are 5px thick?

border: 10px 5px 10px 5px

38
New cards

Which of the following applies the invert filter to all images with the class “inverted”?

img.inverted {
    filter: invert(100%);
}

39
New cards

Which of the following defines an animation change-color that changes the font color from green to red?

@keyframes change-color {
    from {}
    to {}
}

40
New cards

Which of the following will result in a smooth transition from green to red as the mouse clicks on h1 tags?

h1 {
     
     transition: color 2s;
}
h1:active {
     
}

41
New cards
42
New cards
43
New cards
44
New cards
45
New cards
46
New cards
47
New cards
48
New cards
49
New cards
50
New cards