LEARN HTML & CSS

🌐
QuickStart Guide
and CSS!
Learn more about HTML

HTML Basic Concepts & Definitions 6

1. What does HTML stand for? 6
2. Which of the following is NOT a semantic element in HTML5? 6
3. What is the purpose of the lang attribute in an HTML5 document? 7
4. What does the viewport meta tag do in HTML5? 7
HTML5 Elements and Tags 8
1. Footer for a Document or Section: <footer> 8
2. Drawing Graphics (via JavaScript): <canvas> 8
3. Navigation Links: <nav> 8
4. Playing Audio Files: <audio> 9
5. Thematic Break: <hr> 9
6. Introductory or Navigational Aids: <header> 9
7. Independent, Self-Contained Content: <article> 10
8. Section Linking to Other Documents: <section> 10
9. List of Commands: <menu> 10
10. Container for External Applications/Content: <embed> or <object> 10
11. Header for a Document or Section: <header> 11
12. Tangentially Related Content (Sidebar): <aside> 11
13. Unordered List: <ul> 11
14. Section in a Document: <section> 12
15. Introductory Content or Navigational Links: <header> 12
16. Independent Self-Contained Content: <article> 12
17. Group of Media Content: <source> 13
18. Quoted Block of Text: <blockquote> 13
HTML5 Form Elements and Attributes 13
1. Invalid <input> Type in HTML5 13
2. Purpose of the <datalist> Element in HTML5 14

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
1
 3. Function of the pattern Attribute in an HTML5 Input Field 14
4. Role of the placeholder Attribute in an Input Field 14
5. Purpose of the maxlength Attribute in an <input> Element 15
6. Function of the form Attribute of the <button> Element in HTML5 15
7. Function of the placeholder Attribute in HTML5 Input Elements 15
8. Purpose of the formaction Attribute in an <input type="submit"> Element 15
9. Function of the nowrap Attribute in a <td> Element in HTML5 16
HTML5 Media and Graphics 16
1. Embedding Video Files with the <video> Element 16
2. Drawing Graphics with the <canvas> Element 17
3. Embedding Audio Files with the <audio> Element 17
4. Using Scalable Vector Graphics (SVG) 18
5. Embedding External Media with the <embed> and <object> Elements 18
Advanced HTML5 Features 19
1. async Attribute in a <script> Tag 19
2. Purpose of the <output> Element 19
3. Purpose of the <article> Element 20
4. Required Attribute for Input Fields 20
5. ContentEditable Attribute 20
6. Purpose of the <figure> Element 20
7. defer Attribute in a <script> Tag 21
8. kind Attribute of the <track> Element 21
9. cols Attribute of the <textarea> Element 21
10. Role of the alt Attribute for Images 22
11. download Attribute in the <a> Tag 22
12. Purpose of the <figcaption> Element 22
13. Default Value of the type Attribute for a <button> Element 22
14. Element for Displaying the Result of a Calculation 23
15. Specifying Character Encoding with charset Attribute 23
16. Caption for a Figure Element 23
17. Indicating a New Article Element 23
18. Specifying Metadata with <meta> Element 23
19. Control for Generating a Public-Private Key Pair 24
20. href Attribute in the <a> Tag 24
21. Marking Up a Time-Stamp 24
22. Purpose of the autofocus Attribute 24

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
2
 23. Specifying an Ordered List 25
24. Defining Emphasized Text 25
25. disabled Attribute in HTML5 25
26. Representing a Scalar Value within a Range 25
27. multiple Attribute in an <input> Element 25
HTML Quiz Questions 26
CSS Tip and Basics: 62
1. What does CSS stand for? 62
2. HTML Tag for Defining an Internal Style Sheet: 62
3. Selecting an Element with ID "demo" in CSS: 63
4. Selecting Elements with Class Name "example": 63
5. Capitalizing Each Word in a Text: 63
6. Changing the Background Color: 63
7. Changing the Font of an Element: 64
8. Making a List with Square Items: 64
9. Selecting All <p> Elements Inside a <div>: 64
10. Understanding the Given CSS Code: 64
Text Styling and Formatting in CSS: Detailed Guide with Examples 65
1. CSS Property for Text Size: 65
2. Displaying Hyperlinks Without Underline: 65
3. Changing Left Margin of an Element: 65
4. Making Text Bold: 65
5. Setting Spacing Between Words: 66
6. Changing the Font Name: 66
7. Making a Border Visible on All Sides of a Box: 66
8. Changing Font Color of an Element: 66
9. Default Value of the Position Property: 66
10. Creating a Circle Shape in CSS: 67
11. Applying CSS Style for a Component with Two Specific Classes: 67
Selectors and Specificity in CSS: A Comprehensive Guide with Examples 67
1. Setting Background Image of an Element: 67
2. Displaying List Items Inline: 68
3. Controlling Layout and Formatting of <fieldset> Element: 68
4. Creating Rounded Corners Using CSS: 68
5. Selecting All <p> Elements with a <div> Parent: 69
6. Adding Shadow to Elements: 69

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
3
 7. Meaning of h1 + p in CSS: 69
8. Specifying Space Between Cells in a Table: 69
9. Setting Opacity of an Element: 70
10. Purpose of the z-index Property: 70
Layout and Positioning in CSS: Detailed Insights with Examples 70
1. Function of the CSS Display Property: 70
2. Selecting All Child <p> Elements of a <div>: 71
3. Invalid CSS Unit: 71
4. Purpose of the Overflow Property in CSS: 71
5. Difference Between visibility and display: 71
6. Changing Cursor Type on Hover: 72
7. Using :nth-child() Pseudo-Class in CSS: 72
8. Default Position Value in CSS: 72
9. Adding a Comment in a CSS File: 72
Box Model, Borders, and Layout in CSS: In-Depth Explorations 73
1. Creating Space Around Elements (Outside Borders): 73
2. The Flex Property in CSS Flexbox Layout: 73
3. Purpose of the Clear Property in CSS: 73
4. Controlling Text Wrapping in CSS: 73
5. Creating a Numbered List: 74
6. Moving Content Away from Borders: 74
7. Default Display Value for Most Elements: 74
8. Function of the :after Pseudo-Element: 74
9. Selecting Every <p> Element Whose Parent is Not a <div>: 75
10. Changing Style of the Bottom Border: 75
11. Effect of position: relative; in CSS: 75
Transformations and Animations in CSS: Essential Techniques and Examples 75
1. Changing Color of an Element on Mouse Hover: 76
2. Creating a Drop Shadow Effect: 76
3. Controlling Space Between Letters: 76
4. Changing Order of Flex Items: 76
5. Center Aligning Text Horizontally: 77
6. Adding a Border to an Element: 77
7. Making Font Italic: 77
8. Creating Rounded Corners with Specific Radius: 77
9. Making Text Bold: 78

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
4
Spacing and Alignment in CSS: Detailed Guide with Examples 78
1. Specifying Space Between Lines of Text: 78
2. Applying Styles to the First Letter of a Text Element: 78
3. Transforming Text to Uppercase: 78
4. Purpose of the rgba() Color Format: 79
5. Controlling Width of an Element's Border: 79
6. Changing Background Color on Mouse Hover: 79
7. Specifying List Item Markers: 79
8. Purpose of the CSS Overflow-x Property: 80
9. Selecting All Even Rows of a Table: 80
10. Purpose of text-decoration: underline;: 80
Pseudo-Classes and Elements in CSS: A Comprehensive Exploration 80
1. Changing Color of Visited Links: 81
2. Applying Styles to Every Second Element: 81
3. Controlling Order of Columns in CSS Grid: 81
4. The display: inline-block; Property: 81
5. Selecting the First Child of a Specific Element Type: 82
6. Purpose of text-align: center;: 82
7. Control by background-repeat Property: 82
8. Controlling Space Between Columns in CSS Grid: 82
9. Controlling Order of Items in Flexbox: 83
10. Creating a CSS Class for Elements with a Specific Attribute: 83
Other Styling and Effects in CSS: Detailed Explanations and Examples 83
1. flex-direction in Flexbox Layout: 83
2. Purpose of white-space: nowrap;: 84
3. Applying Styles on Hover of Parent Element: 84
4. Spacing Between Characters: 84
5. Vertical Text Alignment: 84
6. Selecting the Last Child of a Specific Element Type: 85
7. cursor: pointer; Property: 85
8. Purpose of text-overflow: ellipsis;: 85
9. Specifying Style of an Element's Border: 85
10. font-family Property: 85
11. Controlling Transparency: 86
12. Selecting Elements with a Specific Class: 86
13. box-sizing: border-box; Property: 86

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
5
 14. Selecting Links Within a Specific Section: 86
15. Creating a Shadow Behind an Element's Border: 87
16. Selecting the Last Element of a Specific Type: 87
17. Creating a Rotating Animation: 87
18. text-decoration: none; Property: 87
19. Selecting the First Element of a Specific Type: 88
20. Controlling Spacing Between Lines of Text: 88
CSS Quiz Questions 88

HTML Basic Concepts & Definitions

1. What does HTML stand for?
HTML stands for HyperText Markup Language. It is the standard markup
language used for creating web pages and web applications.

● HyperText: Refers to links that connect web pages to one another,

either within a single website or between websites.
● Markup Language: A way of coding a document that, along with the
text, incorporates tags to define elements.

Example:

<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>

2. Which of the following is NOT a semantic element in HTML5?

Semantic elements in HTML5 are those that clearly describe their meaning
to both the browser and the developer. Examples include <form>, <table>,
and <article>. Non-semantic elements, like <div> and <span>, do not tell
anything about their content.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
6
 ● Semantic Elements: <header>, <footer>, <article>, etc.
● Non-Semantic Elements: <div>, <span>, etc.

Tip: Use semantic elements for better readability and accessibility. They
help screen readers and search engines to better understand the content of
your website.

3. What is the purpose of the lang attribute in an HTML5 document?

The lang attribute specifies the primary language of the document's
content. It's crucial for accessibility, as screen readers use this attribute to
provide correct pronunciation. It also helps search engines return
language-specific results.

Example:

<head>
<title>Document Title</title>
</head>
<body>
<p>This document is in English.</p>
</body>

In this example, lang="en" indicates that the document is in English.

Tip: Always set the lang attribute in your HTML document for better
accessibility and SEO.

4. What does the viewport meta tag do in HTML5?

The viewport meta tag is used to control the layout on mobile browsers.
Without it, mobile devices will render pages at typical desktop screen
widths, and then scale the pages down, making them difficult to read.

Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
7
This viewport tag sets the width of the page to follow the screen-width of
the device (which varies depending on the device), and sets the initial
zoom level when the page is first loaded by the browser.

Tip: Always use the viewport meta tag in an HTML5 document to ensure
your site is mobile-friendly.

HTML5 Elements and Tags

1. Footer for a Document or Section: <footer>
The <footer> element specifies a footer for a document or section. It often
contains authorship information, contact information, copyrights, and links
to related documents.

Example:

<footer>
<p>Copyright © 2021 Company Name</p>
</footer>

2. Drawing Graphics (via JavaScript): <canvas>

The <canvas> element is used to draw graphics on a web page, typically
via JavaScript.

Example:

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
</script>

3. Navigation Links: <nav>

The <nav> element is used to define a set of navigation links.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
8
Example:

<nav>
<a href="/">Home</a> |
<a href="/about">About</a> |
<a href="/contact">Contact</a>
</nav>

4. Playing Audio Files: <audio>

The <audio> element is used to embed sound content (audio files) in
documents.

Example:

<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

5. Thematic Break: <hr>

The <hr> element represents a thematic break between paragraph-level
elements, like a scene change in a story or a shift of topic.

Example:

<p>First topic...</p>
<hr>
<p>Second topic...</p>

6. Introductory or Navigational Aids: <header>

The <header> element represents a container for introductory content or
navigational links.

Example:

<header>
<h1>Website Title</h1>
<p>Welcome to my website</p>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
9
</header>

7. Independent, Self-Contained Content: <article>

The <article> element holds content that makes sense on its own and can
be independently distributed or reused (e.g., a forum post, magazine or
newspaper article).

Example:

<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>

8. Section Linking to Other Documents: <section>

The <section> element defines a section in a document, often used for
chapters, headers, footers, or any other sections of the document.

Example:

<section id="chapter1">
<h2>Chapter 1: Introduction</h2>
<p>Chapter content...</p>
</section>

9. List of Commands: <menu>

The <menu> element represents a list of commands or options.

Example:

<menu type="toolbar">
<li><button type="button">Home</button></li>
<li><button type="button">Products</button></li>
</menu>

10. Container for External Applications/Content: <embed> or <object>

The <embed> or <object> elements are used to embed external
applications or interactive content.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
10
Example:

<embed src="file.swf" width="500" height="300">

<!-- or -->
<object data="movie.swf" width="500" height="300"></object>

11. Header for a Document or Section: <header>

The <header> element represents a container for introductory content or a
set of navigational links.

Example:

<header>
<h1>Welcome to My Blog</h1>
<p>Your source for news and articles.</p>
</header>

12. Tangentially Related Content (Sidebar): <aside>

The <aside> element is used for content that is tangentially related to the
content around it, often used for sidebars.

Example:

<aside>
<h2>Related Articles</h2>
<ul>
<li>Article 1</li>
<li>Article 2</li>
</ul>
</aside>

13. Unordered List: <ul>

The <ul> (unordered list) element represents a list of items where the order
of the items is not important.

Example:

<ul>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
11
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

14. Section in a Document: <section>

The <section> element is used to define a specific section within a
document.

Example:

<section>
<h2>About Us</h2>
<p>Information about the company...</p>
</section>

15. Introductory Content or Navigational Links: <header>

The <header> element is used for introductory content or navigational links
within a website.

Example:

<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a> |
<a href="/about">About</a>
</nav>
</header>

16. Independent Self-Contained Content: <article>

The <article> element is used for self-contained content, such as a blog
post or news article.

Example:

<article>
<h2>Blog Post Title</h2>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
12
<p>Blog post content...</p>
</article>

17. Group of Media Content: <source>

The <source> element is used with <audio> or <video> elements to specify
multiple media sources.

Example:

<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

18. Quoted Block of Text: <blockquote>

The <blockquote> element is used to define a block of text that has been
quoted from another source.

Example:

<blockquote cite="http://source.com">
<p>This is a quoted text from a source.</p>
</blockquote>

These HTML5 elements and tags are essential for structuring and enriching
web content, ensuring it is semantically meaningful and accessible. They
play a crucial role in the overall design and functionality of web pages.

HTML5 Form Elements and Attributes

1. Invalid <input> Type in HTML5
In HTML5, types like text, number, email, and date are valid for <input>. An
invalid type would be something that is not recognized by HTML5
standards, such as slider.

Example:

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
13
<!-- Valid input type -->
<input type="text" name="name">
<!-- Invalid input type -->
<input type="slider" name="slider">

2. Purpose of the <datalist> Element in HTML5

The <datalist> element provides a list of pre-defined options to an <input>
element. It is useful for suggesting possible values for a text input, thus
aiding in auto-completion.

Example:

<input list="browsers" name="browser">

<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>

3. Function of the pattern Attribute in an HTML5 Input Field

The pattern attribute specifies a regular expression that the input element's
value is checked against. It is used for validating the form data.

Example:

<!-- pattern for a simple email format -->

<input type="text" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Enter a valid email
address">

4. Role of the placeholder Attribute in an Input Field

The placeholder attribute provides a short hint that describes the expected
value of an input field. It is displayed inside the input field before the user
enters a value.

Example:

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
14
<input type="text" name="name" placeholder="Enter your name">

5. Purpose of the maxlength Attribute in an <input> Element

The maxlength attribute specifies the maximum number of characters
allowed in an input field.

Example:

<!-- Accepts up to 10 characters -->

<input type="text" name="username" maxlength="10">

6. Function of the form Attribute of the <button> Element in HTML5

The form attribute of the <button> element specifies the ID of the form the
button belongs to, allowing the button to be associated with a form even if it
is not inside the form element.

Example:

<form id="loginForm">
<!-- form content -->
</form>
<button form="loginForm" type="submit">Submit</button>

