HTML/CSS Study
Studied by 0 people
Call Kai
Learn
Practice Test
Spaced Repetition
Match
Flashcards
Knowt Play1/34
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced |
|---|
No study sessions yet.
35 Terms
Basic HTML skeleton for every webpage
"<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
Hello world!
</body>
</html>"
Add a page title that appears in the browser tab
"<title>My First Page</title>"
Create headings of different importance
"<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section heading</h3>"
Write a paragraph of text
"<p>This is a paragraph of text.</p>"
Insert an image with alternate text
"<img src="cat.jpg" alt="A cute cat" width="300">"
Add a clickable link that opens in a new tab
"<a href="https://www.ibm.com" target="_blank">Visit IBM</a>"
Make an unordered and ordered list
"<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>"
Use semantic structure tags for layout
"<header>Header area</header>
<nav>Navigation menu</nav>
<main>Main content</main>
<footer>Footer info</footer>"
Group content with a div, class, and id
"<div class="container" id="main-section">
<p>Content inside a div.</p>
</div>"
Target elements with CSS selectors
"p { color: blue; }
.container { background: lightgray; }
main-section { padding: 10px; }"
Link an external CSS file
"<link rel="stylesheet" href="styles.css">"
Add inline CSS for a quick style
"<p style="color: red;">Inline styled paragraph</p>"
Change the page background color
"body { background-color: #f4f4f4; }"
Change text color of a heading
"h1 { color: darkblue; }"
Adjust font size of text
"p { font-size: 18px; }"
Set the font family for the page
"body { font-family: Arial, sans-serif; }"
Center a block-level div horizontally
".box {
width: 300px;
margin: 0 auto;
background: lightblue;
}"
Center text inside an element
"h1 { text-align: center; }"
Add padding and margin around an element
".box {
padding: 20px;
margin: 20px;
}"
Set a fixed width and height for an element
"div {
width: 200px;
height: 100px;
background: coral;
}"
Specify display types for elements
"span { display: inline; }
div { display: block; }
button { display: inline-block; }"
Align items with flexbox
".flex {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}"
Create a 3-column grid layout
".grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}"
Position an element inside a relative parent
".parent { position: relative; }
.child {
position: absolute;
top: 10px;
left: 20px;
}"
Apply CSS only when the screen width is small
"@media (max-width: 600px) {
body { background-color: lightpink; }
}"
Change button style when hovered
"button:hover {
background-color: darkblue;
color: white;
}"
Add a smooth color transition on hover
"button {
background: blue;
transition: background 0.3s ease;
}
button:hover { background: navy; }"
Make a simple form with label, input, and button
"<form>
<label for="email">Email:</label>
<input type="email" id="email">
<button>Submit</button>
</form>"
Style form input and button elements
"input {
padding: 8px;
border: 1px solid #ccc;
}
button {
background: blue;
color: white;
border: none;
padding: 10px;
}"
Load and use an external Google Font
"<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
body { font-family: 'Poppins', sans-serif; }"
Ensure box model consistency with box-sizing
"* {
box-sizing: border-box;
}"
Add alt text for accessibility on images
"<img src="dog.jpg" alt="Brown Labrador dog">"
Write valid nested HTML markup
"<!-- ✅ valid -->
<p><strong>Hello</strong></p>
<!-- ❌ invalid -->
<p><strong>Hello</p></strong>"
Add an image with a caption underneath
"<figure>
<img src="chart.png" alt="Sales chart">
<figcaption>Q1 Sales Growth</figcaption>
</figure>"
Use clear BEM-style class names
"<div class="card card--highlight">
<h2 class="card__title">Profile</h2>
</div>"
Note 
Flashcards (124)