Scribd
Upload
33 views24 pages

Web Technology MCQs for Beginners

Uploaded by

fahadjann74
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views24 pages

Web Technology MCQs for Beginners

Uploaded by

fahadjann74
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

MCQS

• Which of the following best describes Web Technology?


a) Tools and languages for programming desktop apps
b) Tools and languages used to make websites and web pages
c) A software to speed up internet connections
d) Hardware components for networking

• What is the main difference between the Internet and the Web?
a) Internet is a website, Web is a network
b) Internet connects web servers, Web connects users
c) Internet is the network connecting computers, Web is a collection of websites on the
Internet
d) There is no difference

• In the Client–Server model of the Web, what is the role of the client?
a) Store web pages
b) Request and display web pages (Browser)
c) Secure the website
d) Manage databases

• Which protocol ensures that data transferred between browser and server is secure?
a) HTTP
b) FTP
c) HTTPS
d) SMTP

• Which of the following is a front-end technology?


a) PHP
b) [Link]
c) JavaScript
d) MySQL

• Which layer of web development is responsible for the visual layout and design?
a) HTML
b) CSS
c) JavaScript
d) PHP

• Which type of website automatically changes content based on user actions or database data?
a) Static website
b) Dynamic website
c) HTML website
d) Front-end website
• W3C is mainly responsible for:
a) Hosting websites
b) Setting rules and standards for building websites
c) Designing web pages for businesses
d) Creating search engines

• What does “Hosting” refer to in web development?


a) The address of a website
b) Space where website files are saved
c) The browser used to open the website
d) The protocol used to send files

• Which of the following examples demonstrates responsive design?


a) Website that looks same on desktop and mobile
b) Website that crashes on small screens
c) Website adjusts layout for mobile, tablet, and desktop
d) Website uses only HTML without CSS

• Which protocol is commonly used to upload or download files from a server?


a) HTTP
b) HTTPS
c) FTP
d) SMTP

• What is a URL?
a) Server that stores websites
b) Address of a webpage (e.g., [Link]
c) Programming language for web
d) Tool to edit websites

• What does HTML stand for?


a) HyperText Markup Language
b) HighText Markup Language
c) Hyperlink Text Main Language
d) Hyper Tool Markup Language

• Why is HTML not considered a programming language?


a) It performs logic and calculations
b) It only structures content without logic or calculations
c) It can interact with databases
d) It runs server-side scripts

• Which symbol is used to enclose HTML tags?


a) ()
b) []
c) {}
d) < >

• What is the role of the <title> tag?


a) Adds headings in the body
b) Displays the page title on the browser tab
c) Creates a paragraph
d) Embeds images

• Which is the root element of an HTML document?


a) <head>
b) <body>
c) <html>
d) <title>

• What does the <body> tag contain?


a) Metadata
b) Visible content of the page
c) Scripts only
d) Stylesheets

• What is the correct extension to save an HTML file?


a) .txt
b) .css
c) .html or .htm
d) .js

• Which is a container element in HTML?


a) <br>
b) <img>
c) <p>...</p>
d) <hr>

• Which is an empty HTML element?


a) <p>
b) <div>
c) <h1>
d) <br>

• What is the difference between a tag and an element?


a) Tag includes content, element is just the label
b) Tag is visible, element is invisible
c) Tag defines start/end, element is everything in between
d) No difference
• Which attribute uniquely identifies an element?
a) class
b) id
c) style
d) title

• Which attribute is used to apply inline CSS?


a) id
b) class
c) style
d) name

• How do you make text bold in HTML?


a) <strong>
b) <b>
c) Both a and b [Correct]
d) <em>

• Which tag is used for italic text?


a) <i>
b) <italic>
c) <em>
d) Both a and c

• Which is a block-level element?


a) <span>
b) <a>
c) <div>
d) <b>

• Which is an inline element?


a) <h1>
b) <div>
c) <p>
d) <span>

• How many heading levels exist in HTML?


a) 3
b) 4
c) 5
d) 6

• Which tag preserves spacing and line breaks?


a) <p>
b) <b>
c) <pre>
d) <hr>

• Which attribute of <body> sets background color?


a) bgcolor
b) color
c) bgcolor
d) backgroundcolor

• Which is an external hyperlink example?


a) <a href="#section1">Go</a>
b) <a href="[Link]
c) <a href="[Link] Google</a>
d) <a>Text</a>