7. Function of the placeholder Attribute in HTML5 Input Elements

The placeholder attribute in HTML5 input elements shows a hint or guide
text inside the input field before the user enters a value. It's used to give
users an example of what the input should look like.

Example:

<input type="email" placeholder="example@domain.com">

8. Purpose of the formaction Attribute in an <input type="submit">

Element
The formaction attribute in an <input type="submit"> element overrides the
action attribute of the form it belongs to. It specifies a different URL to
which the form's data will be sent when this submit button is pressed.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
15
Example:

<form action="/default-action">
<input type="submit" value="Submit to Default">
<input type="submit" formaction="/different-action" value="Submit to
Different">
</form>

9. Function of the nowrap Attribute in a <td> Element in HTML5

The nowrap attribute in a <td> element prevents the text inside the table
cell from wrapping. This attribute is not part of HTML5 (it's obsolete) and
should be avoided in favor of CSS for such styling.

Example:

<td style="white-space: nowrap;">This text will not wrap.</td>

Note: For nowrap, it's recommended to use CSS (white-space: nowrap;)

rather than the HTML attribute.

HTML5 Media and Graphics

1. Embedding Video Files with the <video> Element
The <video> element in HTML5 is used to embed video files in a web page,
offering built-in controls for playback.

Example:

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Tips:

● Always include multiple source files for cross-browser compatibility.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
16
 ● Add a text message inside the <video> tag for browsers that do not
support it.

2. Drawing Graphics with the <canvas> Element

The <canvas> element is used for drawing graphics on the fly via scripting
(usually JavaScript). It's particularly useful for rendering graphs, game
graphics, or other visual images dynamically.

Example:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#000;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 200, 100);
</script>

Tips:

● The <canvas> element itself is just a container. You need to use

JavaScript to actually draw the graphics.
● Set a fallback message for browsers that don't support <canvas>.

3. Embedding Audio Files with the <audio> Element

The <audio> element allows you to embed audio files that users can play
directly on the website. Like the <video> tag, it supports multiple sources
and includes built-in controls.

Example:

<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
17
Tips:

● Provide multiple audio formats to ensure compatibility with different

browsers.
● Include a message for browsers that don't support the <audio>
element.

4. Using Scalable Vector Graphics (SVG)

SVG is an XML-based markup language for describing two-dimensional
vector graphics. SVG is used for icons, logos, and complex drawings.
Being vector graphics, SVG images are scalable without loss of resolution.

Example:

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"
/>
</svg>

Tips:

● SVG is great for high-quality graphics that need to scale for different
device sizes.
● You can style SVG elements with CSS and make them interactive
with JavaScript.

5. Embedding External Media with the <embed> and <object>

Elements
The <embed> and <object> elements are used to embed external
applications and interactive content, like Flash animations or PDF readers.

Example of <embed>:

<embed src="file.swf" width="400" height="50">

Example of <object>:

<object data="file.swf" width="400" height="50">

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
18
<embed src="file.swf" width="400" height="50">
</object>

Tips:

● Use <embed> for external multimedia like videos, images, or audio.

● The <object> tag can also be used for embedding multimedia, and it's
more versatile.

Advanced HTML5 Features

1. async Attribute in a <script> Tag
The async attribute is used in a <script> tag to load the script
asynchronously with the rest of the page. This means the script will be
executed as soon as it's downloaded, without blocking HTML parsing.

Example:

<script async src="script.js"></script>

Tips:

● Use async for scripts that don't depend on other scripts.

● It helps improve the loading performance of web pages.

2. Purpose of the <output> Element

The <output> element is used to represent the result of a calculation or
user action.

Example:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">+
<input type="number" id="b" value="50">
<output name="result" for="a b">100</output>
</form>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
19
3. Purpose of the <article> Element
The <article> element represents a self-contained composition in a
document, page, or site, which is intended to be independently distributable
or reusable.

Example:

<article>
<h2>Article Heading</h2>
<p>Article content...</p>
</article>

Tips:

● Use it for blog posts, news articles, user comments, or other items of
independent content.

4. Required Attribute for Input Fields

The required attribute is used to specify that an input field must be filled out
before submitting the form.

Example:

<input type="text" name="name" required>

5. ContentEditable Attribute
The contenteditable attribute specifies whether the content of an element is
editable or not.

Example:

<div contenteditable="true">You can edit this text.</div>

6. Purpose of the <figure> Element

The <figure> element represents self-contained content, often with an
optional caption, which is specified using <figcaption>.

Example:

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
20
<figure>
<img src="image.jpg" alt="Image description">
<figcaption>Caption for the image.</figcaption>
</figure>

7. defer Attribute in a <script> Tag

The defer attribute delays the execution of a script until after the document
has been parsed.

Example:

<script defer src="script.js"></script>

Tips:

● Use defer for scripts that need the DOM to be fully parsed.

8. kind Attribute of the <track> Element

The kind attribute in the <track> element specifies the kind of text track
(subtitles, captions, descriptions, chapters, or metadata).

Example:

<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

9. cols Attribute of the <textarea> Element

The cols attribute specifies the visible width of a text control (in average
character widths).

Example:

<textarea name="message" rows="10" cols="30"></textarea>

10. Role of the alt Attribute for Images

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
21
The alt attribute provides alternative text for an image if it cannot be
displayed.

Example:

<img src="image.jpg" alt="Descriptive text about the image">

Tips:

● Always use the alt attribute to improve accessibility.

11. download Attribute in the <a> Tag

The download attribute in the <a> tag suggests that the link is to be
downloaded rather than navigated to.

Example:

<a href="path/to/file" download>Download File</a>

12. Purpose of the <figcaption> Element

The <figcaption> element represents a caption or legend for the rest of the
contents of its parent <figure> element.

Example:

<figure>
<img src="image.jpg" alt="...">
<figcaption>Caption goes here.</figcaption>
</figure>

13. Default Value of the type Attribute for a <button> Element

The default value of the type attribute for a <button> element is submit.

Example:

<button type="button">Click Me!</button> <!-- Not a submit button -->

14. Element for Displaying the Result of a Calculation

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
22
The <output> element is used for displaying the result of a calculation.

Example:

<output name="result"></output>

15. Specifying Character Encoding with charset Attribute

The charset attribute in a <meta> tag specifies the character encoding for
the HTML document.

Example:

<meta charset="UTF-8">

16. Caption for a Figure Element

The <figcaption> element is used to define a caption for a <figure>
element.

Example:

<figure>
<img src="image.jpg" alt="...">
<figcaption>This is a caption.</figcaption>
</figure>

17. Indicating a New Article Element

The <article> element is used to indicate a new article element.

Example:

<article>
<h2>New Article</h2>
<p>Content of the new article...</p>
</article>

18. Specifying Metadata with <meta> Element

The <meta> element is used to specify metadata about the HTML
document that is not represented by other HTML elements.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
23
Example:

<meta name="description" content="Description of the page">

19. Control for Generating a Public-Private Key Pair

The <keygen> element (deprecated and should be avoided) was used to
represent a control for generating a public-private key pair.

Example:

<keygen name="key" challenge="challenge string">

Note: It's recommended to use more modern and secure methods for key
generation.

20. href Attribute in the <a> Tag

The href attribute in the <a> tag specifies the URL of the page the link goes
to.

Example:

<a href="https://www.example.com">Visit Example.com</a>

21. Marking Up a Time-Stamp

The <time> element is best suited for marking up a time-stamp in HTML5.

Example:

<time datetime="2020-01-01">January 1, 2020</time>

22. Purpose of the autofocus Attribute

The autofocus attribute is used in HTML5 to specify that an element should
automatically get focus when the page loads.

Example:

<input type="text" autofocus>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
24
23. Specifying an Ordered List
The <ol> tag is used to specify an ordered list in HTML5.

Example:

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

24. Defining Emphasized Text

The <em> element is used in HTML5 to define emphasized text.

Example:

<p>This is <em>emphasized</em> text.</p>

25. disabled Attribute in HTML5

The disabled attribute is used to specify that an input element should be
disabled.

Example:

<input type="text" disabled>

26. Representing a Scalar Value within a Range

The <input type="range"> element is used to represent a scalar value
within a known range, such as a volume control.

Example:

<input type="range" min="1" max="10">

27. multiple Attribute in an <input> Element

The multiple attribute in an <input> element allows the user to select or
enter more than one value.

Example:

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
25
<input type="file" multiple>

HTML Quiz Questions

Question 1: What does HTML stand for?

1. HyperText Markup Language

2. HyperTech More Language
3. HighText Machine Language
4. None of the above

Answer: 1. HyperText Markup Language

Explanation: HTML stands for HyperText Markup Language. It is the

standard markup language used for creating web pages and web
applications. It structures the content on the web.

Question 2: Which of the following is a new element in HTML5?

1. <div>
2. <table>
3. <article>
4. <font>

Answer: 3. <article>

Explanation: <article> is a new element introduced in HTML5. It represents

a self-contained composition in a document, page, application, or site,
which is intended to be independently distributable or reusable.

Question 3: What is the purpose of the <canvas> element in HTML5?

1. To display database records

2. To draw graphics on the fly via scripting (like JavaScript)
3. To add a background canvas to web pages

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
26
 4. To display 3D objects

Answer: 2. To draw graphics on the fly via scripting (like JavaScript)

Explanation: The <canvas> element in HTML5 is used to draw graphics on

the fly via scripting languages such as JavaScript. It can be used to draw
graphs, make photo compositions, create animations, or even do real-time
video processing or rendering.

Question 4: Which HTML5 element is used to specify a footer for a document or

section?

1. <bottom>
2. <footer>
3. <section>
4. <div>

Answer: 2. <footer>

Explanation: The <footer> element in HTML5 is used to define a footer for

a document or a section. It typically contains authorship information,
contact information, copyright notices, and related documents.

Question 5: What is the correct HTML5 element for playing video files?

1. <media>
2. <video>
3. <film>
4. <mp4>

Answer: 2. <video>

Explanation: The <video> element is used in HTML5 for embedding video

content in a document. It can be used to play various video file formats.
Attributes like src, controls, width, and height are often used with the
<video> element.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
27
Question 6: Which of the following is NOT a valid type for <input> in HTML5?

1. email
2. date
3. slider
4. color

Answer: 3. slider

Explanation: In HTML5, slider is not a valid type attribute value for <input>.
The correct type for a slider is range.

Question 7: Which HTML5 element is used for drawing graphics, typically via
JavaScript?

1. <graphics>
2. <canvas>
3. <svg>
4. <draw>

Answer: 2. <canvas>

Explanation: The <canvas> element is used in HTML5 for drawing

graphics, usually with JavaScript. It allows for dynamic, scriptable rendering
of 2D shapes and bitmap images.

Question 8: What does the async attribute in a <script> tag do?

1. It stops the script until the page has finished parsing

2. It runs the script asynchronously as soon as it is available
3. It defers the script to run after the page has finished parsing
4. It checks for syntax errors in the script

Answer: 2. It runs the script asynchronously as soon as it is available

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
28
Explanation: The async attribute in a <script> tag allows the script to be
executed asynchronously as soon as it is available, without waiting for the
entire page to be loaded.

Question 9: Which element is used in HTML5 to specify navigation links?

1. <nav>
2. <navigation>
3. <links>
4. <navigate>

Answer: 1. <nav>

Explanation: The <nav> element is used in HTML5 to define a section of

navigation links.

Question 10: What is the purpose of the <aside> element in HTML5?

1. To represent a section of the page with content connected indirectly

to the main content
2. To create sidebars for advertising
3. To denote additional items that the user might need
4. To highlight text

Answer: 1. To represent a section of the page with content connected

indirectly to the main content

Explanation: The <aside> element is used in HTML5 to represent a section

of a page that consists of content tangentially related to the content around
the <aside> element.

Question 11: What does the figure element in HTML5 represent?

1. A calculation or result
2. A unit of length
3. Self-contained content, like illustrations, diagrams, photos, code
listings, etc.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
29
 4. A key figure in a text

Answer: 3. Self-contained content, like illustrations, diagrams, photos, code

listings, etc.

Explanation: The figure element represents self-contained content, typically

referenced as a single unit from the main flow of the document, such as
illustrations, diagrams, photos, code listings, etc.

Question 12: How do you define a header for a section or page in HTML5?

1. <header>
2. <head>
3. <top>
4. <sectionhead>

Answer: 1. <header>

Explanation: The <header> element in HTML5 is used to define a header

for a document or a section.

Question 13: What is the purpose of the datalist element in HTML5?

1. To store data offline

2. To provide a list of pre-defined options to an <input> element
3. To link to external data sources
4. To display a list of items in a table format

Answer: 2. To provide a list of pre-defined options to an <input> element

Explanation: The datalist element in HTML5 provides a list of pre-defined

options for an <input> element, allowing for an auto-complete feature.

Question 14: Which HTML5 element is used to play audio files?

1. <sound>
2. <mp3>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
30
 3. <audio>
4. <music>

Answer: 3. <audio>

Explanation: The <audio> element is used in HTML5 to embed sound

content in documents. It can be used to play audio files.

Question 15: What is the purpose of the output element in HTML5?

1. To display the output of a script

2. To export data to an external file
3. To define a section for user input
4. To store output data in a database

Answer: 1. To display the output of a script

Explanation: The output element is used to represent the result of a

calculation or user action in HTML5.

Question 16: Which attribute is used to specify that an input field must be filled
out before submitting the form?

1. required
2. mandatory
3. validate
4. essential

Answer: 1. required

Explanation: The required attribute is used to specify that an input field

cannot be left empty and must be filled out before submitting the form.

Question 17: What is the purpose of the article element in HTML5?

1. To define a comment

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
31
 2. To contain a magazine or newspaper article
3. To wrap an article about a particular subject
4. Both 2 and 3

Answer: 4. Both 2 and 3

Explanation: The article element represents a piece of self-contained

content, such as a newspaper or magazine article, a blog entry, or a user
comment.

Question 18: Which of the following is NOT a semantic element in HTML5?

1. <article>
2. <footer>
3. <div>
4. <section>

Answer: 3. <div>

Explanation: <div> is a generic container in HTML and is not considered a

semantic element. Semantic elements like <article>, <footer>, and
<section> clearly describe their meaning in a human- and
machine-readable way.

Question 19: Which HTML5 element is used for marking up a thematic break in a
page?

1. <break>
2. <line>
3. <hr>
4. <divider>

Answer: 3. <hr>

Explanation: The <hr> element represents a thematic break between

paragraph-level elements (for example, a change of scene in a story, or a
shift of topic within a section).

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
32
Question 20: Which attribute is used with the meta tag to define the character set
of an HTML document?

1. charset
2. encoding
3. setchar
4. character

Answer: 1. charset

Explanation: The charset attribute in the <meta> tag specifies the character
encoding for the HTML document.

Question 21: What does the placeholder attribute provide in an input field?

1. A default value that is submitted with the form

2. A hint to the user of what can be entered in the field
3. A label for the input field
4. Mandatory text that must be entered by the user

Answer: 2. A hint to the user of what can be entered in the field

Explanation: The placeholder attribute provides a short hint that describes

the expected value of an input field.

Question 22: Which HTML5 element defines independent, self-contained content?

1. <section>
2. <article>
3. <aside>
4. <header>

Answer: 2. <article>

Explanation: An <article> element specifies independent, self-contained

content that could potentially be distributed or reused.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
33
Question 23: What is the correct HTML element for inserting a line break?

1. <br>
2. <break>
3. <lb>
4. <line>

Answer: 1. <br>

Explanation: The <br> tag is used in HTML to insert a line break in text.

Question 24: Which HTML5 element is used for specifying a group of introductory
or navigational aids?

1. <group>
2. <section>
3. <header>
4. <nav>

Answer: 4. <nav>

Explanation: The <nav> element is used to define a set of navigation links

in HTML5.

Question 25: What does the srcset attribute in the <img> element do?

1. Sets a source for the image

2. Defines multiple sizes of the same image
3. Provides a textual description of the image
4. Specifies the path to the image source

Answer: 2. Defines multiple sizes of the same image

Explanation: The srcset attribute in the <img> tag allows specifying different
images to be displayed based on the screen size or resolution, enabling
responsive image loading.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
34
Question 26: Which attribute in the <a> tag specifies the URL of the page the link
goes to?

1. href
2. src
3. link
4. url

Answer: 1. href

Explanation: The href attribute in the <a> (anchor) tag specifies the URL of
the page the link goes to.

Question 27: What does the viewport meta tag do in HTML5?

1. Adjusts the visible area of the web page

2. Locks the orientation of the device
3. Controls the zoom level of the page
4. Sets the initial scale of the webpage

Answer: 1. Adjusts the visible area of the web page

Explanation: The viewport meta tag is used in HTML5 to control the layout
on mobile browsers. By default, it adjusts the width of the page to the
screen width of the device.

Question 28: Which element is used in HTML5 to represent a progress of a task?

1. <progress>
2. <meter>
3. <task>
4. <loading>

Answer: 1. <progress>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
35
Explanation: The <progress> element represents the progress of a task in
HTML5.

Question 29: What is the purpose of the autofocus attribute in HTML5?

1. Automatically focus on a form element when the page loads

2. Auto-validate form input
3. Automatically update content
4. Autofill form fields based on history

Answer: 1. Automatically focus on a form element when the page loads

Explanation: The autofocus attribute is a boolean attribute that lets you

specify that a form input should automatically be focused when the page
loads.

Question 30: Which HTML5 tag is used to specify an ordered list?

1. <ul>
2. <ol>
3. <list>
4. <dl>

Answer: 2. <ol>

Explanation: The <ol> tag is used to define an ordered list in HTML5.

Question 31: In HTML5, which element is used to define emphasized text?

1. <em>
2. <i>
3. <bold>
4. <strong>

Answer: 1. <em>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
36
Explanation: The <em> tag is used to define emphasized text in HTML5,
which typically displays as italicized text.

Question 32: What is the default value of the type attribute for a <button>
element in HTML5?

1. button
2. submit
3. reset
4. menu

Answer: 2. submit

Explanation: The default value of the type attribute for a <button> element
is submit.

Question 33: Which HTML5 element is best suited for marking up a time-stamp?

1. <datetime>
2. <timestamp>
3. <time>
4. <date>

Answer: 3. <time>

Explanation: The <time> element represents a specific period in time or a

time-stamp in HTML5.

Question 34: What is the purpose of the placeholder attribute in HTML5?

1. To provide a hint to the user about what to enter in the field

2. To pre-fill the field with default data
3. To mark the field as a placeholder for future data
4. To display a tooltip when hovering over the field

Answer: 1. To provide a hint to the user about what to enter in the field

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
37
Explanation: The placeholder attribute provides a hint to the user about
what information to enter in the input field.

Question 35: In HTML5, which element is used to group together thematic

sections of content?

1. <group>
2. <section>
3. <block>
4. <divide>

Answer: 2. <section>

Explanation: The <section> element is used in HTML5 to group together

thematic sections of content.

Question 36: What does the required attribute in an input field ensure in HTML5?

1. The field must be filled out before submitting the form

2. The input is necessary for the form’s submission
3. The field will be validated against pattern requirements
4. Both 1 and 2

Answer: 4. Both 1 and 2

Explanation: The required attribute specifies that an input field must be

filled out before submitting the form and is necessary for the form's
submission.

Question 37: Which HTML5 element defines a caption for a figure element?

1. <figcaption>
2. <caption>
3. <title>
4. <headline>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
38
Answer: 1. <figcaption>

Explanation: The <figcaption> element is used to define a caption for a

figure element in HTML5.

Question 38: How is a new article element indicated in HTML5?

1. <new article>
2. <article new>
3. <article>
4. <newarticle>

Answer: 3. <article>

Explanation: The <article> element is used to indicate a new article

element in HTML5.

Question 39: Which HTML5 element is used for specifying metadata about an
HTML document?

1. <meta>
2. <data>
3. <info>
4. <metadata>

Answer: 1. <meta>

Explanation: The <meta> tag is used in HTML5 to specify metadata about

an HTML document, such as character set, page description, keywords,
author of the document, and viewport settings.

Question 40: What is the purpose of the lang attribute in an HTML5 document?

1. Specifies the programming language of the content

2. Defines the language used in the element
3. Indicates the language for spell checking

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
39
 4. Determines the language for text-to-speech conversion

Answer: 2. Defines the language used in the element

Explanation: The lang attribute is used to define the language used in the
element, which can be important for screen readers and other assistive
technologies.

Question 41: Which element in HTML5 is used to represent a control for

generating a public-private key pair?

1. <keygen>
2. <generator>
3. <publickey>
4. <keypair>

Answer: 1. <keygen>

Explanation: The <keygen> element represents a control for generating a

key pair (a public key and a private key) in HTML5.

Question 42: In HTML5, which element is used for displaying the result of a
calculation?

1. <calculate>
2. <result>
3. <output>
4. <return>

Answer: 3. <output>

Explanation: The <output> element is used in HTML5 for representing the

result of a calculation.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
40
Question 43: Which HTML5 element is used to specify a header for a document or
section?

1. <header>
2. <top>
3. <heading>
4. <head>

Answer: 1. <header>

Explanation: The <header> element is used in HTML5 to represent a

container for introductory content or a set of navigational links.

Question 44: Which attribute in HTML5 specifies the character encoding for the
HTML document?

1. charset
2. encoding
3. character
4. setchar

Answer: 1. charset

Explanation: The charset attribute in the <meta> tag specifies the character
encoding for the HTML document.

Question 45: What does the pattern attribute in an HTML5 input field do?

1. Specifies a regular expression the input field's value is checked

against
2. Determines the pattern in which data is entered
3. Creates a visual pattern in the background of the field
4. Sets the input format for date and time fields

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
41
Answer: 1. Specifies a regular expression the input field's value is checked
against

Explanation: The pattern attribute specifies a regular expression that the

<input> element's value is checked against.

Question 46: Which HTML5 element is used to define the navigation links?

1. <navigate>
2. <nav>
3. <links>
4. <navigation>

Answer: 2. <nav>

Explanation: The <nav> element is used in HTML5 to define a set of

navigation links.

Question 47: Which HTML5 element is used to specify a group of introductory or

navigational aids for a page?

1. <group>
2. <header>
3. <section>
4. <intro>

Answer: 2. <header>

Explanation: The <header> element is used in HTML5 to specify a group of

introductory or navigational aids for a page.

Question 48: In HTML5, what is the purpose of the data-* attribute?

1. To store custom data private to the page or application

2. To embed data that needs to be sent to the server
3. To hold data about the user's browser

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
42
 4. To store configuration settings for JavaScript libraries

Answer: 1. To store custom data private to the page or application

Explanation: The data-* attribute is used to store custom

Question 49: Which HTML5 element is specifically used for marking up a block of
code?

1. <code>
2. <script>
3. <block>
4. <pre>

Answer: 1. <code>

Explanation: The <code> element is used in HTML5 to define a piece of

computer code.

Question 50: Which element in HTML5 is best used for marking up a scalar
measurement within a known range, like a disk usage?

1. <gauge>
2. <measure>
3. <meter>
4. <range>

Answer: 3. <meter>

Explanation: The <meter> element represents a scalar measurement within

a known range, such as disk usage or the relevance of a query result.

Question 51: What does the autoplay attribute do in a <video> or <audio>

element in HTML5?

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
43
 1. Automatically downloads the video or audio
2. Automatically plays the video or audio as soon as it can do so without
stopping
3. Repeats the video or audio automatically after it's finished
4. Plays the video or audio in a loop

Answer: 2. Automatically plays the video or audio as soon as it can do so

without stopping

Explanation: The autoplay attribute is a boolean attribute. When present, it

specifies that the video or audio will start playing as soon as it is ready,
without waiting for the entire file to download.

Question 52: Which HTML5 attribute specifies whether the content of an element
should be editable or not?

1. editable
2. contenteditable
3. modify
4. changeable

Answer: 2. contenteditable

Explanation: The contenteditable attribute is used to specify whether the

content of an element is editable or not.

Question 53: In HTML5, which element is used to define a section of content that
should be independently distributable or reusable?

1. <section>
2. <article>
3. <block>
4. <content>

Answer: 2. <article>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
44
Explanation: The <article> element represents a self-contained composition
in a document, page, application, or site, which is intended to be
independently distributable or reusable, e.g., in syndication.

Question 54: Which HTML5 element is used for specifying a standard way to
embed a video in a webpage?

1. <movie>
2. <media>
3. <video>
4. <clip>

Answer: 3. <video>

Explanation: The <video> element is used to embed video content in a

document.

Question 55: What is the main function of the <figcaption> element in HTML5?

1. To define a caption for a <figure> element

2. To create a legend for a form control
3. To provide a title for an image
4. To label a diagram or illustration

Answer: 1. To define a caption for a <figure> element

Explanation: The <figcaption> element is used to define a caption for a

<figure> element in HTML5.

Question 56: Which attribute is used to specify the URL of the resource to be used
by the object in HTML5?

1. src
2. data
3. href

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
45
 4. type

Answer: 2. data

Explanation: The data attribute is used on the <object> element to specify

the URL of the resource to be used by the object.

Question 57: In HTML5, which attribute of the <textarea> element specifies the
visible width of the text control?

1. rows
2. cols
3. length
4. width

Answer: 2. cols

Explanation: The cols attribute in the <textarea> element specifies the

visible width of a text area.

Question 58: What is the role of the alt attribute for images in HTML5?

1. To provide an alternative text for an image

2. To specify the URL of the image
3. To define a caption for the image
4. To set the size of the image

Answer: 1. To provide an alternative text for an image

Explanation: The alt attribute provides alternative information for an image

if a user for some reason cannot view it (because of slow connection, an
error in the src attribute, or if the user uses a screen reader).

Question 59: Which HTML5 element is used to specify a header for a section or
page?

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
46
 1. <header>
2. <top>
3. <head>
4. <sectionhead>

Answer: 1. <header>

Explanation: The <header> element is used to represent a group of

introductory or navigational aids for a page or section.

Question 60: In HTML5, which element represents a command that a user can
perform or activate?

1. <command>
2. <button>
3. <action>
4. <do>

Answer: 2. <button>

Explanation: The <button> element represents a clickable button, which

can be used to submit forms or anywhere in a document for accessible,
standard button functionality.

Question 61: What is the correct HTML5 element for playing audio files?

1. <sound>
2. <audio>
3. <mp3>
4. <music>

Answer: 2. <audio>

Explanation: The <audio> element is used to embed sound content in

documents. It can be used to play audio files.

Question 62: Which HTML5 element defines a set of navigation links?

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
47
 1. <nav>
2. <navigate>
3. <links>
4. <navigation>

Answer: 1. <nav>

Explanation: The <nav> element defines a set of navigation links in

HTML5.

Question 63: Which HTML5 element is used to define a part of text in an alternate
voice or mood?

1. <mark>
2. <em>
3. <strong>
4. <sarcasm>

Answer: 2. <em>

Explanation: The <em> element is used to define emphasized text. The

content is displayed in an italicized version of the normal font to denote a
different mood or voice.

Question 64: In HTML5, which element is used to define emphasized text?

1. <em>
2. <i>
3. <bold>
4. <strong>

Answer: 1. <em>

Explanation: The <em> tag is used to define emphasized text in HTML5,

which typically displays as italicized text.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
48
Question 65: Which HTML5 element is used to represent a piece of a webpage
that is independent of its surroundings?

1. <section>
2. <article>
3. <aside>
4. <block>

Answer: 2. <article>

Explanation: The <article> element represents a piece of content that is

independent of its surroundings.

Question 66: Which attribute in HTML5 is used to specify that an input element
should be disabled?

1. disable
2. inactive
3. off
4. disabled

Answer: 4. disabled

Explanation: The disabled attribute is a boolean attribute that indicates that

the input element should be disabled.

Question 67: What is the purpose of the download attribute in the <a> tag in
HTML5?

1. To start downloading a resource when the link is clicked

2. To link to a downloadable file
3. To set the path for downloading files
4. To provide a download count for the resource

Answer: 1. To start downloading a resource when the link is clicked

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
49
Explanation: The download attribute, when present, indicates that the
author intends the hyperlink to be used for downloading a resource.

Question 68: Which HTML5 element is used to specify independent self-contained

content?

1. <section>
2. <article>
3. <aside>
4. <block>

Answer: 2. <article>

Explanation: The <article> element is used to define independent,

self-contained content.

Question 69: In HTML5, what does the async attribute in a <script> tag do?

1. It stops the script until the page has finished parsing

2. It runs the script asynchronously as soon as it is available
3. It defers the script to run after the page has finished parsing
4. It checks for syntax errors in the script

Answer: 2. It runs the script asynchronously as soon as it is available

Explanation: The async attribute in a <script> tag allows the script to be

executed asynchronously as soon as it is available, without waiting for the
entire page to be loaded.

Question 70: What is the purpose of the defer attribute in a <script> tag in
HTML5?

1. To delay the execution of the script until after the page has finished
parsing
2. To run the script in the background

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
50
 3. To load the script after all images have loaded
4. To execute the script immediately

Answer: 1. To delay the execution of the script until after the page has
finished parsing

Explanation: The defer attribute is a boolean attribute that indicates

Question 71: Which HTML5 element is used to define a section of a document

that links to other parts of the document or to other documents?

1. <link>
2. <nav>
3. <connect>
4. <relation>

Answer: 2. <nav>

Explanation: The <nav> element is used to define a section of a document

that contains navigation links to other parts of the document or to other
documents.

Question 72: In HTML5, which element is used to represent data with more than
one dimension?

1. <data>
2. <datalist>
3. <table>
4. <grid>

Answer: 3. <table>

Explanation: The <table> element is used to represent tabular data — that

is, information presented in a two-dimensional table comprised of rows and
columns of cells containing data.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
51
Question 73: What does the controls attribute do in a <video> or <audio> element
in HTML5?

1. Adds video or audio controls like play, pause, and volume

2. Controls the number of times the media loops
3. Sets the default playback rate
4. Determines the control flow of the script

Answer: 1. Adds video or audio controls like play, pause, and volume

Explanation: The controls attribute is a boolean attribute. When present, it

displays controls like play, pause, and volume in the <video> or <audio>
element.

Question 74: Which HTML5 element represents a list of commands?

1. <cmd>
2. <list>
3. <command>
4. <menu>

Answer: 4. <menu>

Explanation: The <menu> element represents a list of commands in

HTML5.

Question 75: In HTML5, which element is used to define additional details that the
user can view or hide?

1. <details>
2. <summary>
3. <extra>
4. <moreinfo>

Answer: 1. <details>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
52
Explanation: The <details> element is used to specify additional details that
the user can view or hide on demand.

Question 76: Which HTML5 element is used to define a control for entering a date
(year, month, and day, with no time)?

1. <datetime>
2. <date>
3. <input type="date">
4. <calendar>

Answer: 3. <input type="date">

Explanation: The <input type="date"> element is used to create an input

field for entering a date (year, month, and day, with no time).

Question 77: What is the purpose of the for attribute in the <label> element in
HTML5?

1. To specify the form element a label is bound to

2. To define the formatting of the label
3. To indicate the order of label elements
4. To determine the focus for the label

Answer: 1. To specify the form element a label is bound to

Explanation: The for attribute in the <label> element specifies which form
element a label is bound to.

Question 78: In HTML5, what is the purpose of the <figcaption> element?

1. To define a caption for a <figure> element

2. To provide a title for a section
3. To add a legend to a graph
4. To label an image or illustration

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
53
Answer: 1. To define a caption for a <figure> element

Explanation: The <figcaption> element is used to define a caption for a

<figure> element in HTML5.

Question 79: Which HTML5 element is used to define a container for an external
application or interactive content (a plug-in)?

1. <embed>
2. <app>
3. <interactive>
4. <external>

Answer: 1. <embed>

Explanation: The <embed> element is used to define a container for an

external application or interactive content, such as a web browser plug-in.

Question 80: In HTML5, which element is used to define a piece of computer

code?

1. <code>
2. <program>
3. <script>
4. <computercode>

Answer: 1. <code>

Explanation: The <code> element is used to define a piece of computer

code in HTML5. It is typically displayed in the browser's default monospace
font.

Question 81: What is the purpose of the autoplay attribute in HTML5 media
elements like <video> and <audio>?

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
54
 1. To start playing the media automatically when the page is loaded
2. To continuously play the media in a loop
3. To preload the media when the page is loaded
4. To mute the media by default

Answer: 1. To start playing the media automatically when the page is

loaded

Explanation: The autoplay attribute is a boolean attribute that, when

present, indicates that the media should automatically begin playback as
soon as it is able to do so without stopping to finish loading the data.

Question 82: Which HTML5 element represents a thematic break between

paragraph-level elements (for example, a change of scene in a story, or a shift of
topic within a section)?

1. <break>
2. <change>
3. <hr>
4. <divider>

Answer: 3. <hr>

Explanation: The <hr> element represents a thematic break between

paragraph-level elements, such as a change of scene in a story or a shift of
topic within a section.

Question 83: What does the multiple attribute do in an <input> element in

HTML5?

1. Allows the user to enter multiple values

2. Enables multiple selections in a dropdown list
3. Permits multiple file uploads
4. Both 2 and 3

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
55
Answer: 4. Both 2 and 3

Explanation: The multiple attribute is a boolean attribute that, when

present, specifies that multiple values can be entered or selected in the
input.

Question 84: Which HTML5 element is used to define a section in a document,

such as chapters, headers, footers, or any other sections of the document?

1. <section>
2. <part>
3. <division>
4. <area>

Answer: 1. <section>

Explanation: The <section> element is used to define a section in a

document.

Question 85: In HTML5, which element is used to represent a container for

introductory content or a set of navigational links?

1. <header>
2. <intro>
3. <navigation>
4. <top>

Answer: 1. <header>

Explanation: The <header> element represents a container for introductory

content or a set of navigational links in HTML5.

Question 86: Which HTML5 element is used for content that is tangentially related
to the content around it, like a sidebar?

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
56
 1. <sidebar>
2. <related>
3. <aside>
4. <tangent>

Answer: 3. <aside>

Explanation: The <aside> element is used for content that is tangentially

related to the content around it, like a sidebar.

Question 87: What is the purpose of the preload attribute in a <video> or <audio>
element in HTML5?

1. To preload the entire media file

2. To buffer enough media to start playing
3. To load metadata of the media file
4. To prevent the media from preloading

Answer: 2. To buffer enough media to start playing

Explanation: The preload attribute specifies if and how the author thinks
that the video/audio should be loaded when the page loads. It allows
buffering enough media to start playing.

Question 88: In HTML5, which attribute for the <meta> tag specifies the
description of the page?

1. content
2. description
3. name="description"
4. meta-description

Answer: 3. name="description"

Explanation: The name="description" attribute in the <meta> tag is used to

specify the description of the page.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
57
Question 89: Which HTML5 element represents a list of items where the order of
the items is not important?

1. <ol>
2. <ul>
3. <list>
4. <items>

Answer: 2. <ul>

Explanation: The <ul> (unordered list) element represents a list of items

where the order of the items is not important.

Question 90: In HTML5, which attribute of the <track> element specifies the kind
of text track?

1. type
2. kind
3. mode
4. track-type

Answer: 2. kind

Explanation: The kind attribute of the <track> element specifies the kind of
text track (subtitles, captions, descriptions, chapters, or metadata).

Question 91: What is the purpose of the maxlength attribute in an <input>

element in HTML5?

1. To specify the maximum length of the input value

2. To set the maximum number of characters allowed
3. To define the maximum value for numeric input types
4. Both 1 and 2

Answer: 4. Both 1 and 2

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
58
Explanation: The maxlength attribute specifies the maximum length of the
input value in terms of the number of characters allowed.

Question 92: Which HTML5 element is used to represent a scalar value within a
known range, such as the volume control?

1. <range>
2. <measure>
3. <slider>
4. <input type="range">

Answer: 4. <input type="range">

Explanation: The <input type="range"> element is used to represent a

scalar value within a known range, such as a slider control for volume.

Question 93: In HTML5, what does the form attribute of the <button> element
specify?

1. The type of the form

2. The action to be performed by the button
3. The form to which the button belongs
4. The method used by the form

Answer: 3. The form to which the button belongs

Explanation: The form attribute of the <button> element specifies the form
the button belongs to, linking the button to a specific form even if it is not
contained within it.

Question 94: What is the function of the placeholder attribute in HTML5 input
elements?

1. To provide a hint to the user about what kind of information is

expected in the input

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
59
 2. To set a default value that is submitted with the form
3. To display a label within the input element
4. To store temporary data until the form is submitted

Answer: 1. To provide a hint to the user about what kind of information is

expected in the input

Explanation: The placeholder attribute provides a hint to the user about

what kind of information is expected in the input field, typically displayed
until the user starts typing in the field.

Question 95: Which HTML5 element defines a group of media content, and is
typically used with the <audio> or <video> elements?

1. <media>
2. <group>
3. <source>
4. <track>

Answer: 3. <source>

Explanation: The <source> element is used within media elements like

<audio> or <video> to specify multiple media sources for different devices
or browsers.

Question 96: In HTML5, which element is used to define a container for vector
graphics?

1. <svg>
2. <vector>
3. <graphics>
4. <draw>

Answer: 1. <svg>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
60
Explanation: The <svg> (Scalable Vector Graphics) element is used to
define a container for vector graphics in HTML5.

Question 97: What is the purpose of the formaction attribute in an <input

type="submit"> element in HTML5?

1. To specify the action for the form where the input element is located
2. To override the form's action attribute for that specific submit button
3. To define a group of actions for form submission
4. To specify the method of form submission

Answer: 2. To override the form's action attribute for that specific submit
button

Explanation: The formaction attribute in an <input type="submit"> element

allows you to override the action attribute of the form for that specific
submit button.

Question 98: Which HTML5 element is used to define a block of text that has been
quoted from another source?

1. <blockquote>
2. <quote>
3. <citation>
4. <source>

Answer: 1. <blockquote>

Explanation: The <blockquote> element is used to define a block of text

that is quoted from another source.

Question 99: In HTML5, what does the nowrap attribute in a <td> element do?

1. Prevents the text in a table cell from wrapping

2. Automatically adjusts the width of the cell to fit the content

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
61
 3. Aligns the text to the top of the cell
4. Stretches the cell to fit the largest item

Answer: 1. Prevents the text in a table cell from wrapping

Explanation: The nowrap attribute in a <td> (table cell) element prevents

the text within the cell from wrapping.

Question 100: Which HTML5 element is used to define a header for a document
or section?

1. <head>
2. <header>
3. <top>
4. <sectionhead>

Answer: 2. <header>

Explanation: The <header> element is used in HTML5 to define a header

for a document or a section.

CSS Tip and Basics:

1. What does CSS stand for?
CSS stands for Cascading Style Sheets.

Purpose: It's used for designing and customizing the appearance of web pages by
styling HTML elements.

2. HTML Tag for Defining an Internal Style Sheet:

Use the <style> tag within the HTML document's <head> section.

<head>
<style>

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
62
body { background-color: lightblue; }
</style>
</head>

Tip: Internal style sheets are useful for single-page styles. For larger projects,
external CSS files are recommended.

3. Selecting an Element with ID "demo" in CSS:

Use the hashtag # followed by the ID.

#demo {
color: blue;
}

