Join our community to see how developers are using Workik AI everyday.
Q1: What is the difference between block-level and inline elements in HTML?
Block-level elements start on a new line and take up the full width available (100% of the container), while inline elements do not start on a new line and only take up as much width as necessary.
Examples:
<div>
,
<h1> - <h6>
,
<p>
,
<section>
,
<article>
, etc.
<span>
,
<a>
,
<img>
,
<strong>
,
<em>
, etc.
Q2: What is the box model in CSS?
The box model in CSS describes how the elements on a web page are structured and displayed. It consists of four parts:
Q3: Explain the difference between classes and IDs in HTML and CSS.
ID:
Unique identifier for an element. It should be unique within the document. Used for a single element.
Class:
Used to apply styles to multiple elements. Can be used on multiple elements within the document.
Example Code:
<!-- HTML -->
<div id="unique-element">This has a unique ID.</div>
<div class="common-element">This has a class.</div>
<div class="common-element">This also has the same class.</div>
/* CSS */
#unique-element {
color: blue;
}
.common-element {
color: green;
}Q4: What are semantic HTML elements? Provide examples.
Semantic HTML elements clearly describe their meaning in a human- and machine-readable way. These elements define the structure and content of the web page.
Examples:
<header>
: Defines a header for a document or section.
<nav>
: Defines a navigation block.
<section>
: Defines a section in a document.
<article>
: Defines an article.
<footer>
: Defines a footer for a document or section.
Q5: What are CSS selectors and how do they work?
CSS selectors are patterns used to select the elements you want to style. There are several types of selectors:
Element Selector
: Selects all elements of a given type.
p { color: blue; }
Class Selector
: Selects all elements with a given class.
.classname { color: red; }
ID Selector
: Selects a single element with a given ID.
#idname { color: green; }
Attribute Selector
: Selects elements based on an attribute or attribute value.
a[target="_blank"] { color: yellow; }
Pseudo-class Selector
: Selects elements based on their state.
a:hover { color: pink; }Request question
Please fill in the form below to submit your question.
Q6: What is the purpose of the alt attribute in images?
The
alt
attribute in images provides alternative text for an image if it cannot be displayed. It is also used by screen readers to describe images for visually impaired users, improving accessibility.
Example:
<img src="image.jpg" alt="A description of the image">Q7: Explain the use of the flexbox layout in CSS.
The flexbox layout is a CSS module that provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown and/or dynamic. The main components are:
display: flex;
: Defines a flex container and enables a flex context for all its direct children.
flex-direction:
Defines the direction of the flex items.
justify-content:
Aligns flex items along the main axis.
align-items:
Aligns flex items along the cross axis.
flex-wrap:
Specifies whether the flex items should wrap or not.
Example:
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}Q8: What is the difference between padding and margin in CSS?
Padding:
The space between the content of the element and its border. It affects the element's internal space.
Margin:
The space outside the border of the element. It affects the element's external space, creating space between elements.
Q9: How do you create a table in HTML?
A table in HTML is created using the
<table>
tag along with
<tr>
for table rows,
<th>
for table headers, and
<td>
for table data cells.
Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>Q10: Explain the difference between position: relative; and position: absolute; in CSS.
position: relative;
: The element is positioned relative to its normal position. Offsets (top, right, bottom, left) will move it from its normal position without affecting the layout of other elements.
position: absolute;
: The element is positioned relative to its nearest positioned ancestor (not static). If no such ancestor exists, it uses the document body, and it will be placed in relation to the initial containing block. Absolute positioning removes the element from the normal document flow.
Example:
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 50px;
left: 100px;
}Request question
Please fill in the form below to submit your question.
Q11: What is the difference between external, internal, and inline CSS?
External CSS:
Styles are defined in an external stylesheet file with a .css extension, linked to the HTML document using the
<link>
tag.
<link rel="stylesheet" href="styles.css">
Internal CSS:
Styles are defined within the
<style>
tag inside the
<head>
section of the HTML document.
<style>
body {
background-color: lightblue;
}
</style>
Inline CSS:
Styles are applied directly to HTML elements using the
style
attribute.
<p style="color: red;">This is a red paragraph.</p>Q12: What are media queries and how are they used in responsive design?
Media queries are used in CSS to apply different styles based on the characteristics of the device, such as its width, height, orientation, and resolution. They are essential for creating responsive web designs that adapt to various screen sizes.
Example:
/* Default styles */
body {
background-color: white;
}
/* Styles for screens wider than 600px */
@media (min-width: 600px) {
body {
background-color: lightblue;
}
}Q13: What is the purpose of the z-index property in CSS?
The
z-index
property in CSS controls the stacking order of elements that overlap. Higher values are placed on top of lower values. It only works on positioned elements (
position: relative
,
absolute
,
fixed
, or
sticky
).
Example:
.div1 {
position: absolute;
z-index: 1;
}
.div2 {
position: absolute;
z-index: 2;
}Q14: Explain the concept of CSS specificity.
CSS specificity determines which CSS rule is applied by the browser when multiple rules target the same element. It is calculated based on the selectors used:
style="color: red;"
).
#id
) have higher specificity than class selectors (
.class
), attribute selectors (
[attribute]
), and pseudo-classes (
:hover
).
div
,
p
) and pseudo-elements (
::before
,
::after
) have the lowest specificity.
Example Calculation:
/* Specificity: 0-1-0-0 (one ID selector) */
#header { color: blue; }
/* Specificity: 0-0-1-0 (one class selector) */
.header { color: green; }
/* Specificity: 0-0-0-1 (one element selector) */
header { color: red; }Q15: What are CSS preprocessors and why are they useful?
CSS preprocessors are scripting languages that extend CSS by allowing variables, nested rules, mixins, functions, and more. They help to make CSS more maintainable, reusable, and easier to write. Popular preprocessors include Sass, LESS, and Stylus.
Example using Sass:
$primary-color: blue;
body {
color: $primary-color;
}
.navbar {
background-color: $primary-color;
}Request question
Please fill in the form below to submit your question.
Q16: What is the purpose of the DOCTYPE declaration in HTML?
The
DOCTYPE
declaration is used to specify the HTML version and type for the browser. It helps the browser to render the document correctly. The declaration should be the very first thing in an HTML document, before the
<html>
tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>Q17: Explain the concept of CSS Grid Layout.
CSS Grid Layout is a two-dimensional layout system for the web. It allows developers to create complex, responsive web layouts more easily. It uses rows and columns to define the structure of the layout.
Basic Example:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
.item {
background-color: lightblue;
}Q18: What is the difference between visibility: hidden; and display: none; in CSS?
visibility: hidden;
Hides the element, but it still takes up space in the layout.
display: none;
Removes the element from the document flow entirely, so it does not take up any space.
Example:
.hidden-element {
visibility: hidden;
}
.none-element {
display: none;
}Q19: What are pseudo-classes in CSS? Provide examples.
Pseudo-classes are keywords added to selectors that specify a special state of the selected elements. They are used to define the styles for special states of elements.
Examples:
a:hover {
color: red;
}
input:focus {
border-color: blue;
}
li:nth-child(2) {
background-color: yellow;
}Q20: Explain the use of the em and rem units in CSS.
em:
A relative unit that is based on the font size of the element it is used on. If no font size is set on the element, it will inherit the font size from its parent.
/* If the parent element has a font size of 16px */
.child {
font-size: 2em; /* 32px */
}
rem:
A relative unit that is based on the root element's (
html
) font size. It is not affected by the parent element's font size.
/* If the root element has a font size of 16px */
.child {
font-size: 2rem; /* 32px */
}Request question
Please fill in the form below to submit your question.
Request question
Please fill in the form below to submit your question.
(Basic)
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
</head>
<body>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
</body>
</html>
(Basic)
.center-element {
margin-left: auto;
margin-right: auto;
}
.center-element {
margin-left: auto;
margin-right: auto;
display: block; /* Added to ensure the element is block-level */
}
(Intermediate)
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: blue;
color: white;
padding: 10px;
}
#footer {
background-color: blue;
color: white;
padding: 10px;
}
.btn {
padding: 10px;
border: 1px solid black;
}
.submit-btn {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="header">Header</div>
<button class="btn">Click Me</button>
<button class="submit-btn">Submit</button>
<div id="footer">Footer</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.common-style {
background-color: blue;
color: white;
padding: 10px;
}
.btn {
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="header" class="common-style">Header</div>
<button class="btn">Click Me</button>
<button class="btn">Submit</button>
<div id="footer" class="common-style">Footer</div>
</body>
</html>
(Intermediate)
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}
(Intermediate)
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: red;
width: 100px;
height: 100px;
}
.box:hover {
background-color: green;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</body>
</html>
Initially, the background color of both div elements will be red. When a user hovers over either box, its background color will change to green.
(Advanced)
CSS
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 200px; /* Example height */
border: 1px solid black;
}
.child {
width: 100px;
height: 100px;
background-color: lightblue;
}
HTML
<div class="parent">
<div class="child">Centered</div>
</div>
(Advanced)
.container {
display: grid;
grid-template-column: repeat(3, 1fr); /* Incorrect property name */
gap: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Corrected property name */
gap: 10px;
}
(Advanced)
CSS:
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: darkblue;
color: white;
padding: 10px;
z-index: 1000;
}
body {
margin-top: 50px; /* Add margin to avoid content being hidden behind the fixed header */
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
Fixed Header
</header>
<div>
<!-- Content goes here -->
</div>
</body>
</html>
(Advanced)
@keyframes move {
0% { left: 0; }
100% { left: 100px; }
}
.element {
position: relative;
animation: move 2s infinite;
}
To improve performance, use
transform
instead of
left
for smoother animations and better performance.
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
.element {
position: relative;
animation: move 2s infinite;
}
(Advanced)
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightgrey;
}
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 1;
}
.box2 {
position: absolute;
top: 70px;
left: 70px;
width: 100px;
height: 100px;
background-color: red;
z-index: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
</div>
</body>
</html>
The
.box2
div will be positioned on top of the
.box1
div due to the higher
z-index
value. Both divs will be positioned inside the
.container
div, with
.box1
being partially overlapped by
.box2
.
Request question
Please fill in the form below to submit your question.
Sign Up Now
Overview of HTML & CSS
Explore more on Workik
.png)
