Lecture Notes Of Class 3:
Typography Utilities
Objectives:
- Understand
text-related utilities in CSS.
- Learn
how to apply classes for font size, weight, and alignment.
- Gain
hands-on experience with utilities such as
text-lg,text-gray-600, etc., to style text elements.
1.
Introduction to Typography Utilities
Typography
is crucial for enhancing the readability and visual appeal of a webpage. Modern
CSS frameworks like Tailwind CSS provide utility classes to
quickly style text without writing custom CSS.
In this
class, we will explore how to use these utilities for various text properties:
- Font size:
Adjust the size of the text.
- Font weight:
Modify the thickness of the font.
- Text color:
Set the color of the text.
- Text alignment:
Control the alignment of text.
These
utilities can be applied directly to HTML elements by adding corresponding
classes.
2. Font
Size (text-[size])
The text-[size] utility
defines the font size for an element. Common values for font sizes include text-sm, text-base, text-lg, and more.
Example:
text-sm(small text)text-base(default text size)text-lg(large text)
3. Font
Weight (font-[weight])
Font
weight controls the thickness of the text. You can use utilities like:
font-normal(default weight)font-bold(bold text)font-light(lighter text)
4. Text
Color (text-[color])
You can
set the text color using predefined color names or shades in Tailwind CSS, such
as text-gray-600,
text-red-500,
etc.
5. Text
Alignment (text-[alignment])
Text
alignment can be adjusted with utilities like:
text-left: Aligns text to the left.text-center: Centers the text.text-right: Aligns text to the right.
6.
Activity: Create a Webpage with Styled Headers and Paragraphs
Now let's
apply these utilities to create a simple webpage with styled text elements.
HTML
Code:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typography Utilities</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body class="bg-gray-100"> <header class="text-center my-8"> <h1 class="text-4xl font-bold text-gray-700">Typography Utilities in Tailwind CSS</h1> <p class="text-lg text-gray-600 mt-2">Learn how to apply font size, weight, color, and alignment.</p> </header> <section class="max-w-4xl mx-auto p-4"> <h2 class="text-2xl font-semibold text-gray-800">Font Size Utility Example</h2> <p class="text-lg text-gray-700"> This is a large paragraph styled using the <code>text-lg</code> utility class. It makes the text larger and more readable. </p> <p class="text-base text-gray-600 mt-4"> This is a base-sized paragraph using the <code>text-base</code> utility class. </p> <h2 class="text-2xl font-semibold text-gray-800 mt-8">Font Weight Utility Example</h2> <p class="font-light text-gray-700"> This text uses <code>font-light</code> for a lighter appearance. </p> <p class="font-bold text-gray-900 mt-4"> This text uses <code>font-bold</code> to make the text bold. </p> <h2 class="text-2xl font-semibold text-gray-800 mt-8">Text Alignment Utility Example</h2> <p class="text-left text-gray-700"> This paragraph is aligned to the left using the <code>text-left</code> utility. </p> <p class="text-center text-gray-700 mt-4"> This paragraph is centered using the <code>text-center</code> utility. </p> <p class="text-right text-gray-700 mt-4"> This paragraph is aligned to the right using the <code>text-right</code> utility. </p> </section> </body></html>
Key
Concepts Applied:
- Font Size:
The header and paragraph use
text-4xl,text-lg, andtext-base. - Font Weight:
Applied
font-boldfor the header andfont-lightfor some paragraphs. - Text Color:
Used
text-gray-700andtext-gray-600for text colors. - Text Alignment:
Demonstrated
text-left,text-center, andtext-rightalignment.
7.
Conclusion
In this
class, you've learned how to utilize text-related utilities in Tailwind CSS to
quickly style your text elements. By applying utilities for font size, weight,
color, and alignment, you can efficiently create well-styled webpages without
writing custom CSS.
Experiment
with different utility classes to see how they impact the text styling!
You
said:
WRITE 10 ASSIGNMENTS
FROM ABOVE CONCEPT WITH STEP BY STEP SOLUTIONS with proper explanation
ChatGPT
said:
Here are
10 assignments based on the Typography Utilities concept with
step-by-step solutions and explanations.
Assignment
1: Create a Header with Custom Font Size and Color
Task:
Create a webpage with a header styled using Tailwind CSS utilities. The header
should have a large font size and a custom text color.
Step-by-step
Solution:
1.
Create an HTML file and add basic structure:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Header Styling</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body> <h1 class="text-5xl text-blue-600 text-center">Welcome to Tailwind CSS</h1></body></html>
2.
Explanation:
o text-5xl:
This utility class sets the font size to a larger value (5 times the base font
size).
o text-blue-600:
This sets the color of the text to a blue shade from Tailwind's color palette.
o text-center:
Centers the header text horizontally.
Assignment
2: Style Paragraphs with Different Font Weights
Task:
Create a webpage with three paragraphs: one using normal font weight, one using
bold weight, and one using light font weight.
Step-by-step
Solution:
1.
HTML Structure:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Font Weight</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body> <p class="font-normal text-gray-700">This is a normal weight paragraph.</p> <p class="font-bold text-gray-900">This is a bold weight paragraph.</p> <p class="font-light text-gray-600">This is a light weight paragraph.</p></body></html>
2.
Explanation:
o font-normal:
Applies the default weight (normal text).
o font-bold:
Makes the text bold.
o font-light:
Makes the text lighter.
o text-gray-700,
text-gray-900, and text-gray-600 are used to set
different shades of gray for each paragraph.
Assignment
3: Create a Responsive Text Size
Task:
Create a webpage with a heading that has different font sizes depending on the
screen size.
Step-by-step
Solution:
1.
HTML Code:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Font Size</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body> <h1 class="text-xl sm:text-2xl md:text-4xl lg:text-5xl xl:text-6xl text-center"> Responsive Heading </h1></body></html>
2.
Explanation:
o text-xl:
Default text size (extra small).
o sm:text-2xl:
For small screens (at least 640px
width), it becomes larger (2xl).
o md:text-4xl:
For medium screens (at least 768px
width), it increases to 4xl.
o lg:text-5xl:
For large screens (at least 1024px
width), it becomes even larger (5xl).
o xl:text-6xl:
For extra-large screens (at least 1280px
width), it is 6xl.
Assignment
4: Center Text with Different Colors
Task:
Create a webpage with three centered text elements. Each text should have a
different color.
Step-by-step
Solution:
1.
HTML Code:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Center Text</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body class="bg-gray-100"> <h1 class="text-center text-red-500">This is Red Text</h1> <h1 class="text-center text-green-500">This is Green Text</h1> <h1 class="text-center text-blue-500">This is Blue Text</h1></body></html>
2.
Explanation:
o text-center:
Centers the text horizontally.
o text-red-500,
text-green-500, text-blue-500: Set different
text colors using Tailwind’s color palette.
Assignment
5: Create a Heading with Shadow Effect
Task:
Create a heading with a subtle shadow effect and a large font size.
Step-by-step
Solution:
1.
HTML Code:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Shadow</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body> <h1 class="text-4xl font-bold text-gray-800 shadow-lg">Heading with Shadow Effect</h1></body></html>
2.
Explanation:
o shadow-lg:
Applies a large shadow effect to the text.
o text-4xl:
Sets the font size to a large value.
o font-bold:
Makes the text bold.
Assignment
6: Create a Paragraph with Multiple Text Alignments
Task:
Create a webpage with a single paragraph. Align the text to the left, center,
and right in different sections.
Step-by-step
Solution:
1.
HTML Code:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Alignment</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body> <div class="text-left"> <p>This text is aligned to the left.</p> </div> <div class="text-center"> <p>This text is centered.</p> </div> <div class="text-right"> <p>This text is aligned to the right.</p> </div></body></html>
2.
Explanation:
o text-left,
text-center, and text-right: Aligns text to
the left, center, and right respectively.
Assignment
7: Make a Button with Text Styling
Task:
Create a button with large text and bold font weight.
Step-by-step
Solution:
1.
HTML Code:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Button Styling</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body> <button class="text-xl font-bold text-white bg-blue-600 p-4 rounded">Click Me</button></body></html>
2.
Explanation:
o text-xl:
Sets the text size to extra large.
o font-bold:
Makes the button text bold.
o text-white:
Sets the text color to white.
o bg-blue-600:
Sets the background color of the button.
o p-4:
Adds padding to the button.
Assignment
8: Create a Subheading with a Different Font Size
Task:
Create a webpage with a subheading that uses a smaller font size.
Step-by-step
Solution:
1.
HTML Code:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Subheading Styling</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body> <h2 class="text-lg font-medium text-gray-700">This is a Subheading</h2></body></html>
2.
Explanation:
o text-lg:
Sets the font size to large.
o font-medium:
Applies medium font weight.
o text-gray-700:
Sets the text color to a gray shade.
Assignment
9: Create a Footer with Italic Text
Task:
Create a footer with italic text.
Step-by-step
Solution:
1.
HTML Code:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Footer Styling</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body> <footer class="text-center text-gray-500 italic"> This is an italic footer. </footer></body></html>
2.
Explanation:
o italic:
Applies italic styling to the text.
o text-center:
Centers the text.
o text-gray-500:
Sets the text color to a gray shade.
Assignment
10: Create a Blockquote with Custom Font Size and Style
Task:
Create a webpage with a blockquote that has a larger font size and italic
style.
Step-by-step
Solution:
1.
HTML Code:
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blockquote Styling</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"></head><body> <blockquote class="text-2xl italic text-gray-600"> "This is a stylized blockquote with custom font size and style." </blockquote></body></html>
2.
Explanation:
o text-2xl:
Sets the text size to extra large.
o italic:
Applies italic styling to the text.
o text-gray-600:
Sets the text color to a lighter gray.
These
assignments offer an interactive way to apply Tailwind CSS typography utilities
for beginners. Each assignment explains the step-by-step process and includes
the code to complete the task.
You
said:
WRITE 50 no of MCQs
only FROM ABOVE CONCEPT with explanation
ChatGPT
said:
Here are 50
multiple-choice questions (MCQs) based on Typography Utilities
in Tailwind CSS, along with explanations for each answer.
1.
Which of the following is the class for setting the font size to 3xl in Tailwind CSS?
- A)
text-3xl - B)
text-2xl - C)
font-3xl - D)
font-lg
Answer:
A) text-3xl
Explanation: The text-3xl
class sets the font size to 3xl
according to the Tailwind CSS typography utilities.
2.
What is the class used for setting the text color to red?
- A)
text-red-500 - B)
bg-red-500 - C)
text-blue-500 - D)
text-green-500
Answer:
A) text-red-500
Explanation: The text-red-500
class sets the text color to red with a medium intensity (500 is the default
shade).
3.
Which Tailwind CSS class makes the text bold?
- A)
text-bold - B)
font-bold - C)
font-medium - D)
text-xl
Answer:
B) font-bold
Explanation: The font-bold
class applies bold styling to the text.
4.
How do you make text italic using Tailwind CSS?
- A)
font-italic - B)
text-italic - C)
italic - D)
text-bold
Answer:
C) italic
Explanation: The italic
class applies italic styling to the text.
5.
What does the text-center class do?
- A)
Centers the element
- B)
Aligns text to the center
- C)
Centers the content inside the element
- D)
Centers both the text and the element
Answer:
B) Aligns text to the center
Explanation: The text-center
class horizontally centers the text inside an element.
6.
Which of the following is the correct class to apply a font-size of lg?
- A)
text-lg - B)
font-lg - C)
text-large - D)
font-large
Answer:
A) text-lg
Explanation: The text-lg
class sets the font size to large (lg).
7.
To apply a text shadow to an element, which Tailwind class should be used?
- A)
shadow-lg - B)
text-shadow - C)
shadow-xl - D)
font-shadow
Answer:
A) shadow-lg
Explanation: The shadow-lg
class adds a large shadow effect to the element.
8.
How would you create a heading with extra-large text size?
- A)
text-xxl - B)
text-xl - C)
text-2xl - D)
text-5xl
Answer:
D) text-5xl
Explanation: The text-5xl
class makes the text extra-large, which is appropriate for headings.
9.
Which class is used to set the font weight to normal?
- A)
font-normal - B)
font-light - C)
font-bold - D)
font-heavy
Answer:
A) font-normal
Explanation: The font-normal
class applies a normal (default) font weight to the text.
10.
How do you apply a custom font weight of light text?
- A)
font-light - B)
font-thin - C)
font-regular - D)
text-light
Answer:
A) font-light
Explanation: The font-light
class applies a light font weight to the text.
11.
Which class would be used to increase the text size for screens larger than 768px?
- A)
md:text-3xl - B)
text-md - C)
xl:text-3xl - D)
lg:text-3xl
Answer:
A) md:text-3xl
Explanation: The md:text-3xl
class sets the font size to 3xl
for medium-sized screens (768px and above).
12.
What does the text-right class do?
- A)
Aligns text to the right
- B)
Aligns text to the left
- C)
Justifies text
- D)
Aligns text to the top
Answer:
A) Aligns text to the right
Explanation: The text-right
class aligns text to the right side of the container.
13.
Which class is used for responsive typography in Tailwind CSS?
- A)
text-responsive - B)
responsive-text - C)
sm:text-xl - D)
xl:text-lg
Answer:
C) sm:text-xl
Explanation: The sm:text-xl
class applies a font size of xl
for small screens (640px and above).
14.
What is the class for setting text to 2xl in Tailwind CSS?
- A)
text-xl - B)
font-2xl - C)
text-2xl - D)
text-large
Answer:
C) text-2xl
Explanation: The text-2xl
class sets the font size to 2xl
(larger than xl).
15.
To set text color to gray-800, which class should be used?
- A)
text-gray-800 - B)
bg-gray-800 - C)
color-gray-800 - D)
text-gray-600
Answer:
A) text-gray-800
Explanation: The text-gray-800
class sets the text color to a dark gray shade.
16.
What does the class font-semibold do?
- A)
Makes text bold
- B)
Makes text semi-bold
- C)
Makes text normal
- D)
Makes text light
Answer:
B) Makes text semi-bold
Explanation: The font-semibold
class applies a semi-bold weight to the text.
17.
How do you add a medium font weight to text?
- A)
font-medium - B)
font-normal - C)
font-heavy - D)
font-bold
Answer:
A) font-medium
Explanation: The font-medium
class applies a medium font weight.
18.
What is the class for applying the text color to blue-500?
- A)
text-blue-500 - B)
color-blue-500 - C)
bg-blue-500 - D)
text-light-blue
Answer:
A) text-blue-500
Explanation: The text-blue-500
class sets the text color to blue at the medium intensity (500).
19.
Which class is used to style text with a shadow?
- A)
shadow-sm - B)
text-shadow - C)
font-shadow - D)
text-shadow-lg
Answer:
A) shadow-sm
Explanation: The shadow-sm
class applies a small shadow effect to the text.
20.
How would you change the font size on large screens using Tailwind CSS?
- A)
lg:text-4xl - B)
lg:text-2xl - C)
xl:text-2xl - D)
lg:text-lg
Answer:
A) lg:text-4xl
Explanation: The lg:text-4xl
class applies the 4xl
font size for large screens (1024px
and above).
21.
Which class sets text to the default font size?
- A)
text-base - B)
text-default - C)
font-medium - D)
text-lg
Answer:
A) text-base
Explanation: The text-base
class sets the text to the default base font size.
22.
What does the text-xs class do?
- A)
Sets the text to extra small
- B)
Sets the text to large
- C)
Sets the font weight to extra small
- D)
Sets the text to normal size
Answer:
A) Sets the text to extra small
Explanation: The text-xs
class sets the font size to extra small.
23.
To apply font size xl on extra-large screens, which class
is used?
- A)
xl:text-xl - B)
lg:text-xl - C)
xl:text-lg - D)
xl:text-2xl
Answer:
A) xl:text-xl
Explanation: The xl:text-xl
class applies the xl
font size on extra-large screens (1280px and above).
24.
Which class is used to make the text uppercase?
- A)
uppercase - B)
text-uppercase - C)
font-upper - D)
text-allcaps
Answer:
A) uppercase
Explanation: The uppercase
class transforms the text to uppercase.
25.
What is the class used for setting text to a larger size than the default?
- A)
text-lg - B)
text-sm - C)
text-xl - D)
text-2xl
Answer:
A) text-lg
Explanation: The text-lg
class applies a font size larger than the base size but smaller than xl.
26.
How do you style text to be bold and italic using Tailwind CSS?
- A)
font-bold italic - B)
bold italic - C)
text-bold italic - D)
text-italic font-bold
Answer:
A) font-bold italic
Explanation: The font-bold
and italic
classes are used together to make text both bold and italic.
27.
Which Tailwind class applies a large text shadow?
- A)
shadow-lg - B)
text-shadow-lg - C)
shadow-xl - D)
font-shadow-lg
Answer:
A) shadow-lg
Explanation: The shadow-lg
class applies a large shadow effect to the element.
28.
What does the tracking-wide class do?
- A)
Increases letter spacing
- B)
Decreases letter spacing
- C)
Increases word spacing
- D)
Decreases word spacing
Answer:
A) Increases letter spacing
Explanation: The tracking-wide
class increases the letter spacing of the text.
29.
Which of the following is used to adjust line height in Tailwind CSS?
- A)
line-height - B)
leading - C)
text-spacing - D)
line-spacing
Answer:
B) leading
Explanation: The leading
class in Tailwind CSS adjusts the line height.
30.
What is the class for setting text color to white?
- A)
text-white - B)
text-light - C)
color-white - D)
bg-white
Answer:
A) text-white
Explanation: The text-white
class sets the text color to white.
31.
How do you set a text to a larger size with the 2xl class?
- A)
text-2xl - B)
font-2xl - C)
text-large - D)
text-xxl
Answer:
A) text-2xl
Explanation: The text-2xl
class sets the text size to 2xl.
32.
How do you align text to the center horizontally?
- A)
text-center - B)
align-center - C)
justify-center - D)
center-text
Answer:
A) text-center
Explanation: The text-center
class aligns the text to the center horizontally.
33.
Which of the following classes makes the text bold and increases its size?
- A)
font-bold text-xl - B)
text-bold text-lg - C)
font-xl bold - D)
text-bold text-xxl
Answer:
A) font-bold text-xl
Explanation: The font-bold
text-xl classes make the text bold and increase the font size to xl.
34.
Which Tailwind CSS class is used for creating a shadow effect on text?
- A)
text-shadow - B)
shadow - C)
text-shadow-md - D)
font-shadow
Answer:
B) shadow
Explanation: The shadow
class applies a basic shadow effect to the element.
You
said:
more 16
ChatGPT
said:
Here are
16 more Tailwind CSS quiz questions with answers and explanations:
35.
Which class would you use to make text lowercase in Tailwind CSS?
- A)
text-lowercase - B)
lowercase - C)
font-lowercase - D)
text-sm
Answer:
B) lowercase
Explanation: The lowercase
class is used to convert the text to lowercase.
36.
How do you set the background color to blue in Tailwind CSS?
- A)
bg-blue - B)
bg-blue-500 - C)
background-blue - D)
bg-primary-blue
Answer:
B) bg-blue-500
Explanation: The bg-blue-500
class applies a blue background with a medium intensity.
37.
Which class would you use to set the padding on all sides of an element to 4?
- A)
p-4 - B)
px-4 - C)
py-4 - D)
padding-4
Answer:
A) p-4
Explanation: The p-4
class sets padding of size 4 on all sides of the element.
38.
Which class would you use to remove all margins from an element?
- A)
m-0 - B)
margin-none - C)
no-margins - D)
m-none
Answer:
A) m-0
Explanation: The m-0
class removes all margins from an element.
39.
How do you create a flex container in Tailwind CSS?
- A)
flex-container - B)
container-flex - C)
flex - D)
display-flex
Answer:
C) flex
Explanation: The flex
class makes an element a flex container.
40.
How do you center an element horizontally using flexbox?
- A)
justify-center - B)
align-center - C)
center-horizontal - D)
flex-center
Answer:
A) justify-center
Explanation: The justify-center
class centers an element horizontally in a flex container.
41.
Which of the following is the correct class for making an element display as a
grid?
- A)
display-grid - B)
grid - C)
grid-container - D)
display-flex grid
Answer:
B) grid
Explanation: The grid
class makes an element a grid container in Tailwind CSS.
42.
How do you add a border to an element with a thickness of 2px in Tailwind CSS?
- A)
border-2 - B)
border-thick - C)
border-2px - D)
border-size-2
Answer:
A) border-2
Explanation: The border-2
class adds a 2px border to the element.
43.
Which class would you use to make text italic in Tailwind CSS?
- A)
italic - B)
font-italic - C)
text-italic - D)
text-emphasis
Answer:
A) italic
Explanation: The italic
class makes the text italic.
44.
How do you round the corners of an element with a radius of 4px?
- A)
rounded-4 - B)
rounded - C)
rounded-md - D)
rounded-4px
Answer:
C) rounded-md
Explanation: The rounded-md
class gives the element medium rounded corners, typically 4px.
45.
Which of the following is the class for applying a medium shadow effect?
- A)
shadow-md - B)
shadow-medium - C)
shadow - D)
text-shadow-md
Answer:
A) shadow-md
Explanation: The shadow-md
class applies a medium-sized shadow effect to an element.
46.
How do you set a background color to red with 50% opacity in Tailwind CSS?
- A)
bg-red-500 opacity-50 - B)
bg-opacity-50 bg-red - C)
bg-red opacity-50 - D)
bg-red-500/50
Answer:
D) bg-red-500/50
Explanation: The bg-red-500/50
class applies a red background with 50% opacity.
47.
How do you make an element's text aligned to the right in Tailwind CSS?
- A)
text-right - B)
align-right - C)
text-end - D)
right-align
Answer:
A) text-right
Explanation: The text-right
class aligns the text to the right.
48.
Which of the following classes is used for hiding an element?
- A)
hidden - B)
visibility-hidden - C)
display-none - D)
hide-element
Answer:
A) hidden
Explanation: The hidden
class hides an element by setting display:
none;.
49.
How do you set the width of an element to half of its parent container?
- A)
w-1/2 - B)
width-50 - C)
w-50 - D)
w-1/4
Answer:
A) w-1/2
Explanation: The w-1/2
class sets the width of an element to 50% of its parent container.
50.
How do you make an element sticky at the top of the screen?
- A)
sticky-top - B)
sticky - C)
top-0 - D)
position-sticky
Answer:
B) sticky
Explanation: The sticky
class makes the element sticky, and additional classes like top-0 can be used to set
the position.
No comments:
Post a Comment