Tip: IDs are unique to each element, making #demo select the specific element
with id="demo".

4. Selecting Elements with Class Name "example":

Use the dot . followed by the class name.

.example {
font-size: 20px;
}
Tip: Class selectors are used to select and style all elements with the specified
class attribute.

5. Capitalizing Each Word in a Text:

Use the text-transform property with value capitalize.
p{
text-transform: capitalize;
}
Tip: This property capitalizes the first letter of each word in the selected
element(s).

6. Changing the Background Color:

Use the background-color property.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
63
body {
background-color: lightgray;
}
Tip: You can use color names, RGB, RGBA, HEX, etc., as values for this property.

7. Changing the Font of an Element:

Use the font-family property.

p{
font-family: Arial, sans-serif;
}
Tip: Always provide a fallback font (like sans-serif or serif) in case the first choice
font isn't available.

8. Making a List with Square Items:

Use the list-style-type property on ul or li elements.
ul {
list-style-type: square;
}
Tip: This styles the bullet points of a list. Other values include circle, disc, none,
etc.

9. Selecting All <p> Elements Inside a <div>:

Use descendant combinator (space) to select nested elements.

div p {
color: red;
}

Tip: This selects all <p> elements that are inside any <div> element.

10. Understanding the Given CSS Code:

Please provide the specific CSS code you're referring to for a detailed
explanation.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
64
Text Styling and Formatting in CSS: Detailed
Guide with Examples
1. CSS Property for Text Size:
Property: font-size
p{
font-size: 16px;
}
Tip: You can use different units like px, em, rem, or % for setting the size.

