HTML & CSS Concepts
1. What is HTML?
Definition:
HTML (HyperText Markup Language) is the language that builds webpages. It tells the
browser what content to show and how to structure it.
Example:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Definition:
de
2. What is a Tag?
A tag is like a label that tells the browser what something is. Tags usually come in pairs, like
<p> and </p>.
Common tags:
Ja
● <h1> to <h6> — headings
● <p> — paragraph
● <img> — image
● <a> — link
● <ul> — unordered list
● <ol> — ordered list
● <li> — list item
● <div> — division or section
3. What is CSS?
Definition:
CSS (Cascading Style Sheets) styles your webpage — it changes colors, sizes, fonts, layouts,
and more.
Example:
p {
color: blue;
font-size: 16px;
}
4. What is a Selector?
Definition: de
In CSS, a selector chooses which HTML element(s) to style.
Examples:
● p selects all paragraphs
● .className selects all elements with that class
● #idName selects one element with that id
Ja
5. What is an Attribute?
Definition:
Extra information inside a tag that gives details or changes behavior.
Examples:
● <a href="https://google.com"> — href tells the link address
● <img src="cat.jpg" alt="Cute cat"> — src is the image file, alt describes it
6. How to Add CSS to HTML?
Three ways:
Inline (directly in tag):
<p style="color: red;">Hello</p>
<style>
de
Internal (inside <style> tag in HTML):
p { color: red; }
</style>
Ja
External (link to CSS file):
<link rel="stylesheet" href="styles.css">
7. Common CSS Properties
Property What it does Example
color Changes text color color: blue;
background-col Changes background color background-color:
or yellow;
font-size Changes text size font-size: 18px;
text-align Aligns text (left, center, right) text-align: center;
border Adds border around border: 1px solid
elements black;
de
8. What is a Class and ID?
Class: used to style many elements with the same style
<p class="highlight">Text</p>
Ja
.highlight { color: red; }
ID: used to style one unique element
<div id="main">Content</div>
#main { background-color: lightgray; }
9. What is a List?
● Unordered list (<ul>) creates bullet points
● Ordered list (<ol>) creates numbered lists
● Items go inside <li> tags
Example:
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
10. What is the <div> tag?
de
A <div> groups content into a block or section so you can style or arrange it together.
Ja