• Which target value opens a link in a new tab?


a) _self
b) _parent
c) _top
d) _blank

• Which attribute provides alternate text for an image?


a) src
b) alt
c) width
d) title

• How do you set width and height of an image?


a) src, alt
b) width, height
c) border, align
d) type, size

• Which tag creates a table row?


a) <td>
b) <tr>
c) <table>
d) <th>

• Which tag adds a table caption?


a) <th>
b) <td>
c) <caption>
d) <tr>
• How do you create an unordered list with circles?
a) <ul type="square">
b) <ul type="disc">
c) <ul type="circle">
d) <ol type="circle">

• Which list displays items as A, B, C?


a) <ul type="A">
b) <ol type="A">
c) <ol type="1">
d) <ul type="1">

• What is the main purpose of a form in HTML?


a) Display images
b) Collect user input
c) Add hyperlinks
d) Format text

• Which input type is used for passwords?


a) text
b) radio
c) password
d) checkbox

• Which HTML5 element represents navigation links?


a) <section>
b) <header>
c) <footer>
d) <nav>

• Which element is for independent content?


a) <section>
b) <aside>
c) <article>
d) <figure>

• Which multimedia element plays audio?


a) <video>
b) <sound>
c) **<audio>** d) <music>`

• Which attribute allows autoplay for audio/video?


a) repeat
b) play
c) autoplay
d) looped

• Which tag embeds an external web page in HTML?


a) <embed>
b) <object>
c) <iframe>
d) <frame>

• Which attribute enables full-screen mode for iframes?


a) fullscreen
b) allowfullscreen
c) full
d) enablefullscreen

• What is the purpose of the <meta charset="UTF-8"> tag?


a) Adds styles
b) Sets character encoding
c) Adds JavaScript
d) Displays heading

• Which tag links an external CSS file?


a) <script>
b) <style>
c) <link rel="stylesheet">
d) <css>

• Which HTML entity displays the less-than symbol?


a) &gt;
b) <
c) &
d) ©

• Which tag is deprecated for font styling?


a) <b>
b) <i>
c) <font>
d) <strong>

• What is the correct way to comment in HTML?


a) // comment
b) <!-- comment -->
c) <!-- comment -->
d) /* comment */
• Which HTML element should be used for the main content of a page?
a) <article>
b) <section>
c) <aside>
d) <main>

• Which element provides a caption for images or diagrams?


a) <figcaption>
b) <caption>
c) <imagecap>
d) <figcaption>

• Which tag is used for preformatted text?


a) <pre>
b) <p>
c) <pre>
d) <code>

• Which attribute hides an element from the page?


a) style="display:none"
b) hidden
c) invisible
d) none

• Which input attribute allows multiple selections in a dropdown?


a) selected
b) multiple
c) value
d) name

• Which semantic tag represents the page footer?


a) <header>
b) <nav>
c) <section>
d) <footer>

• Which input type creates a checkbox?


a) radio
b) password
c) checkbox
d) text

• Which table attribute merges cells horizontally?


a) rowspan
b) colspan
c) width
d) height

• Which element is used to display teletype/monospace font?


a) <tt>
b) <code>
c) <tt>
d) <pre>

• Which entity displays the copyright symbol?


a) ®
b) ©
c) &
d) ™

• What does CSS stand for?


a) Computer Style Sheets
b) Cascading Style Sheets
c) Creative Style System
d) Colorful Style Syntax

• What is the main purpose of CSS?


a) Structure web pages
b) Style and design HTML elements
c) Store HTML files
d) Execute JavaScript

• Which CSS method separates content from style?


a) Inline style
b) Internal style
c) External style sheet
d) None

• How can a single CSS file affect multiple HTML pages?


a) It cannot
b) By linking it in all pages using <link>
c) Only with inline styles
d) Only inside <style> tags

• Which CSS style has the highest priority?


a) External
b) Internal
c) Browser default
d) Inline
• Which part of a CSS rule selects which HTML element to style?
a) Declaration block
b) Selector
c) Property
d) Value

• What ends each property/value pair in a CSS declaration?


a) Colon (:)
b) Semicolon (;)
c) Comma (,)
d) Period (.)

• How are comments written in CSS?


a) <!-- Comment -->
b) / Comment /
c) // Comment
d) # Comment

• What does #idname { color:red; } do?


a) Styles all elements
b) Styles the element with that unique id
c) Styles all classes
d) Does nothing

• Which selector is used for multiple elements with the same style?
a) ID selector
b) Class selector
c) Element selector
d) Pseudo-selector

• How do you target only <p> elements with a specific class?


a) #class p
b) .class
c) [Link]
d) *class

• Inline CSS is written:


a) In <style> tag
b) In .css file
c) Inside the HTML element’s style attribute
d) In JavaScript

• Which statement about multiple CSS files is correct?


a) First file always wins
b) Only the first file loads
c) Last file loaded overrides previous for conflicting properties
d) Multiple files cannot be used

• What is the purpose of cascading in CSS?


a) To create animations
b) To determine style priority when multiple rules apply
c) To load HTML faster
d) To generate colors

• Which property sets the background color?


a) background-image
b) background-color
c) color
d) bgcolor

• Which property sets an image as background?


a) background-repeat
b) background-image
c) background-color
d) image-src

• How do you prevent a background image from repeating?


a) repeat:no
b) repeat:none
c) background-repeat:no-repeat
d) repeat=false

• Which property moves a background image?


a) background-move
b) background-position
c) background-shift
d) image-align

• Shorthand background: #fff url("[Link]") no-repeat right top; combines:


a) color only
b) image only
c) color, image, repeat, and position
d) font and color

• Which layout technique arranges items in rows or columns easily?


a) Grid
b) Flexbox
c) Table
d) Float
• Which layout divides a page into rows and columns?
a) Flexbox
b) Inline-block
c) Grid
d) Float

• How do you make a responsive grid layout?


a) Use display:inline
b) Use media queries
c) Use inline style
d) Use float

• Example: @media (max-width:600px) { .grid { grid-template-columns: 1fr; } }


makes the grid:
a) Two columns
b) One column on small screens
c) Three columns
d) Fixed width

• Which CSS property changes text color?


a) font-size
b) background-color
c) color
d) text-align

• Which CSS property changes text size?


a) font-size
b) color
c) text-decoration
d) text-transform

• Internal CSS is written:


a) In an external file
b) Inside <style> tag in <head>
c) Inside JavaScript
d) Inline

• What is a benefit of using external CSS files?


a) Harder to update
b) Slower loading
c) Consistent design across pages
d) Only works for one page

• What is the default priority order of CSS styles from lowest to highest?
a) Inline → Internal → External → Browser default
b) External → Internal → Inline → Browser default
c) Browser default → External → Internal → Inline [Correct]
d) External → Inline → Internal → Browser default

• Which CSS property changes the horizontal alignment of an element?


a) vertical-align
b) font-size
c) text-align
d) align-items

• Which CSS property creates spacing between elements in a grid?


a) grid-gap
b) gap
c) spacing
d) margin

• What does display: grid; do in CSS?


a) Makes elements flex
b) Enables grid layout
c) Hides elements
d) Changes font

• Which property defines the width of columns in a grid?


a) grid-template-rows
b) gap
c) grid-template-columns
d) grid-area

• Which property sets the height of grid rows?


a) grid-template-columns
b) grid-template-rows
c) row-height
d) gap

• How do you add space between grid items?


a) padding
b) margin
c) gap
d) spacing

• What does repeat(auto-fill, minmax(150px, 1fr)) do?


a) Fixed 150px columns
b) Ignores grid width
c) Automatically fills row with columns of minimum 150px
d) Repeats content
• Media queries are used to:
a) Add animations
b) Change styles for different screen sizes
c) Write inline CSS
d) Add icons

• Container queries differ from media queries because they:


a) Use JavaScript
b) Adjust design based on container width
c) Change font only
d) Change background only

• What does clamp(14px, 4vw, 22px) do?


a) Fixed font size
b) Random font size
c) Responsive font size with min, preferred, max
d) Only works on desktop

• Which viewport unit represents screen width?


a) vh
b) vw
c) vmin
d) vmax

• How do you declare a CSS variable?


a) var(--color)
b) :root { --color: red; }
c) #color: red;
d) $color: red;

• Which property enables smooth change of styles?


a) hover
b) transition
c) transform
d) animation

• Which pseudo-class applies style when a link is hovered?


a) :focus
b) :hover
c) :active
d) :checked

• Which pseudo-element styles a part of an element?


a) :hover
b) :active
c) ::first-letter
d) :checked

• What does :has(img) selector do?


a) Styles all images
b) Styles parent if it contains an image
c) Styles children only
d) Ignores images

• The gap property works for:


a) Grid only
b) Flexbox only
c) Grid and Flexbox
d) Tables

• What does aspect-ratio: 16/9 do?


a) Changes font
b) Maintains width-to-height ratio
c) Moves element
d) Adds padding

• Which rule defines custom animatable CSS properties?


a) @media
b) @keyframes
c) @property
d) @supports

• Which HTML tag is used for Font Awesome icons?


a) <span>
b) <i>
c) <i> with classes
d) <icon>

• In a dropdown menu, which property hides content until hover?


a) display: block;
b) display: flex;
c) display: none;
d) visibility: visible;

• How do cards stack on small screens in a responsive grid?


a) Horizontally
b) Overlapping
c) Vertically using media query
d) Grid disappears
• What is Bootstrap?
a) A JavaScript library
b) A CSS + JS framework for responsive websites
c) A database system
d) A programming language

• Who developed Bootstrap?


a) Brendan Eich
b) Mark Otto and Jacob Thornton
c) Tim Berners-Lee
d) Chris Coyier

• When was Bootstrap released as open-source?


a) 2010
b) 2012
c) 2011
d) 2014

• What is the main purpose of responsive design in Bootstrap?


a) Add animations
b) Adjust layout automatically for different screen sizes
c) Improve SEO only
d) Increase page speed

• How do you add Bootstrap to a project via CDN?


a) <script src="[Link]">
b) <link rel="stylesheet" href="[Link]">
c) Include <link> and <script> from CDN in <head>
d) Download and install from GitHub only

• How many columns does Bootstrap’s grid system have by default?


a) 6
b) 8
c) 12
d) 16

• Which class defines a horizontal row in Bootstrap grid?


a) .col
b) .container
c) .row
d) .grid

• Which class defines column width in Bootstrap?


a) .grid
b) .row
c) .col-*
d) .container

• What is the correct class for a responsive image?


a) .responsive
b) .img-fluid
c) .img-responsive
d) .img-scale

• Which class creates a green alert box?


a) alert-primary
b) alert-danger
c) alert-success
d) alert-warning

• How do you center text quickly in Bootstrap?


a) .text-left
b) .text-center
c) .centered
d) .text-align

• What is the Bootstrap class for padding?


a) .m-3
b) .text-center
c) .p-3
d) .border

• Which component is used to show counts or notifications?


a) Label
b) Button
c) Badge
d) Progress bar

• How is a progress bar width controlled?


a) By adding margin
b) By using class .progress
c) Using style="width:XX%"
d) By .badge class

• Which class styles input fields in Bootstrap forms?


a) form-group
b) form-control
c) input-field
d) form-input
True/False
1. Web Technology only refers to programming languages like HTML, CSS, and
JavaScript. [False]
2. The Internet and the Web are the same thing. [False]
3. In the Client–Server model, the server stores websites and sends them to clients. [True]
4. FTP is used to securely browse websites. [False]
5. Front-end development works on the user side of websites. [True]
6. JavaScript is mainly responsible for the structure of a web page. [False]
7. Static websites change content automatically based on user input. [False]
8. W3C sets standards for HTML, CSS, and other web technologies. [True]
9. Responsive design makes a website adapt to different screen sizes. [True]
10. Hosting refers to the name of a website like [Link]. [False]
11. • HTML is a programming language because it can perform calculations. [False]
12. • Tags in HTML are always enclosed in < >. [True]
13. • The <title> tag content is visible inside the webpage body. [False]
14. • The <html> tag is the root element of an HTML document. [True]
15. • The <body> tag contains metadata about the page. [False]
16. • HTML files can be saved with .html or .htm extensions. [True]
17. • The <br> tag is an example of a container element. [False]
18. • Empty elements do not have a closing tag. [True]
19. • An element includes the opening tag, content, and closing tag. [True]
20. • Inline elements start on a new line. [False]
21. • Block-level elements stay in line with other content. [False]
22. • The id attribute is used to group multiple elements. [False]
23. • The class attribute can group multiple elements together. [True]
24. • The style attribute is used to define inline CSS. [True]
25. • The <b> and <strong> tags have the same visual effect but different semantic
meaning. [True]
26. • The <i> and <em> tags both italicize text. [True]
27. • Headings range from <h1> as largest to <h6> as smallest. [True]
28. • The <pre> tag preserves spacing and line breaks in text. [True]
29. • <font> tag is recommended for styling text in modern HTML5. [False]
30. • The bgcolor attribute sets the text color. [False]
31. • An external hyperlink points to a page on the same website. [False]
32. • Internal links navigate within the same page using IDs. [True]
33. • The _blank target opens a link in the same tab. [False]
34. • The alt attribute describes an image for accessibility. [True]
35. • <img> is an empty element and does not need a closing tag. [True]
36. • <table> rows are defined with <tr> tags. [True]
37. • <th> is used for table headers while <td> is for data. [True]
38. • <caption> adds a title to the table. [True]
39. • <ul> creates an unordered list, and <ol> creates an ordered list. [True]
40. • <dl> defines a definition list with <dt> and <dd>. [True]
41. • Forms collect user input using elements like <input>, <textarea>, and <select>.
[True]
42. • The name attribute identifies form elements for data submission. [True]
43. • <header> is a semantic tag for the bottom section of a page. [False]
44. • <footer> represents the bottom section of a webpage. [True]
45. • <nav> is used for navigation links. [True]
46. • <article> contains independent content that can stand alone. [True]
47. • <aside> represents the main content of a page. [False]
48. • <main> should only appear once per page. [True]
49. • <figure> is used to wrap images or diagrams with optional <figcaption>. [True]
50. • <audio> and <video> elements require external plugins to play media. [False]
51. • The controls attribute adds play/pause options to audio/video. [True]
52. • autoplay starts media automatically when the page loads. [True]
53. • <iframe> can embed another web page within a webpage. [True]
54. • The allowfullscreen attribute allows an iframe to enter full-screen mode. [True]
55. • <meta charset="UTF-8"> sets the page encoding to UTF-8. [True]
56. • <link rel="stylesheet"> is used to include external JavaScript files. [False]
57. • HTML entities like &lt; display reserved characters on the page. [True]
58. • &copy; displays the registered trademark symbol. [False]
59. • Proper indentation and closing tags are part of HTML best practices. [True]
60. • All images in HTML must have alt text for accessibility. [True]
61. • CSS is used to style and design HTML elements. [True]
62. • CSS can control colors, fonts, spacing, and layout. [True]
63. • CSS is responsible for building the structure of HTML. [False]
64. • One CSS file can control multiple HTML pages. [True]
65. • Inline CSS has the highest priority in cascading order. [True]
66. • Comments in CSS are written between <!-- -->. [False]
67. • The ID selector styles multiple elements at once. [False]
68. • Class selectors can style a group of elements with the same class. [True]
69. • Inline styles are written inside the <head> tag. [False]
70. • External style sheets are saved with a .css extension. [True]
71. • Multiple CSS files can be linked to a single HTML page. [True]
72. • In case of conflicting properties, the last loaded CSS file has higher priority. [True]
73. • The background-repeat property can prevent a background image from repeating.
[True]
74. • background-position moves the background image to a specific location. [True]
75. • Flexbox is used to divide a page into rows and columns. [False]
76. • Grid layout divides a page into rows and columns. [True]
77. • Media queries allow CSS layouts to be responsive on smaller screens. [True]
78. • The color property changes the background color. [False]
79. • font-size sets the size of text. [True]
80. • External CSS cannot be reused on multiple pages. [False]
81. • The declaration block in a CSS rule is written inside { }. [True]
82. • Every CSS property/value pair must end with a semicolon. [True]
83. • Inline styles override internal and external styles. [True]
84. • The shorthand background property can include color, image, repeat, and position.
[True]
85. • The display:flex property is used for Flexbox layouts. [True]
86. • grid-template-columns defines the column structure in a Grid layout. [True]
87. • Internal CSS is written in an external .css file. [False]
88. • The gap property adds spacing between grid elements. [True]
89. • CSS makes web pages more attractive and easier to maintain. [True]
90. • The selector in CSS specifies what style properties to apply. [True]
91. • display: grid arranges child elements into rows and columns. [True]
92. • grid-template-columns defines the width of columns. [True]
93. • grid-template-rows defines the width of columns. [False]
94. • The gap property adds space between grid items. [True]
95. • repeat(auto-fill, minmax()) allows automatic column addition. [True]
96. • Media queries adjust styles based on container width. [False]
97. • Container queries adjust styles based on container width. [True]
98. • The clamp() function sets a responsive value with min, preferred, and max. [True]
99. • Viewport unit vw adjusts according to viewport width. [True]
100. • CSS variables are declared inside :root. [True]
101. • Transitions create smooth changes between styles. [True]
102. • The :hover pseudo-class triggers when a user focuses on an element. [False]
103. • ::after is a pseudo-class. [False]
104. • :has() allows selecting a parent element if it contains a specific child. [True]
105. • gap works only for Flexbox layouts. [False]
106. • aspect-ratio ensures an element keeps a fixed width-to-height ratio. [True]
107. • The @property rule defines custom animatable properties. [True]
108. • Font Awesome icons are added via <i> tag with class. [True]
109. • .dropdown-content uses display:none to hide menu initially. [True]
110. • Media queries cannot make grids responsive. [False
111. • Bootstrap is free to download and use. [True]
112. • Bootstrap can only style desktop websites. [False]
113. • Responsive design allows websites to adjust automatically for tablets and
mobile screens. [True]
114. • The .container class is the main wrapper for grid layouts. [True]
115. • Bootstrap grid system divides the page into 10 equal columns. [False]
116. • .col-md-6 means a column will take half width on medium and larger screens.
[True]
117. • .img-fluid ensures images scale automatically to fit screen width. [True]
118. • .btn-primary creates a green button. [False]
119. • Bootstrap provides utility classes like .text-center, .p-3, and .m-2. [True]
120. • Badges are used to show counts beside text. [True]
121. • Jumbotron is a Bootstrap 5 component for large intro sections. [False]
122. • .form-control class is used for styling input fields in forms. [True]
123. • Navbar with class .navbar-dark creates a dark background with light text.
[True]
124. • .alert-danger displays a green alert box. [False]
125. • Bootstrap components require writing custom CSS to function. [False]
126.

Fill in the blanks


1. Web Technology means the tools and languages used to make websites and web
pages.
2. The Internet is the network that connects computers.
3. The Web (WWW) is the collection of websites on the Internet.
4. A client is a browser like Chrome that requests web pages from a server.
5. A server is a computer that stores websites and sends them to clients.
6. HTTP is the rule (protocol) used to send and receive web pages.
7. A web page is one page on a website.
8. A website is a group of web pages.
9. A browser is software to open websites like Chrome or Firefox.
10. A URL is the address of a webpage (e.g., [Link]
11. HTTPS is the secure, encrypted version of HTTP.
12. Front-End works on the user side and includes HTML, CSS, and JS.
13. Back-End works on the server side and includes PHP and [Link].
14. HTML is responsible for the structure (content) of a web page.
15. CSS is responsible for the design (colors and layout) of a web page.
16. JavaScript controls the behavior (actions) of a web page.
17. • HTML stands for HyperText Markup Language.
18. • HTML is not a programming language because it only structures content.
19. • Tags in HTML are enclosed in < >.
20. • The <html> tag is the root element of an HTML document.
21. • The <head> tag contains metadata about the webpage.
22. • The <title> tag displays the page title on the browser tab.
23. • The <body> tag contains visible content.
24. • HTML files are saved with the extension .html or .htm.
25. • <p>...</p> is an example of a container element.
26. • <br> is an empty element.
27. • An element includes the opening tag, content, and closing tag.
28. • The id attribute provides a unique identifier for an element.
29. • The class attribute is used to group elements.
30. • The style attribute allows inline CSS to be applied.
31. • <b> and <strong> both make text bold.
32. • <i> and <em> both make text italic.
33. • HTML headings range from <h1> as largest to <h6> as smallest.
34. • <pre> preserves spacing and line breaks in text.
35. • The <font> tag is deprecated in HTML5.
36. • The bgcolor attribute sets the background color of a page.
37. • <a href="[Link] is an external link.
38. • <a href="#section1"> is an internal link.
39. • _blank is a target value that opens a link in a new tab.
40. • The alt attribute provides alternative text for images.
41. • The <img> tag is an empty element.
42. • Table rows are defined using the <tr> tag.
43. • Table headers use the <th> tag, while data cells use <td>.
44. • <caption> adds a title to a table.
45. • <ul> creates an unordered list, while <ol> creates an ordered list.
46. • <dl> defines a definition list with <dt> and <dd> tags.
47. • Forms collect user input with <input>, <textarea>, and <select>.
48. • The name attribute in forms identifies form elements.
49. • <header> represents the top section of a webpage.
50. • <footer> represents the bottom section of a webpage.
51. • <nav> contains navigation links.
52. • <article> contains independent content.
53. • <aside> is used for sidebar information.
54. • <main> represents the main page content.
55. • <figure> wraps an image or diagram.
56. • <figcaption> provides a caption for a figure.
57. • <audio controls> plays audio files.
58. • <video controls> plays video files.
59. • The autoplay attribute starts media automatically.
60. • <iframe> embeds an external webpage inside a page.
61. • allowfullscreen enables full-screen mode for iframes.
62. • <meta charset="UTF-8"> sets the character encoding.
63. • <link rel="stylesheet" href="[Link]"> links an external CSS file.
64. • &lt; displays the less-than symbol on a webpage.
65. • &copy; displays the copyright symbol.
66. CSS stands for Cascading Style Sheets.
67. CSS is used to style and design HTML elements.
68. CSS controls colors, fonts, spacing, layout, and backgrounds.
69. One CSS file can control the style of multiple HTML pages.
70. Inline style has the highest priority in cascading order.
71. A CSS rule consists of a selector and a declaration block.
72. All style declarations are written inside { }.
73. Each property/value pair ends with a semicolon.
74. Comments in CSS are written between */ and */**.
75. ID selectors use the # symbol.
76. Class selectors use the . symbol.
77. To target a <p> element with a class, write [Link].
78. Inline CSS is written using the style attribute inside the element.
79. Internal CSS is written inside the <style> tag.
80. External CSS files are saved with the .css extension.
81. The background-color property changes the background color of an element.
82. background-image sets an image as the background.
83. The background-repeat property controls whether a background image repeats.
84. background-position sets the position of a background image.
85. Flexbox layouts are created using display:flex.
86. Grid layouts are created using display:grid.
87. grid-template-columns defines the column structure in a grid.
88. gap adds spacing between grid items.
89. Media queries make layouts responsive.
90. Inline CSS overrides internal and external CSS.
91. The shorthand background property can include color, image, repeat, and position.
92. color property sets the text color.
93. font-size property sets the text size.
94. CSS makes web pages attractive, consistent, and easy to maintain.
95. The last CSS file loaded has higher priority for conflicting styles.
96. • To enable grid layout, use display:grid.
97. • grid-template-columns defines the width of columns.
98. • grid-template-rows defines the height of rows.
99. • The gap property adds space between grid items.
100. • repeat(auto-fill, minmax(150px,1fr)) auto-fills columns based on
available space.
101. • Media queries are written using @media.
102. • Container queries use @container.
103. • The clamp() function sets a responsive value with min, preferred, and max.
104. • vw and vh are viewport units.
105. • CSS variables are declared in :root.
106. • Use var(--name) to access a CSS variable.
107. • transition property creates smooth visual changes.
108. • The pseudo-class :hover applies styles on hover.
109. • Pseudo-element ::first-letter targets the first letter of text.
110. • :has(img) selects parent elements containing images.
111. • gap works for Flexbox and Grid layouts.
112. • The aspect-ratio property keeps a fixed width-to-height ratio.
113. • @property defines custom animatable CSS properties.
114. • Font Awesome icons are added using the <i> tag with classes.
115. • .dropdown-content uses display:none until hover.
116. • Bootstrap is a CSS + JavaScript framework for responsive websites.
117. • Bootstrap was developed by Mark Otto and Jacob Thornton.
118. • Responsive design makes a website adjust automatically for different screen
sizes.
119. • To include Bootstrap via CDN, add <link> and <script> tags in the head.
120. • Bootstrap’s grid system divides the page into 12 columns.
121. • The class .row defines a horizontal group of columns.
122. • Column width is set using the class .col-*.
123. • .img-fluid makes images scale automatically to screen width.
124. • .alert-success creates a green alert box.
125. • Text can be centered using the class .text-center.
126. • Padding is applied using .p-3.
127. • Small notification numbers beside text are shown using badge.
128. • Input fields in Bootstrap forms use the class .form-control.
129. • A large header or intro section in Bootstrap 4 uses jumbotron.
130. • .navbar-dark creates a dark horizontal navigation bar with light text.
131.

You might also like