2. Displaying Hyperlinks Without Underline:

Property: text-decoration
a{
text-decoration: none;
}

Tip: This property is also used to add underline, overline, or line-through

decorations.

3. Changing Left Margin of an Element:

Property: margin-left
div {
margin-left: 20px;
}

Tip: You can also use margin shorthand to set margins for all sides.

4. Making Text Bold:

Property: font-weight
strong {
font-weight: bold;
}
Tip: Besides bold, you can use numeric values like 700 for weight.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
65
5. Setting Spacing Between Words:
Property: word-spacing
p{
word-spacing: 5px;
}

Tip: Adjust the value to increase or decrease space between words.

6. Changing the Font Name:

Property: font-family

body {
font-family: 'Arial', sans-serif;
}

Tip: Always provide a fallback font type. Use font names in quotes if they contain
spaces.

7. Making a Border Visible on All Sides of a Box:

Property: border
div {
border: 2px solid black;
}
Tip: The border shorthand sets the width, style, and color of the border.

8. Changing Font Color of an Element:

Property: color
h1 {
color: blue;
}

Tip: color can be specified using names, HEX, RGB, or HSL values.

9. Default Value of the Position Property:

Default Value: static

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
66
In static positioning, elements are positioned according to the normal flow of the
document.

10. Creating a Circle Shape in CSS:

.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}

Tip: border-radius: 50% transforms a square into a circle. Ensure height and width
are equal.

11. Applying CSS Style for a Component with Two

Specific Classes:
Syntax: Use a dot . to concatenate the class names without any space.
.classOne.classTwo {
color: green;
}

Example HTML: <div class="classOne classTwo">Text</div>

Tip: This rule will only apply to elements that have both classOne and classTwo.

Selectors and Specificity in CSS: A

