Complete HTML and CSS Course - With Examples
HTML Tags with Examples:
<html>:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<head>:
<head>
<title>Title of the Document</title>
</head>
<title>:
<title>My Webpage</title>
<body>:
<body>
<h1>Hello World</h1>
</body>
<h1>:
<h1>This is a Heading</h1>
<p>:
<p>This is a paragraph.</p>
<a>:
<a href='https://www.example.com'>Visit Example</a>
<img>:
<img src='image.jpg' alt='Image description'>
<ul>:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<li>:
<ul>
<li>List item</li>
</ul>
<div>:
<div>
<p>This is a div element.</p>
</div>
<span>:
<span>This is an inline element.</span>
<table>:
<table>
<tr>
<td>Cell 1</td>
</tr>
</table>
<tr>:
<table>
<tr>
<td>Table Row</td>
</tr>
</table>
<td>:
<table>
<tr>
<td>Table Cell</td>
</tr>
</table>
<th>:
<table>
<tr>
<th>Table Header</th>
</tr>
</table>
<form>:
<form action='/submit' method='post'>
<input type='text' name='fname'>
</form>
<input>:
<input type='text' placeholder='Enter text'>
<button>:
<button>Click Me</button>
CSS Properties with Examples:
color:
color: red; /* Sets the text color to red */
background-color:
background-color: blue; /* Sets the background color to blue */
font-size:
font-size: 16px; /* Sets the font size to 16px */
font-family:
font-family: Arial, sans-serif; /* Sets the font family */
text-align:
text-align: center; /* Aligns the text to the center */
margin:
margin: 20px; /* Adds 20px margin around the element */
padding:
padding: 10px; /* Adds 10px padding inside the element */
border:
border: 1px solid black; /* Adds a black border with 1px width */
display:
display: flex; /* Makes the element a flex container */
position:
position: absolute; /* Positions the element absolutely */
width:
width: 100%; /* Sets the width to 100% of the container */
height:
height: 200px; /* Sets the height to 200px */
box-shadow:
box-shadow: 2px 2px 5px #888888; /* Adds shadow to the box */
opacity:
opacity: 0.5; /* Sets the opacity to 50% */
z-index:
z-index: 10; /* Controls the stacking order of the element */
30 HTML Interview Questions & Answers:
Q1: What is the difference between HTML and XHTML? HTML is a markup language used to create
web pages, while XHTML is a stricter version of HTML that follows XML rules.
Q2: What are the types of CSS? CSS can be applied in three ways: inline, internal, and external.
Q3: What is the box model in CSS? The box model describes the rectangular boxes generated for
elements in the document tree, including margins, borders, padding, and the content.
Q4: What are media queries in CSS? Media queries allow you to apply styles based on the
viewport's dimensions, orientation, and other factors.
Q5: How does the CSS 'float' property work? The float property is used to position elements to the
left or right, allowing text or inline elements to wrap around them.
Q6: What is the difference between 'position: relative' and 'position: absolute'? 'relative' positions an
element relative to its normal position, while 'absolute' positions an element relative to its nearest
positioned ancestor.
Q7: What is the 'display' property in CSS? The display property specifies how an element should be
displayed, such as block, inline, flex, or grid.
Q8: What is the difference between 'id' and 'class' in HTML? 'id' is unique and can be applied to one
element, while 'class' can be applied to multiple elements.
Q9: What is the CSS 'flexbox' layout? Flexbox is a one-dimensional layout method for arranging
elements within a container, either in rows or columns.
Q10: What is the 'z-index' property in CSS? The z-index property controls the vertical stacking order
of elements that overlap.