Comprehensive Guide with Examples
1. Setting Background Image of an Element:
Property: background-image
div {
background-image: url('image.jpg');
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
67
Tip: The URL should point to the image you want to set as the background. It can
be a relative or absolute path.

2. Displaying List Items Inline:

Property: display

li {
display: inline;
}
Tip: This makes list items appear in a row, rather than the default stacked
vertically.

3. Controlling Layout and Formatting of <fieldset>

Element:
Property: General layout properties like width, margin, padding, border, etc., are
used.

fieldset {
border: 2px solid gray;
padding: 10px;
width: 50%;
}

Tip: Customize your <fieldset> elements using these standard CSS properties to fit
the layout of your form.

4. Creating Rounded Corners Using CSS:

Property: border-radius
div {
border-radius: 10px;
}
Tip: The border-radius property can accept pixel values or percentages to create
circular or elliptical shapes.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
68
5. Selecting All <p> Elements with a <div> Parent:
Selector: Descendant combinator (space)

div p {
color: blue;
}
Tip: This selector targets all <p> elements that are inside a <div> element.

6. Adding Shadow to Elements:

Property: box-shadow
div {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Tip: The box-shadow property takes values for horizontal offset, vertical offset,
blur radius, and color.

7. Meaning of h1 + p in CSS:
Represents: The adjacent sibling combinator.
It selects a <p> element immediately following an <h1>.

h1 + p {
font-weight: bold;
}

Tip: This is useful when you want to style an element that directly follows another
specific element.

8. Specifying Space Between Cells in a Table:

Property: border-spacing
table {
border-spacing: 5px;
}
Tip: This property sets the distance between the borders of adjacent table cells.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
69
9. Setting Opacity of an Element:
Property: opacity
div {
opacity: 0.5; /* 50% transparency */
}
Tip: opacity ranges from 0 (completely transparent) to 1 (completely opaque).

10. Purpose of the z-index Property:

Function: Controls the stacking order of positioned elements.
div {
position: relative;
z-index: 10;
}

Tip: Elements with a higher z-index cover those with a lower one. It works only on
elements with a position value other than static.

Layout and Positioning in CSS: Detailed

Insights with Examples
1. Function of the CSS Display Property:
Purpose: The display property specifies how an element is displayed.
div {
display: none; /* Hide an element */
}
span {
display: block; /* Make an inline element behave like a block-level element
*/
}

Tip: Common values include block, inline, inline-block, none, and more recently,
flex and grid.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
70
2. Selecting All Child <p> Elements of a <div>:
Selector: Child combinator (>)

div > p {
color: blue;
}
Tip: This selector targets only <p> elements that are direct children of a <div>.

3. Invalid CSS Unit:

Invalid Unit: Example of a non-valid unit is ptx.
Valid Units: px, em, rem, %, vh, vw, etc.

4. Purpose of the Overflow Property in CSS:

Function: Controls what happens to content that exceeds the bounds of its
container.

div {
overflow: hidden; /* Hides content that overflows the div's box */
}

Tip: Other values include scroll, auto, and visible.

5. Difference Between visibility and display:

visibility: hidden; makes an element invisible, but it still takes up space in the
layout.

display: none; removes the element from the document flow, and it takes up no
space.

.hidden {
visibility: hidden;
}
.gone {
display: none;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
71
Tip: Use display: none; for removing an element completely and visibility: hidden;
to hide but maintain space.

6. Changing Cursor Type on Hover:

Property: cursor

button:hover {
cursor: pointer; /* Changes the cursor to a pointer when hovering over a
button */
}

Tip: cursor can be set to various values like default, pointer, crosshair, etc.

7. Using :nth-child() Pseudo-Class in CSS:

Purpose: Selects the nth child of a parent element.
p:nth-child(2) {
color: blue; /* Selects the second <p> element */
}

Tip: You can use formulas like nth-child(2n+1) for complex selections.

8. Default Position Value in CSS:

Default Value: static

In this default state, elements are positioned according to the normal flow of the
document.

9. Adding a Comment in a CSS File:

Syntax: Comments in CSS are added using /* comment */.
/* This is a comment */
body {
background-color: white;
}
Tip: Use comments to explain sections of CSS code, making it easier to understand
and maintain.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
72
Box Model, Borders, and Layout in CSS:
In-Depth Explorations
1. Creating Space Around Elements (Outside
Borders):
Property: margin

div {
margin: 10px; /* Creates 10px space around the div */
}

Tip: margin can be set for each side individually (e.g., margin-top, margin-right,
etc.) or using shorthand notation.

2. The Flex Property in CSS Flexbox Layout:

Function: In a flex container, the flex property specifies how a flex item will grow
or shrink to fit the available space.
.flex-item {
flex: 1; /* Flex item will grow or shrink to fill the space */
}

Tip: flex is a shorthand for flex-grow, flex-shrink, and flex-basis.

3. Purpose of the Clear Property in CSS:

Function: Prevents floating elements from affecting the element it's applied to.

div {
clear: both; /* Neither left nor right floating elements will affect this div */
}
Tip: Commonly used in layouts where floating elements are involved, ensuring
consistent spacing and alignment.

4. Controlling Text Wrapping in CSS:

Property: white-space

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
73
p{
white-space: nowrap; /* Prevents text from wrapping to a new line */
}

Tip: Other values include normal, pre, pre-wrap, and pre-line.

5. Creating a Numbered List:

HTML Element: <ol> (Ordered List)

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Tip: <ol> automatically creates a numbered list, with <li> for each item.

6. Moving Content Away from Borders:

Property: padding

div {
padding: 15px; /* Adds space between the content and the border of the
div */
}

Tip: Padding increases the internal space within an element, unlike margins which
create space outside.

7. Default Display Value for Most Elements:

Default Value: block for elements like <div>, <p>, etc., and inline for elements like
<span>, <a>, etc.

8. Function of the :after Pseudo-Element:

Purpose: Inserts content after the content of the selected element.
p:after {
content: ' *'; /* Adds an asterisk after every paragraph */
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
74
Tip: Commonly used for decorative elements or to append content.

9. Selecting Every <p> Element Whose Parent is Not a

<div>:
Selector: :not() and direct child combinator (>)

:not(div) > p {
color: red; /* Styles <p> elements that are not direct children of <div> */
}
Tip: This selector is versatile for excluding specific parent-child relationships.

10. Changing Style of the Bottom Border:

Property: border-bottom

div {
border-bottom: 2px solid blue; /* Sets a blue bottom border for div */
}
Tip: Similar properties exist for border-top, border-left, and border-right.

11. Effect of position: relative; in CSS:

Function: This property sets the element's position relative to its normal position.

div {
position: relative;
top: 10px; /* Moves the div 10px down from its original position */
}

Tip: Relative positioning doesn’t remove the element from the normal document
flow, unlike absolute positioning.

Transformations and Animations in CSS:

Essential Techniques and Examples

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
75
1. Changing Color of an Element on Mouse Hover:
Property: :hover pseudo-class
button:hover {
color: red; /* Changes the text color to red when the mouse hovers over it
*/
}

Tip: The :hover pseudo-class can be applied to almost any element, not just links.

2. Creating a Drop Shadow Effect:

Property: box-shadow

div {
box-shadow: 5px 5px 10px grey; /* Adds a grey shadow to the div */
}
Tip: box-shadow can accept multiple values to create complex shadow effects.

3. Controlling Space Between Letters:

Property: letter-spacing
p{
letter-spacing: 2px; /* Increases the space between letters */
}
Tip: Negative values are allowed to reduce the space between letters.

4. Changing Order of Flex Items:

Property: order in Flexbox

.flex-item {
order: 2; /* Changes the order of this flex item */
}

Tip: Items in a flex container can be reordered without changing the HTML
structure.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
76
5. Center Aligning Text Horizontally:
Property: text-align

p{
text-align: center; /* Horizontally centers the text inside a paragraph */
}

Tip: text-align: center; is one of the most commonly used properties for text
alignment.

6. Adding a Border to an Element:

Property: border

div {
border: 1px solid black; /* Adds a solid black border */
}
Tip: The border property is shorthand for border-width, border-style, and
border-color.

7. Making Font Italic:

Property: font-style

p{
font-style: italic; /* Makes the paragraph text italic */
}
Tip: Other values for font-style include normal and oblique.

8. Creating Rounded Corners with Specific Radius:

Property: border-radius
div {
border-radius: 10px; /* Rounds the corners of the div */
}

Tip: You can specify different radii for each corner (e.g., border-radius: 10px 5px
15px 20px; for top-left, top-right, bottom-right, and bottom-left respectively).

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
77
9. Making Text Bold:
Property: font-weight

strong {
font-weight: bold; /* Makes the text within <strong> bold */
}

Tip: Besides bold, you can also specify numeric values for weight (e.g., 700).

Spacing and Alignment in CSS: Detailed Guide

with Examples
1. Specifying Space Between Lines of Text:
Property: line-height
p{
line-height: 1.5; /* Sets the space between lines to 1.5 times the normal
line space */
}
Tip: line-height can improve readability, especially in large blocks of text.

2. Applying Styles to the First Letter of a Text Element:

Pseudo-element: ::first-letter

p::first-letter {
font-size: 200%;
color: blue;
}

Tip: This is often used to create a drop cap or stylize the first letter of a paragraph.

3. Transforming Text to Uppercase:

Property: text-transform: uppercase;

p{

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
78
 text-transform: uppercase; /* Converts all text in the paragraph to
uppercase */
}

Tip: Other values for text-transform include lowercase, capitalize, and none.

4. Purpose of the rgba() Color Format:

Function: Allows specifying colors with an alpha channel (transparency level).

div {
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}
Tip: The rgba format is useful for creating overlay effects or semi-transparent
elements.

5. Controlling Width of an Element's Border:

Property: border-width
div {
border-width: 5px; /* Sets a 5px border width */
}
Tip: You can specify individual border widths for each side (e.g., border-width: 1px
2px 3px 4px;).

6. Changing Background Color on Mouse Hover:

Property: :hover pseudo-class with background-color
button:hover {
background-color: lightblue; /* Changes background color when hovered */
}

Tip: This property is widely used for interactive elements like buttons and links to
improve user experience.

7. Specifying List Item Markers:

Property: list-style-type

ul {

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
79
 list-style-type: square; /* Uses squares as the list item marker */
}

Tip: For ordered lists (<ol>), values like decimal or lower-alpha can be used.

8. Purpose of the CSS Overflow-x Property:

Function: Controls how overflow is handled horizontally in a container.
div {
overflow-x: scroll; /* Adds a horizontal scrollbar if the content overflows */
}
Tip: Use overflow-x when you want to control horizontal overflow without
affecting the vertical overflow.

9. Selecting All Even Rows of a Table:

Selector: :nth-child() pseudo-class

tr:nth-child(even) {
background-color: lightgray;
}
Tip: This CSS selector is particularly useful for styling alternate rows in tables for
better readability.

10. Purpose of text-decoration: underline;:

Function: Adds an underline to the text.

a{
text-decoration: underline; /* Underlines all anchor (link) text */
}

Tip: Commonly used for emphasizing or highlighting text, especially for links.

Pseudo-Classes and Elements in CSS: A

Comprehensive Exploration

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
80
1. Changing Color of Visited Links:
Property: :visited pseudo-class
a:visited {
color: purple;
}
Tip: Use :visited to style links differently once they have been clicked. Be mindful
of privacy concerns when styling visited links.

2. Applying Styles to Every Second Element:

Pseudo-class: :nth-child()
li:nth-child(2n) {
color: blue; /* Styles every second list item */
}

Tip: The 2n in nth-child(2n) represents an even pattern, thus selecting every

second element.

3. Controlling Order of Columns in CSS Grid:

Property: order within a grid item
.grid-item {
order: 2; /* Positions this item second in the grid layout */
}

Tip: The order property works in both Flexbox and CSS Grid layouts to control the
sequencing of items.

4. The display: inline-block; Property:

Function: Allows an element to flow like an inline element but retains block-level
styling capabilities.
span {
display: inline-block;
width: 50px;
height: 50px;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
81
Tip: inline-block is useful for aligning elements side by side while still being able to
set width and height.

5. Selecting the First Child of a Specific Element Type:

Pseudo-class: :first-child

p:first-child {
font-weight: bold; /* Styles the first paragraph element in its parent */
}
Tip: This selector targets the first occurrence of the specified element within its
parent.

6. Purpose of text-align: center;:

Function: Horizontally centers the inline content of an element.
div {
text-align: center; /* Centers the text inside the div */
}

Tip: It's commonly used for centering text or inline elements within a block-level
element.

7. Control by background-repeat Property:

Function: Determines how background images are repeated.

body {
background-image: url('image.jpg');
background-repeat: no-repeat; /* The image will not be repeated */
}

Tip: Other values include repeat, repeat-x, repeat-y.

8. Controlling Space Between Columns in CSS Grid:

Property: grid-column-gap or column-gap in newer specifications
.grid-container {
display: grid;
column-gap: 20px; /* Sets the gap between columns */

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
82
}
Tip: column-gap is part of the modern Grid Layout specification, providing a
standardized way to set gaps.

9. Controlling Order of Items in Flexbox:

Property: order within a flex item
.flex-item {
order: 1; /* This item will be positioned first */
}
Tip: Especially useful in responsive layouts where order might change based on
screen size.

10. Creating a CSS Class for Elements with a Specific

Attribute:
Attribute Selector:
input[type="text"] {
border-color: blue; /* Applies styles to all text-type input elements */
}

Tip: This selector targets elements based on their attributes, providing a powerful
way to apply styles conditionally.

Other Styling and Effects in CSS: Detailed

Explanations and Examples
1. flex-direction in Flexbox Layout:
Function: Determines the direction of the flex items within a flex container.
.flex-container {
display: flex;
flex-direction: column; /* Stacks flex items vertically */
}
Tip: Other values include row, row-reverse, and column-reverse.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
83
2. Purpose of white-space: nowrap;:
Function: Prevents text from wrapping to a new line.

p{
white-space: nowrap; /* Keeps text in a single line */
}
Tip: Useful in situations where text wrapping is not desirable, like in navigational
menus.

3. Applying Styles on Hover of Parent Element:

div:hover p {
color: red; /* Styles <p> when its parent <div> is hovered */
}
Tip: This is a common technique for creating interactive hover effects on
parent-child relationships.

4. Spacing Between Characters:

Property: letter-spacing
p{
letter-spacing: 2px; /* Increases the space between characters */
}
Tip: Negative values can be used for closer character spacing.

5. Vertical Text Alignment:

While CSS doesn't provide a direct way to vertically align text, a common
technique involves using display: flex and align-items.

div {
display: flex;
align-items: center; /* Vertically centers text in the div */
height: 100px;
}

Tip: Flexbox is a versatile tool for both horizontal and vertical alignment.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
84
6. Selecting the Last Child of a Specific Element Type:
Pseudo-class: :last-child
p:last-child {
font-weight: bold; /* Styles the last <p> element in its parent */
}

Tip: Targets the last occurrence of the specified element within its parent.

7. cursor: pointer; Property:

Function: Changes the cursor to a pointer, indicating a clickable element.
button {
cursor: pointer;
}
Tip: Commonly used for buttons, links, or other interactive elements.

8. Purpose of text-overflow: ellipsis;:

Function: Truncates text and shows an ellipsis (...) when it overflows its container.
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Tip: Ensure overflow is set to hidden and white-space to nowrap for this to work.

9. Specifying Style of an Element's Border:

Property: border-style

div {
border-style: dashed; /* Sets a dashed border */
}
Tip: Values include solid, dotted, dashed, double, none, etc.

10. font-family Property:

Function: Specifies the typeface used for text in an element.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
85
body {
font-family: "Arial", sans-serif;
}

Tip: Always provide fallback font options.

11. Controlling Transparency:

Property: opacity

div {
opacity: 0.5; /* 50% transparent */
}
Tip: The value of opacity ranges from 0 (fully transparent) to 1 (fully opaque).

12. Selecting Elements with a Specific Class:

.example {
color: blue; /* Selects all elements with class 'example' */
}

Tip: Class selectors are the backbone of CSS styling and are widely used due to
their versatility.

13. box-sizing: border-box; Property:

Function: The dimensions of the element include padding and border.

div {
box-sizing: border-box;
}

Tip: Makes width and height styling more predictable, especially when adding
padding or borders.

14. Selecting Links Within a Specific Section:

#sectionId a {
color: green; /* Styles all <a> elements within the element with id
'sectionId' */

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
86
}

Tip: Replace #sectionId with the actual ID of the section you're targeting.

15. Creating a Shadow Behind an Element's Border:

Property: box-shadow
div {
box-shadow: 10px 10px 5px grey; /* Adds a shadow to the div */
}
Tip: Use box-shadow to add depth to elements, enhancing the user interface.

16. Selecting the Last Element of a Specific Type:

Pseudo-class: :last-of-type

p:last-of-type {
color: red; /* Styles the last <p> element within its parent */
}

Tip: This is similar to :last-child but specific to the element type.

17. Creating a Rotating Animation:

Property: CSS Animations with @keyframes
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
div {
animation: rotate 2s infinite linear;
}
Tip: CSS animations allow for complex effects and transformations.

18. text-decoration: none; Property:

Function: Removes decoration from text, commonly used to remove underlines
from links.

a{

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
87
 text-decoration: none;
}
Tip: Essential for custom link styling.

19. Selecting the First Element of a Specific Type:

Pseudo-class: :first-of-type
p:first-of-type {
font-size: 20px; /* Styles the first <p> element within its parent */
}
Tip: Targets the first instance of the specified type, regardless of siblings of other
types.

20. Controlling Spacing Between Lines of Text:

Property: line-height

p{
line-height: 1.5; /* 1.5 times the normal line height */
}

Tip: line-height improves text readability and aesthetics, especially in large text
blocks.

CSS Quiz Questions

Question 1: What does CSS stand for?
1. Computer Style Sheets
2. Creative Style Sheets
3. Cascading Style Sheets
4. Colorful Style Sheets

Answer: 3. Cascading Style Sheets

Explanation: CSS stands for Cascading Style Sheets. It is used to style and
layout web pages — for example, to alter the font, color, size, and spacing
of your content, split it into multiple columns, or add animations and other
decorative features.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
88
Question 2: Which HTML tag is used to define an internal style sheet?
1. <style>
2. <css>
3. <script>
4. <link>

Answer: 1. <style>

Explanation:

The <style> tag is used to define style information (CSS) for a single
document. It is placed in the document's head section.

Code Sample:

<head>
<style>
body { background-color: lightblue; }
</style>
</head>

Question 3: How do you select an element with the id "demo" in CSS?

1. *demo
2. #demo
3. .demo
4. demo

Answer: 2. #demo

Explanation:

In CSS, the hash symbol (#) is used to select elements with a specific id.

Code Sample:

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
89
#demo {
color: blue;
}

Question 4: How do you select elements with the class name "example"?
1. *example
2. #example
3. .example
4. example

Answer: 3. .example

Explanation:

In CSS, the dot (.) is used to select elements with a specific class.

Code Sample:

.example {
font-size: 20px;
}

Question 5: How do you make each word in a text start with a capital letter?
1. text-transform: capitalize;
2. text-transform: uppercase;
3. text-transform: lowercase;
4. text-decoration: capitalize;

Answer: 1. text-transform: capitalize;

Explanation:

The text-transform: capitalize; CSS property capitalizes the first letter of

each word in the element's text.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
90
Code Sample:

p{
text-transform: capitalize;
}

Question 6: Which property is used to change the background color?

1. color
2. bgcolor
3. background-color
4. background

Answer: 3. background-color

Explanation:

The background-color property in CSS is used to define the background

color of an element.

Code Sample:

body {
background-color: lightblue;
}

Question 7: Which property is used to change the font of an element?

1. font-weight
2. font-style
3. text-style
4. font-family

Answer: 4. font-family

Explanation:

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
91
The font-family property specifies the font for an element.

Code Sample:

p{
font-family: "Arial", sans-serif;
}

Question 8: How do you make a list that lists its items with squares?
1. list-type: square;
2. list-style-type: square;
3. list-style: square;
4. list-decoration: square;

Answer: 2. list-style-type: square;

Explanation:

The list-style-type property applies styles to list items, such as square

bullets for unordered lists.

Code Sample:

ul {
list-style-type: square;
}

Question 9: How do you select all <p> elements inside a <div> element?
1. div p
2. div + p
3. div > p
4. div .p

Answer: 1. div p

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
92
Explanation:

The div p selector selects all <p> elements inside <div> elements.

Code Sample:

div p {
color: red;
}

Question 10: What does the following CSS code do: body { margin: 0; padding: 0;
}?
1. Removes the default margin and padding from all elements
2. Sets the margin and padding of the body element to 0
3. Centers the body element in the viewport
4. Removes the margin and padding from the document

Answer: 2. Sets the margin and padding of the body element to 0

Explanation:

This CSS code sets the margin and padding of the <body> element to 0,
effectively removing the browser's default margin and padding applied to
the body.

Code Sample:

body {
margin: 0;
padding: 0;
}

Question 11: Which CSS property controls the text size?

1. font-size
2. text-size
3. font-weight

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
93
 4. text-style

Answer: 1. font-size

Explanation: The font-size property in CSS specifies the size of the text in
an element.

Code Sample:

p{
font-size: 16px;
}

Question 12: How do you display hyperlinks without an underline?

1. text-decoration: none;
2. text-style: no-underline;
3. font-style: no-underline;
4. decoration: none;

Answer: 1. text-decoration: none;

Explanation: The text-decoration: none; property is used to remove the

underline from links.

Code Sample:

a{
text-decoration: none;
}

Question 13: Which property is used to change the left margin of an element?
1. indent
2. margin-left
3. padding-left
4. border-left

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
94
Answer: 2. margin-left

Explanation: The margin-left property is used to change the left margin of

an element.

Code Sample:

div {
margin-left: 20px;
}

Question 14: How do you make a text bold?

1. font-weight: bold;
2. text-style: bold;
3. font-style: bold;
4. text-weight: bold;

Answer: 1. font-weight: bold;

Explanation: The font-weight: bold; property is used to make text bold.

Code Sample:

p{
font-weight: bold;
}

Question 15: Which CSS property is used to set the spacing between words?
1. letter-spacing
2. spacing
3. word-spacing
4. text-spacing

Answer: 3. word-spacing

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
95
Explanation: The word-spacing property is used to set the space between
words in a text.

Code Sample:

p{
word-spacing: 2px;
}

Question 16: What is the correct CSS syntax to change the font name?
1. font: Arial;
2. font-name: Arial;
3. font-family: Arial;
4. text-font: Arial;

Answer: 3. font-family: Arial;

Explanation: The font-family property is used to specify the font of an

element.

Code Sample:

p{
font-family: Arial, sans-serif;
}

Question 17: How do you make a border visible on all sides of a box?
1. border-style: solid;
2. border: visible;
3. border-display: all;
4. border-line: solid;

Answer: 1. border-style: solid;

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
96
Explanation: The border-style: solid; property makes a border visible on all
sides of a box.

Code Sample:

div {
border-style: solid;
}

Question 18: Which property is used to change the font color of an element?
1. color
2. font-color
3. text-color
4. color-style

Answer: 1. color

Explanation: The color property is used for setting the color of the text.

Code Sample:

p{
color: red;
}

Question 19: What is the default value of the position property?

1. relative
2. fixed
3. absolute
4. static

Answer: 4. static

Explanation: The default value of the position property in CSS is static.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
97
Question 20: How can you create a circle shape in CSS?
1. shape: circle;
2. border-radius: 50%;
3. border-circle: 50%;
4. radius: 50%;

Answer: 2. border-radius: 50%;

Explanation: Using border-radius: 50%; on an element with equal width and

height will create a circle shape.

Code Sample:

.circle {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
Question 21: How do you apply a CSS style for a component with two specific
classes?
1. .class1 + .class2
2. .class1.class2
3. .class1, .class2
4. .class1 > .class2

Answer: 2. .class1.class2

Explanation: To select an element that has both class1 and class2, you
concatenate the class selectors as .class1.class2.

Code Sample:

.class1.class2 {
color: blue;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
98
Question 22: Which property is used to set the background image of an element?
1. background-image
2. background-color
3. background-url
4. image-background

Answer: 1. background-image

Explanation: The background-image property sets one or more background

images for an element.

Code Sample:

body {
background-image: url('background.jpg');
}

Question 23: How do you make a list item display inline?

1. list-style: inline;
2. display: inline;
3. item-type: inline;
4. list-item: inline;

Answer: 2. display: inline;

Explanation: The display: inline; property is used to make a list item (or any
element) display inline.

Code Sample:

li {
display: inline;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
99
Question 24: Which CSS property is used for controlling the layout and formatting
of the <fieldset> element?
1. legend
2. fieldset
3. border
4. control

Answer: 3. border

Explanation: The border property can be used to control the appearance of

the <fieldset> element.

Code Sample:

fieldset {
border: 2px solid green;
}

Question 25: How can you create rounded corners using CSS?
1. corner-style: round;
2. border-round: 10px;
3. border-radius: 10px;
4. edge-round: 10px;

Answer: 3. border-radius: 10px;

Explanation: The border-radius property is used to create rounded corners.

Code Sample:

div {
border-radius: 10px;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
100
Question 26: How do you select all the <p> elements where the parent is a <div>
element?
1. div + p
2. div p
3. div > p
4. p < div

Answer: 3. div > p

Explanation: The div > p selector selects all <p> elements where the parent
is a <div> element.

Code Sample:

div > p {
color: blue;
}

Question 27: Which property is used to add shadow to elements?

1. box-shadow
2. text-shadow
3. shadow-box
4. element-shadow

Answer: 1. box-shadow

Explanation: box-shadow is used to add shadow to elements.

Code Sample:

div {
box-shadow: 5px 5px 5px grey;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
101
Question 28: In CSS, what does h1 + p represent?
1. Selects all <p> elements directly after <h1>
2. Selects every <p> element inside <h1>
3. Selects the first <p> element after each <h1>
4. Selects all <p> elements that are siblings of <h1>

Answer: 1. Selects all <p> elements directly after <h1>

Explanation: The h1 + p selector selects the first <p> element immediately

after each <h1>.

Question 29: Which property is used to specify the space between cells in a table?
1. cell-spacing
2. cell-padding
3. border-spacing
4. spacing

Answer: 3. border-spacing

Explanation: The border-spacing property is used to set the space between

cells in a table.

Code Sample:

table {
border-spacing: 5px;
}

Question 30: How can you set the opacity of an element in CSS?
1. opacity: 0.5;
2. visibility: 0.5;
3. alpha: 0.5;
4. transparency: 0.5;

Answer: 1. opacity: 0.5;

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
102
Explanation: The opacity property is used to set the transparency level of
an element.

Code Sample:

div {
opacity: 0.5;
}

Question 31: What is the purpose of the z-index property in CSS?

1. To set the zoom level of an element
2. To define the order of layered elements along the z-axis
3. To set the size of the background image
4. To add special effects to text

Answer: 2. To define the order of layered elements along the z-axis

Explanation: The z-index property in CSS is used to specify the stack order
of positioned elements (like absolute, relative, or fixed elements). An
element with a higher z-index is always stacked above one with a lower
index.

Question 32: What does the CSS display: none; property do?
1. Hides an element, but it still takes up space in the layout
2. Hides an element and removes it from the layout
3. Makes the element transparent
4. Displays an element as a block element

Answer: 2. Hides an element and removes it from the layout

Explanation: display: none; not only hides the element, but it also removes
it from the layout. This means the element will not take up any space on the
page.

Question 33: How do you select all child elements of a div that are <p> elements?

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
103
 1. div + p
2. div p
3. div > p
4. p < div

Answer: 2. div p

Explanation: The div p selector is used to select all <p> elements that are
descendants of a <div>, regardless of their level of nesting within the div.

Question 34: Which of the following is not a valid CSS unit?

1. em
2. px
3. vh
4. ms

Answer: 4. ms

Explanation: ms is not a CSS unit. em, px, and vh are valid CSS units for
various measurements like font size, element size, and viewport height
percentage, respectively.

Question 35: What does the overflow property do in CSS?

1. It specifies what should happen if content overflows an element's box
2. It controls the layout of elements in a container
3. It sets whether an element should be visible or not
4. It specifies the line height of text

Answer: 1. It specifies what should happen if content overflows an

element's box

Explanation: The overflow property specifies how to handle the content that
overflows its container's box, such as displaying scroll bars or cutting off
the overflow.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
104
Question 36: In CSS, what is the difference between visibility: hidden; and display:
none;?
1. No difference, both hide the element from the page
2. visibility: hidden; hides an element, but it still takes up space in the
layout
3. display: none; changes the visibility to hidden
4. visibility: hidden; removes the element from the document

Answer: 2. visibility: hidden; hides an element, but it still takes up space in

the layout

Explanation: visibility: hidden; hides the element, but it still occupies its
space in the layout. In contrast, display: none; removes the element from
the layout entirely.

Question 37: Which property is used to change the cursor type on hover?
1. cursor-type
2. hover
3. cursor
4. pointer-type

Answer: 3. cursor

Explanation: The cursor property in CSS is used to change the type of

cursor when hovering over an element.

Question 38: What is the use of the :nth-child() pseudo-class in CSS?

1. To select elements based on their attributes
2. To target elements that are the nth child of their parent
3. To change styles every nth time an element appears
4. To select the first child of a specific type within its parent

Answer: 2. To target elements that are the nth child of their parent

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
105
Explanation: The :nth-child() pseudo-class in CSS is used to select
elements based on their position within a group of siblings.

Question 39: What is the default position value in CSS?

1. absolute
2. fixed
3. relative
4. static

Answer: 4. static

Explanation: The default value for the position property in CSS is static,
which means the element is positioned according to the normal flow of the
document.

Question 40: How do you add a comment in a CSS file?

1. // This is a comment
2. /* This is a comment */
3. <!-- This is a comment -->
4. # This is a comment

Answer: 2. /* This is a comment */

Question 41: Which property is used to create space around elements, outside of
any defined borders?
1. padding
2. margin
3. border
4. spacing

Answer: 2. margin

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
106
Explanation: The margin property in CSS is used to create space around
elements, outside of any defined borders. It's part of the box model, which
also includes padding, border, and the content itself.

Question 42: What does the flex property do in a CSS Flexbox layout?
1. It specifies the direction of the flexible items
2. It controls the alignment of items on the main axis
3. It specifies the length of the item relative to the rest
4. It defines a flexible container for flexible items

Answer: 3. It specifies the length of the item relative to the rest

Explanation: In a Flexbox layout, the flex property is a shorthand for the

flex-grow, flex-shrink, and flex-basis properties. It specifies how much a flex
item will grow relative to the rest of the flex items in the flex container.

Question 43: What is the purpose of the clear property in CSS?

1. To stop floating elements
2. To start floating elements
3. To clear the background
4. To clear margins

Answer: 1. To stop floating elements

Explanation: The clear property in CSS is used to control the behavior of

floating elements. Elements after the cleared element will not float
alongside the cleared element.

Question 44: Which CSS property controls text wrapping?

1. text-wrap
2. text-align
3. word-wrap
4. word-break

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
107
Answer: 3. word-wrap

Explanation: The word-wrap property in CSS allows long words to be

broken and wrapped onto the next line.

Question 45: How can you make a numbered list?

1. list-style-type: decimal;
2. list-style-type: number;
3. list-style-type: numeric;
4. list-style-type: list-number;

Answer: 1. list-style-type: decimal;

Explanation: To create a numbered list in CSS, you use the list-style-type

property with the value decimal.

Question 46: Which CSS property is used to move the content away from the
borders?
1. margin
2. border
3. padding
4. spacing

Answer: 3. padding

Explanation: The padding property in CSS is used to create space around

content, inside of any defined borders.

Question 47: What is the default display value for most elements?
1. inline
2. block
3. flex
4. grid

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
108
Answer: 2. block

Explanation: Most HTML elements are displayed as block by default, which

means they start on a new line and take up the full width.

Question 48: What does the :after pseudo-element do?

1. Inserts content before an element
2. Inserts content after an element
3. Removes content after an element
4. Changes content after an element

Answer: 2. Inserts content after an element

Explanation: The :after pseudo-element in CSS is used to insert content

after the content of an element.

Question 49: How do you select every <p> element whose parent is not a <div>?
1. p:not(div)
2. not(div > p)
3. p:not(div > p)
4. p:not(:parent div)

Answer: 3. p:not(div > p)

Explanation: The p:not(div > p) selector is used to select every <p> element
that is not a child of a <div> element.

Question 50: Which property changes the style of the bottom border?
1. border-bottom-style
2. border-bottom
3. border-style-bottom
4. bottom-border

Answer: 1. border-bottom-style

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
109
Explanation: The border-bottom-style property is used to set the style of an
element's bottom border.

Question 51: What does the CSS property position: absolute; do?
1. Makes the element positioned relative to its normal position in the
document
2. Removes the element from the document flow and positions it relative
to its nearest positioned ancestor
3. Aligns the element in the center of the page
4. Makes the element invisible

Answer: 2. Removes the element from the document flow and positions it
relative to its nearest positioned ancestor

Explanation: When you set position: absolute; in CSS, the element is

removed from the normal document flow and positioned relative to its
nearest ancestor with a specified position (relative, absolute, or fixed).

Question 52: How do you change the color of an element on mouse hover using
CSS?
1. :hover { color: newColor; }
2. :hover-color { newColor; }
3. hover: { color: newColor; }
4. hover-color: { newColor; }

Answer: 1. :hover { color: newColor; }

Explanation: You can change the color of an element on mouse hover by

using the :hover pseudo-class in CSS.

Code Sample:

a:hover {
color: blue;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
110
Question 53: What is the CSS property used to create a drop shadow effect?
1. text-shadow
2. box-shadow
3. shadow-effect
4. drop-shadow

Answer: 2. box-shadow

Explanation: The box-shadow property in CSS is used to create a drop

shadow effect for elements.

Code Sample:

div {
box-shadow: 5px 5px 5px grey;
}

Question 54: Which CSS property is used to control the space between letters in
text?
1. word-spacing
2. line-height
3. letter-spacing
4. text-spacing

Answer: 3. letter-spacing

Explanation: The letter-spacing property in CSS is used to control the

space between letters in text.

Code Sample:

p{
letter-spacing: 2px;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
111
Question 55: What is the CSS property for changing the order of flex items in a flex
container?
1. order
2. flex-order
3. item-order
4. flex-item-order

Answer: 1. order

Explanation: The order property in CSS is used to change the order of flex
items in a flex container.

Code Sample:

.flex-item {
order: 2; /* Changes the order to 2 */
}

Question 56: How do you center align text horizontally within an element?
1. text-align: center;
2. horizontal-align: center;
3. center-text: horizontal;
4. align-text: center;

Answer: 1. text-align: center;

Explanation: To center-align text horizontally within an element, you can

use the text-align: center; CSS property.

Code Sample:

div {
text-align: center;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
112
Question 57: Which CSS property is used to add a border to an element?
1. border-width
2. border-style
3. border-color
4. border

Answer: 4. border

Explanation: The border property in CSS is a shorthand property for setting

the width, style, and color of an element's border.

Code Sample:

div {
border: 2px solid red;
}

Question 58: How do you make an element's font italic?

1. font-italic: true;
2. font-style: italic;
3. italic: font;
4. font-weight: italic;

Answer: 2. font-style: italic;

Explanation: The font-style: italic; CSS property is used to make an

element's font italic.

Code Sample:

p{
font-style: italic;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
113
Question 59: Which CSS property is used to create rounded corners with a specific
radius?
1. border-radius
2. corner-radius
3. rounded-corners
4. corner-style

Answer: 1. border-radius

Explanation: The border-radius property in CSS is used to create rounded

corners for elements.

Code Sample:

div {
border-radius: 10px;
}

Question 60: How do you make text bold using CSS?

1. text-weight: bold;
2. font-style: bold;
3. font-weight: bold;
4. text-style: bold;

Answer: 3. font-weight: bold;

Explanation: The font-weight: bold; CSS property is used to make text bold.

Code Sample:

p{
font-weight: bold;
}
Question 61: Which CSS property is used to specify the amount of space between
lines of text in an element?

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
114
 1. line-spacing
2. spacing-line
3. line-height
4. text-spacing

Answer: 3. line-height

Explanation: The line-height property in CSS is used to specify the amount

of space between lines of text within an element.

Code Sample:

p{
line-height: 1.5;
}

Question 62: How can you apply CSS styles to the first letter of a text element?
1. initial-letter
2. first-letter
3. letter-first
4. start-letter

Answer: 2. first-letter

Explanation: To apply CSS styles to the first letter of a text element, you
can use the ::first-letter pseudo-element.

Code Sample:

p::first-letter {
font-size: larger;
font-weight: bold;
}

Question 63: What does the CSS property text-transform: uppercase; do?

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
115
 1. Transforms all text to uppercase letters
2. Transforms the first letter of each word to uppercase
3. Transforms all text to lowercase letters
4. Transforms the last letter of each word to uppercase

Answer: 1. Transforms all text to uppercase letters

Explanation: The text-transform: uppercase; property in CSS transforms all

text within an element to uppercase letters.

Code Sample:

p{
text-transform: uppercase;
}

Question 64: What is the purpose of the rgba() color format in CSS?
1. It specifies the opacity of a color
2. It specifies a color in hexadecimal format
3. It represents a gradient color
4. It defines a color using HSL values

Answer: 1. It specifies the opacity of a color

Explanation: The rgba() color format in CSS allows you to specify a color
with an additional alpha channel, representing opacity.

Code Sample:

div {
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}

Question 65: Which CSS property is used to control the width of an element's
border?

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
116
 1. border-width
2. border-style
3. border-color
4. border-size

Answer: 1. border-width

Explanation: The border-width property in CSS is used to control the width

of an element's border.

Code Sample:

div {
border-width: 2px;
}

Question 66: What is the CSS property used to change the background color of an
element on mouse hover?
1. background-color-hover
2. hover-background-color
3. background-hover
4. :hover

Answer: 4. :hover

Explanation: You can use the :hover pseudo-class to change the

background color of an element on mouse hover.

Code Sample:

button:hover {
background-color: blue;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
117
Question 67: Which CSS property is used to specify the type of list item marker
(e.g., disc, square, or numeric)?
1. list-type
2. marker-style
3. list-marker
4. list-style-type

Answer: 4. list-style-type

Explanation: The list-style-type property in CSS is used to specify the type

of list item marker, such as disc, square, or numeric.

Code Sample:

ul {
list-style-type: square;
}

Question 68: What is the purpose of the CSS overflow-x property?

1. It controls the overflow of content in the horizontal direction
2. It controls the overflow of content in the vertical direction
3. It sets the text overflow style
4. It creates a shadow effect on the horizontal axis

Answer: 1. It controls the overflow of content in the horizontal direction

Explanation: The overflow-x property in CSS is used to control the overflow

behavior of content in the horizontal direction.

Code Sample:

div {
overflow-x: scroll;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
118
Question 69: How do you select all even rows of a table using CSS?
1. tr:nth-child(even)
2. table:even-row
3. td:nth-child(even)
4. tbody:nth-child(even)

Answer: 1. tr:nth-child(even)

Explanation: You can use the tr:nth-child(even) selector to select all even
rows of a table.

Code Sample:

table tr:nth-child(even) {
background-color: lightgrey;
}

Question 70: What is the purpose of the CSS property text-decoration: underline;?
1. It adds a shadow effect to text
2. It removes the underline from text
3. It adds an underline to text
4. It italicizes the text

Answer: 3. It adds an underline to text

Explanation: The text-decoration: underline; property in CSS is used to add

an underline to text.

Code Sample:

a{
text-decoration: underline;
}

Question 71: What is the CSS property used to change the color of visited links?
1. a:visited-color

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
119
 2. visited-link-color
3. link-visited-color
4. color: visited;

Answer: None of the options.

Explanation: The CSS property used to change the color of visited links is
a:visited, and it's typically used with the color property to set the color of
visited links.

Code Sample:

a:visited {
color: purple;
}

Question 72: How can you apply CSS styles to every second element of a specific
type?
1. type:nth-child(2n)
2. nth-child(even)
3. type:nth-child(even)
4. :nth-child(2n)

Answer: 4. :nth-child(2n)

Explanation: You can use the :nth-child(2n) selector to apply styles to every
second element of a specific type.

Code Sample:

p:nth-child(2n) {
font-weight: bold;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
120
Question 73: Which CSS property is used to control the order of columns in a CSS
Grid layout?
1. column-order
2. grid-column
3. order
4. grid-template-columns

Answer: 3. order

Explanation: The order property in CSS Grid layout is used to control the
order of grid items within the same container.

Code Sample:

.item {
order: 2; /* Changes the order of this grid item */
}

Question 74: What does the display: flex; property do in CSS?

1. Makes an element a block-level element
2. Creates a flexible container for its child elements
3. Changes the font style to flex
4. Aligns text vertically in the center

Answer: 2. Creates a flexible container for its child elements

Explanation: The display: flex; property in CSS is used to create a flexible

container for its child elements, turning them into flex items.

Code Sample:

.container {
display: flex;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
121
Question 75: How do you select the first-child of a specific element type within its
parent?
1. type:first-child
2. :first-child-type
3. type:nth-child(1)
4. type:first-of-type

Answer: 1. type:first-child

Explanation: To select the first child of a specific element type within its
parent, you can use the type:first-child selector.

Code Sample:

p:first-child {
font-weight: bold;
}

Question 76: What is the purpose of the CSS property text-align: justify;?
1. It centers the text horizontally within an element
2. It adds space between lines of text
3. It justifies the text, creating even left and right margins
4. It aligns text vertically in the center

Answer: 3. It justifies the text, creating even left and right margins

Explanation: The text-align: justify; property in CSS is used to justify the

text within an element, creating even left and right margins.

Code Sample:

p{
text-align: justify;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
122
Question 77: What does the background-repeat property in CSS control?
1. It controls the background color of an element
2. It controls the background image's size
3. It controls the repetition of a background image
4. It changes the font style of text

Answer: 3. It controls the repetition of a background image

Explanation: The background-repeat property in CSS controls how a

background image is repeated or displayed.

Code Sample:

body {
background-image: url('background.jpg');
background-repeat: repeat-x;
}

Question 78: Which CSS property is used to control the space between columns in
a CSS Grid layout?
1. grid-gap
2. column-gap
3. grid-column-gap
4. grid-column-space

Answer: 1. grid-gap

Explanation: The grid-gap property in CSS Grid layout is used to control the
space between columns and rows.

Code Sample:

.grid-container {
grid-gap: 10px;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
123
Question 79: What is the CSS property used to control the order of items in a
Flexbox layout?
1. flex-order
2. order
3. item-order
4. flex-item-order

Answer: 2. order

Explanation: In a Flexbox layout, the order property is used to control the

order of flex items within the flex container.

Code Sample:

.flex-item {
order: 3; /* Changes the order of this flex item */
}

Question 80: How can you create a CSS class that applies styles to elements with a
specific attribute?
1. .attribute[specific]
2. .class[attribute]
3. [attribute].class
4. [attribute="specific"]

Answer: 4. [attribute="specific"]

Explanation: To create a CSS class that applies styles to elements with a

specific attribute value, you can use [attribute="specific"] selector.

Code Sample:

[data-type="button"] {
background-color: blue;

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
124
}

Question 81: What does the CSS property flex-direction control in a Flexbox
layout?
1. It controls the width of flex items
2. It defines the direction of the main axis
3. It sets the background color of flex items
4. It adjusts the font size of flex items

Answer: 2. It defines the direction of the main axis

Explanation: The flex-direction property in a Flexbox layout controls the

direction of the main axis, which affects how flex items are laid out within
the container.

Code Sample:

.container {
flex-direction: column; /* Sets the main axis to be vertical */
}

Question 82: What is the purpose of the CSS property white-space: nowrap;?
1. It sets the text color to white
2. It prevents text from wrapping to the next line
3. It removes all white spaces from text
4. It aligns text vertically in the center

Answer: 2. It prevents text from wrapping to the next line

Explanation: The white-space: nowrap; property in CSS prevents text from

wrapping to the next line, making it stay on a single line.

Code Sample:

p{
white-space: nowrap;

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
125
}

Question 83: How do you apply CSS styles to an element when a user hovers over
its parent element?
1. :parent:hover
2. parent:hover > child
3. parent:hover + child
4. parent:hover child

Answer: 4. parent:hover child

Explanation: To apply CSS styles to an element when a user hovers over

its parent element, you can use the parent:hover child selector.

Code Sample:

.container:hover .element {
background-color: yellow;
}

Question 84: Which CSS property is used to control the spacing between
individual characters in text?
1. character-spacing
2. letter-spacing
3. text-spacing
4. word-spacing

Answer: 2. letter-spacing

Explanation: The letter-spacing property in CSS is used to control the

spacing between individual characters in text.

Code Sample:

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
126
p{
letter-spacing: 2px;
}

Question 85: What is the CSS property used to control the alignment of text within
an element vertically?
1. vertical-align
2. text-align
3. line-height
4. align-items

Answer: 1. vertical-align

Explanation: The vertical-align property in CSS is used to control the

vertical alignment of text or inline elements within their containing element.

Code Sample:

span {
vertical-align: middle;
}

Question 86: How do you select the last-child of a specific element type within its
parent?
1. type:last-child
2. :last-child-type
3. type:last-of-type
4. last-child[type]

Answer: 3. type:last-of-type

Explanation: To select the last child of a specific element type within its
parent, you can use the type:last-of-type selector.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
127
Code Sample:

p:last-of-type {
font-weight: bold;
}

Question 87: What does the CSS property cursor: pointer; do?
1. It changes the font style of text
2. It specifies the pointer style when hovering over an element
3. It adds a shadow effect to text
4. It sets the text color to a pointer

Answer: 2. It specifies the pointer style when hovering over an element

Explanation: The cursor: pointer; property in CSS specifies the type of

cursor to be displayed when hovering over an element, typically indicating
a clickable or interactive element.

Code Sample:

button {
cursor: pointer;
}

Question 88: What is the purpose of the CSS property text-overflow: ellipsis;?
1. It controls the text color
2. It adds a shadow effect to text
3. It displays an ellipsis (...) when text overflows its container
4. It changes the font style of text

Answer: 3. It displays an ellipsis (...) when text overflows its container

Explanation: The text-overflow: ellipsis; property in CSS displays an ellipsis

(...) when text overflows its container, indicating that there is more text than
currently visible.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
128
Code Sample:

div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Question 89: Which CSS property is used to specify the style of an element's
border?
1. border-width
2. border-color
3. border-style
4. border-decoration

Answer: 3. border-style

Explanation: The border-style property in CSS is used to specify the style

of an element's border, such as solid, dashed, or dotted.

Code Sample:

div {
border-style: dashed;
}

Question 90: What does the CSS property font-family control?

1. It controls the font size
2. It controls the font weight
3. It specifies the font family or typeface to be used for text
4. It sets the text color

Answer: 3. It specifies the font family or typeface to be used for text

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
129
Explanation: The font-family property in CSS is used to specify the font
family or typeface to be used for text.

Code Sample:

p{
font-family: "Arial", sans-serif;
}

Question 91: What is the CSS property used to control the transparency of an
element?
1. opacity
2. transparency
3. visibility
4. alpha

Answer: 1. opacity

Explanation: The opacity property in CSS is used to control the

transparency or opacity of an element.

Code Sample:

div {
opacity: 0.5; /* Makes the element semi-transparent */
}

Question 92: How can you select all elements with a specific class in CSS?
1. .class
2. #class
3. *class
4. class*

Answer: 1. .class

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
130
Explanation: To select all elements with a specific class in CSS, you can
use the .class selector.

Code Sample:

.my-class {
color: red;
}

Question 93: What is the purpose of the CSS property box-sizing: border-box;?
1. It adds a border to the element's box
2. It adjusts the width of an element to include padding and border
3. It sets the box's content to be transparent
4. It centers the element horizontally and vertically

Answer: 2. It adjusts the width of an element to include padding and border

Explanation: The box-sizing: border-box; property in CSS adjusts the width

of an element to include its padding and border, ensuring that the content
box remains a specified width.

Code Sample:

div {
box-sizing: border-box;
}

Question 94: How do you select all links within a specific section of a web page
using CSS?
1. section a
2. section > a
3. section + a
4. section ~ a

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
131
Answer: 2. section > a

Explanation: To select all links within a specific section of a web page using
CSS, you can use the section > a selector, which selects direct child a
elements of the section.

Code Sample:

section > a {
color: blue;
}

Question 95: What is the CSS property used to create a shadow behind an
element's border?
1. box-shadow
2. border-shadow
3. element-shadow
4. shadow-box

Answer: 1. box-shadow

Explanation: The box-shadow property in CSS is used to create a shadow

behind an element's border.

Code Sample:

div {
box-shadow: 5px 5px 5px grey;
}

Question 96: How do you select the last element of a specific type within its
parent using CSS?
1. type:last
2. :last-type

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
132
 3. type:last-of-type
4. last-type[type]

Answer: 3. type:last-of-type

Explanation: To select the last element of a specific type within its parent
using CSS, you can use the type:last-of-type selector.

Code Sample:

p:last-of-type {
font-weight: bold;
}

Question 97: Which CSS property is used to create a rotating animation?

1. animation-rotate
2. transform-rotate
3. rotate-animation
4. animation

Answer: 4. animation

Explanation: The animation property in CSS is used to create various

animations, including rotating animations.

Code Sample:

@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

div {

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
133
 animation: rotate 2s linear infinite;
}

Question 98: What does the CSS property text-decoration: line-through; do?
1. It removes the text's underline
2. It adds a line through the text
3. It makes the text bold
4. It italicizes the text

Answer: 2. It adds a line through the text

Explanation: The text-decoration: line-through; property in CSS adds a line

through the text, typically used to indicate strikethrough text.

Code Sample:

span {
text-decoration: line-through;
}

Question 99: How can you select the first element of a specific type within its
parent using CSS?
1. type:first
2. :first-type
3. type:first-of-type
4. first-type[type]

Answer: 3. type:first-of-type

Explanation: To select the first element of a specific type within its parent
using CSS, you can use the type:first-of-type selector.

Code Sample:

p:first-of-type {

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
134
 font-weight: bold;
}

Question 100: What is the CSS property used to control the spacing between lines
of text?
1. line-spacing
2. spacing-line
3. line-height
4. text-spacing

Answer: 3. line-height

Explanation: The line-height property in CSS is used to control the spacing

between lines of text within an element.

Code Sample:

p{
line-height: 1.5;
}
Question 101: Which CSS property is used to control the visibility of an element?
1. display
2. visibility
3. opacity
4. hidden

Answer: 2. visibility

Explanation: The visibility property in CSS is used to control the visibility of

an element. It can be set to values like visible and hidden.

Code Sample:

div {
visibility: hidden; /* Hides the element */
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
135
Question 102: How do you select all elements that have a specific attribute in
CSS?
1. [attribute]
2. .attribute
3. #attribute
4. element[attribute]

Answer: 1. [attribute]

Explanation: To select all elements that have a specific attribute in CSS,

you can use the [attribute] selector.

Code Sample:

[data-custom] {
color: blue;
}

Question 103: What does the CSS property transform: scale(1.5); do?
1. It rotates the element by 1.5 degrees
2. It scales the element to 1.5 times its size
3. It adds a shadow effect to the element
4. It changes the text color to blue

Answer: 2. It scales the element to 1.5 times its size

Explanation: The transform: scale(1.5); property in CSS scales (enlarges)

the element to 1.5 times its original size.

Code Sample:

div {
transform: scale(1.5);
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
136
Question 104: What is the purpose of the CSS property text-transform: capitalize;?
1. It transforms text to uppercase
2. It transforms text to lowercase
3. It capitalizes the first letter of each word
4. It italicizes the text

Answer: 3. It capitalizes the first letter of each word

Explanation: The text-transform: capitalize; property in CSS capitalizes the

first letter of each word in the text.

Code Sample:

p{
text-transform: capitalize;
}

Question 105: How can you select all odd rows of a table using CSS?
1. table:nth-child(odd)
2. tr:nth-child(even)
3. tr:nth-child(odd)
4. table:odd-row

Answer: 3. tr:nth-child(odd)

Explanation: To select all odd rows of a table using CSS, you can use the
tr:nth-child(odd) selector.

Code Sample:

table tr:nth-child(odd) {
background-color: lightgrey;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
137
Question 106: What is the CSS property used to create a rotating animation in 3D?
1. rotate3d
2. transform-3d
3. animation-rotate3d
4. @keyframes rotate3d

Answer: 4. @keyframes rotate3d

Explanation: To create a rotating animation in 3D using CSS, you can

define the animation using @keyframes with 3D transforms.

Code Sample:

@keyframes rotate3d {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}

div {
animation: rotate3d 4s linear infinite;
}

Question 107: How can you apply CSS styles to elements with a specific attribute
value?
1. [attribute=value]
2. [value=attribute]
3. [attribute~value]
4. [attribute^value]

Answer: 1. [attribute=value]

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
138
Explanation: To apply CSS styles to elements with a specific attribute
value, you can use the [attribute=value] selector.

Code Sample:

[data-type="button"] {
background-color: blue;
}

Question 108: Which CSS property is used to control the space between lines of
text in a multi-line text element?
1. line-spacing
2. spacing-line
3. line-height
4. text-spacing

Answer: 3. line-height

Explanation: The line-height property in CSS is used to control the space

between lines of text in a multi-line text element.

Code Sample:

p{
line-height: 1.5;
}

Question 109: What is the purpose of the CSS property text-overflow: clip;?
1. It clips the text at the end of the element
2. It clips the text when it overflows its container
3. It removes all white spaces from text
4. It changes the font style of text

Answer: None of the options.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
139
Explanation: There is no text-overflow: clip; property in CSS. The correct
property for clipping text is text-overflow: clip;.

Question 110: How can you select all elements that are not of a specific type using
CSS?
1. :not(type)
2. element:not(type)
3. :not(type)
4. element:not(type)

Answer: 1. :not(type)

Explanation: To select all elements that are not of a specific type using
CSS, you can use the :not(type) selector.

Code Sample:

:not(p) {
font-style: italic;
}

Question 111: What is the CSS property used to control the indentation of the first
line of text within an element?
1. line-indent
2. text-indent
3. first-line-indent
4. indent-first-line

Answer: 2. text-indent

Explanation: The text-indent property in CSS is used to control the

indentation of the first line of text within an element.

Code Sample:

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
140
p{
text-indent: 20px;
}

Question 112: How do you select the last element of a specific class within its
parent using CSS?
1. class:last-child
2. .class:last-of-type
3. .class:last-child
4. :last-of-type.class

Answer: 3. .class:last-child

Explanation: To select the last element of a specific class within its parent
using CSS, you can use the .class:last-child selector.

Code Sample:

.my-class:last-child {
font-weight: bold;
}

Question 113: What does the CSS property overflow: hidden; do?
1. It hides the element
2. It hides the content that overflows the element's box
3. It adds a shadow effect to the element
4. It changes the font size of text

Answer: 2. It hides the content that overflows the element's box

Explanation: The overflow: hidden; property in CSS hides the content that
overflows the element's box, effectively clipping it.

Code Sample:

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
141
div {
overflow: hidden;
}

Question 114: How can you select the first and last child elements of a specific
type within their parent using CSS?
1. type:first-child, type:last-child
2. type:first-of-type, type:last-of-type
3. type:first, type:last
4. type:first-element, type:last-element

Answer: 2. type:first-of-type, type:last-of-type

Explanation: To select the first and last child elements of a specific type
within their parent using CSS, you can use the type:first-of-type,
type:last-of-type selector.

Code Sample:

p:first-of-type, p:last-of-type {
font-weight: bold;
}

Question 115: Which CSS property is used to create a shadow effect behind an
element?
1. box-shadow
2. element-shadow
3. shadow-effect
4. shadow-box

Answer: 1. box-shadow

Explanation: The box-shadow property in CSS is used to create a shadow

effect behind an element.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
142
Code Sample:

div {
box-shadow: 5px 5px 5px grey;
}

Question 116: What is the CSS property used to control the space between
columns in a multi-column layout?
1. column-spacing
2. spacing-column
3. column-gap
4. column-margin

Answer: 3. column-gap

Explanation: The column-gap property in CSS is used to control the space

between columns in a multi-column layout.

Code Sample:

.container {
column-gap: 20px;
}

Question 117: How can you select all even elements of a specific type within their
parent using CSS?
1. type:nth-child(even)
2. type:nth-of-type(odd)
3. type:nth-child(2n)
4. type:nth-of-type(even)

Answer: 1. type:nth-child(even)

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
143
Explanation: To select all even elements of a specific type within their
parent using CSS, you can use the type:nth-child(even) selector.

Code Sample:

p:nth-child(even) {
background-color: lightgrey;
}

Question 118: What does the CSS property outline: none; do?
1. It adds an outline to the element
2. It removes the border of the element
3. It removes the outline of the element
4. It sets the text color to none

Answer: 3. It removes the outline of the element

Explanation: The outline: none; property in CSS removes the outline of the
element, often used to remove the default focus outline.

Code Sample:

button {
outline: none;
}

Question 119: Which CSS property is used to control the size of an element's
border?
1. border-width
2. border-size
3. border-dimension
4. border-length

Answer: 1. border-width

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
144
Explanation: The border-width property in CSS is used to control the size of
an element's border.

Code Sample:

div {
border-width: 2px;
}

Question 120: What is the CSS property used to control the background image of
an element?
1. background-image
2. image-background
3. element-image
4. image-element

Answer: 1. background-image

Explanation: The background-image property in CSS is used to control the

background image of an element.

Code Sample:

div {
background-image: url('background.jpg');
}

Question 121: What is the CSS property used to create a gradient background for
an element?
1. background-gradient
2. gradient-background
3. background-image
4. background-linear-gradient

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
145
Answer: 4. background-linear-gradient

Explanation: The background-linear-gradient property in CSS is used to

create a gradient background for an element.

Code Sample:

div {
background: linear-gradient(to bottom, #ff0000, #00ff00);
}

Question 122: How can you select all elements that are descendants of a specific
element using CSS?
1. element descendants
2. element > descendants
3. element descendants >
4. element descendants <

Answer: 2. element > descendants

Explanation: To select all elements that are descendants of a specific

element using CSS, you can use the element > descendants selector.

Code Sample:

.container > p {
color: blue;
}

Question 123: What is the purpose of the CSS property border-radius?

1. It controls the border color
2. It sets the border width
3. It defines the shape of the element's border corners
4. It adds a shadow effect to the border

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
146
Answer: 3. It defines the shape of the element's border corners

Explanation: The border-radius property in CSS is used to define the shape

of the element's border corners, allowing for rounded corners.

Code Sample:

div {
border-radius: 10px;
}

Question 124: How can you select elements with a specific class that are also
children of a specific element using CSS?
1. .class > element
2. element .class
3. element.class
4. element > .class

Answer: 2. element .class

Explanation: To select elements with a specific class that are also children
of a specific element using CSS, you can use the element .class selector.

Code Sample:

.container .element {
color: red;
}

Question 125: What is the CSS property used to control the order of flexible items
in a Flexbox layout?
1. flex-direction
2. order
3. flex-order

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
147
 4. item-order

Answer: 2. order

Explanation: The order property in CSS is used to control the order of

flexible items in a Flexbox layout.

Code Sample:

.item {
order: 2; /* Sets the order to 2 */
}

Question 126: How can you select the first child element of a specific type within
its parent using CSS?
1. type:first-child
2. :first-child-type
3. type:first-of-type
4. first-child[type]

Answer: 1. type:first-child

Explanation: To select the first child element of a specific type within its
parent using CSS, you can use the type:first-child selector.

Code Sample:

p:first-child {
font-weight: bold;
}

Question 127: What is the purpose of the CSS property z-index?

1. It controls the element's font size
2. It sets the element's background color
3. It specifies the order in which elements are stacked along the z-axis

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
148
 4. It adjusts the element's width

Answer: 3. It specifies the order in which elements are stacked along the
z-axis

Explanation: The z-index property in CSS specifies the order in which

elements are stacked along the z-axis, determining which element appears
on top of others.

Code Sample:

div {
z-index: 2;
}

Question 128: How can you select the last element with a specific class within its
parent using CSS?
1. .class:last-child
2. .class:last-of-type
3. .class:last
4. :last-of-type.class

Answer: 2. .class:last-of-type

Explanation: To select the last element with a specific class within its parent
using CSS, you can use the .class:last-of-type selector.

Code Sample:

.my-class:last-of-type {
font-weight: bold;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
149
Question 129: What is the CSS property used to control the alignment of an
element horizontally within its container?
1. horizontal-align
2. align-horizontal
3. text-align
4. align-items

Answer: 3. text-align

Explanation: The text-align property in CSS is used to control the alignment

of an element horizontally within its container, particularly for text content.

Code Sample:

div {
text-align: center; /* Centers the text horizontally */
}

Question 130: What does the CSS property list-style: none; do?
1. It removes list items from the list
2. It sets the list's background color to none
3. It removes the list-style marker (bullet or number) from a list
4. It changes the font style of list items

Answer: 3. It removes the list-style marker (bullet or number) from a list

Explanation: The list-style: none; property in CSS removes the list-style

marker (bullet or number) from a list.

Code Sample:

ul {
list-style: none;
}

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
150
Question 131: What is the purpose of the CSS property flex-wrap in a
Flexbox layout?
1. It wraps the text content of elements
2. It wraps the elements to the next row when they overflow their
container
3. It adjusts the spacing between Flexbox items
4. It changes the font size of text

Answer: 2. It wraps the elements to the next row when they overflow their
container

Explanation: The flex-wrap property in a Flexbox layout controls whether

the elements wrap to the next row when they overflow their container.

Code Sample:

.container {
flex-wrap: wrap;
}

Question 132: How do you select the first element with a specific class within its
parent using CSS?
1. .class:first
2. .class:first-child
3. .class:first-of-type
4. :first-child.class

Answer: 2. .class:first-child

Explanation: To select the first element with a specific class within its parent
using CSS, you can use the .class:first-child selector.

Code Sample:

.my-class:first-child {
font-weight: bold;

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
151
}

Question 133: What is the CSS property used to control the visibility of an element
without affecting its layout?
1. display
2. visibility
3. opacity
4. hidden

Answer: 2. visibility

Explanation: The visibility property in CSS is used to control the visibility of

an element without affecting its layout. It can be set to values like visible
and hidden.

Code Sample:

div {
visibility: hidden; /* Hides the element without affecting layout */
}

Question 134: How can you select all elements that have a specific attribute with
a value starting with a certain string in CSS?
1. [attribute^="value"]
2. [value^="attribute"]
3. [attribute~="value"]
4. [attribute="value"]

Answer: 1. [attribute^="value"]

Explanation: To select all elements that have a specific attribute with a

value starting with a certain string in CSS, you can use the
[attribute^="value"] selector.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
152
Code Sample:

[data-prefix^="abc"] {
color: red;
}

Question 135: What does the CSS property transform: skew(30deg); do?
1. It rotates the element by 30 degrees
2. It scales the element horizontally by 30 degrees
3. It skews the element horizontally by 30 degrees
4. It changes the text color to blue

Answer: 3. It skews the element horizontally by 30 degrees

Explanation: The transform: skew(30deg); property in CSS skews the

element horizontally by 30 degrees.

Code Sample:

div {
transform: skew(30deg);
}

Question 136: How do you select all even elements within a specific container
using CSS?
1. :even
2. even
3. container:even
4. container :even

Answer: None of the options.

Explanation: There is no :even selector in CSS. To select even elements

within a specific container, you would typically use JavaScript or other

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
153
methods, as CSS alone doesn't provide a direct way to select even
elements.

Question 137: What is the CSS property used to control the alignment of an
element vertically within its container?
1. vertical-align
2. align-vertical
3. align-items
4. text-align

Answer: 1. vertical-align

Explanation: The vertical-align property in CSS is used to control the

alignment of an element vertically within its container.

Code Sample:

div {
vertical-align: middle; /* Vertically aligns the element */
}

Question 138: How can you select all elements that are not of a specific class
using CSS?
1. :not(.class)
2. element:not(.class)
3. :not.class
4. element:not.class

Answer: 1. :not(.class)

Explanation: To select all elements that are not of a specific class using
CSS, you can use the :not(.class) selector.

Code Sample:

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
154
:not(.exclude) {
color: red;
}

Question 139: Which CSS property is used to control the size of an element's box
model, including padding and border?
1. box-size
2. box-model-size
3. box-sizing
4. box-dimension

Answer: 3. box-sizing

Explanation: The box-sizing property in CSS is used to control the size of

an element's box model, including padding and border.

Code Sample:

div {
box-sizing: border-box;
}

Question 140: What is the CSS property used to control the space between words
in text?
1. word-spacing
2. text-spacing
3. letter-spacing
4. line-spacing

Answer: 1. word-spacing

Explanation: The word-spacing property in CSS is used to control the

space between words in text.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
155
Code Sample:

p{
word-spacing: 5px; /* Increases word spacing */
}

Question 141: What is the purpose of the CSS property text-decoration:

underline;?
1. It adds a border around the element
2. It underlines the text content of an element
3. It changes the text color to red
4. It italicizes the text

Answer: 2. It underlines the text content of an element

Explanation: The text-decoration: underline; property in CSS underlines the

text content of an element.

Code Sample:

a{
text-decoration: underline;
}

Question 142: How can you select the last element with a specific type within its
parent using CSS?
1. type:last-child
2. :last-of-type(type)
3. :last-type(type)
4. :type(last-child)

Answer: 1. type:last-child

Explanation: To select the last element with a specific type within its parent
using CSS, you can use the type:last-child selector.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
156
Code Sample:

p:last-child {
font-weight: bold;
}

Question 143: What does the CSS property background-color: transparent; do?
1. It sets the background color to white
2. It makes the background color fully transparent
3. It adds a shadow effect to the background
4. It changes the font style of text

Answer: 2. It makes the background color fully transparent

Explanation: The background-color: transparent; property in CSS makes

the background color of an element fully transparent, allowing the content
behind it to show through.

Code Sample:

div {
background-color: transparent; /* Makes the background fully transparent
*/
}

Question 144: How can you select the first element of a specific type that comes
after another element using CSS?
1. element + type:first
2. element + type
3. type + element:first
4. type + element

Answer: 2. element + type

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
157
Explanation: To select the first element of a specific type that comes after
another element using CSS, you can use the element + type selector.

Code Sample:

p + div {
font-weight: bold;
}

Question 145: What is the CSS property used to control the space between cells in
a table?
1. table-cell-spacing
2. table-spacing
3. cell-spacing
4. border-spacing

Answer: 4. border-spacing

Explanation: The border-spacing property in CSS is used to control the

space between cells in a table.

Code Sample:

table {
border-spacing: 10px;
}

Question 146: How can you select all odd elements within a specific container
using CSS?
1. :odd
2. odd
3. container:odd
4. container :odd

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
158
Answer: None of the options.

Explanation: There is no :odd selector in CSS. To select odd elements

within a specific container, you would typically use JavaScript or other
methods, as CSS alone doesn't provide a direct way to select odd
elements.

Question 147: What is the purpose of the CSS property cursor: pointer;?
1. It changes the font size of text
2. It changes the text color to blue
3. It specifies the cursor type when hovering over an element
4. It adds a shadow effect to the element

Answer: 3. It specifies the cursor type when hovering over an element

Explanation: The cursor: pointer; property in CSS specifies the cursor type
to be used when hovering over an element, typically indicating interactivity.

Code Sample:

button {
cursor: pointer; /* Changes cursor to a pointer hand */
}

Question 148: How can you select the first and last elements within a specific
container using CSS?
1. :first, :last
2. first, last
3. container:first, container:last
4. container :first, container :last

Answer: 1. :first, :last

Explanation: To select the first and last elements within a specific container
using CSS, you can use the :first and :last selectors.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
159
Code Sample:

.container :first, .container :last {

font-weight: bold;
}

Question 149: What does the CSS property line-height control?

1. It controls the height of an element's border
2. It controls the space between lines of text in a multi-line text element
3. It sets the text color to red
4. It rotates the text by a specified angle

Answer: 2. It controls the space between lines of text in a multi-line text

element

Explanation: The line-height property in CSS controls the space between

lines of text in a multi-line text element.

Code Sample:

p{
line-height: 1.5; /* Adjusts line spacing */
}

Question 150: Which CSS property is used to control the order of items in a Grid
layout?
1. grid-order
2. order
3. grid-item-order
4. item-order

Answer: 2. order

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
160
Explanation: The order property in CSS is used to control the order of items
in a Grid layout.

Code Sample:

.item {
order: 2; /* Sets the order of the Grid item */
}

These questions continue to cover various CSS properties, selectors, and

layout techniques, helping to deepen your understanding of CSS.

Learn more about JavaScript with Examples and Source Code Laurence Svekis
Courses https://basescripts.com/
161