Podcast
Questions and Answers
Which HTML tag is used to embed internal CSS within an HTML document?
Which HTML tag is used to embed internal CSS within an HTML document?
- `<div>`
- `<css>`
- `<link>`
- `<style>` (correct)
Which of the following is NOT a self-closing HTML tag?
Which of the following is NOT a self-closing HTML tag?
- `<p>` (correct)
- `<br>`
- `<img>`
- `<hr>`
In HTML, what attribute is used to provide alternative text for an image if it fails to load?
In HTML, what attribute is used to provide alternative text for an image if it fails to load?
- src
- href
- alt (correct)
- title
Which attribute is used to link an external CSS file to an HTML document?
Which attribute is used to link an external CSS file to an HTML document?
Given the CSS rule body { font-size: 16px; } and inline style <p style="font-size: 18px;">Text</p>, what will be the font size of the text inside the paragraph?
Given the CSS rule body { font-size: 16px; } and inline style <p style="font-size: 18px;">Text</p>, what will be the font size of the text inside the paragraph?
What is the correct HTML for inserting a line break?
What is the correct HTML for inserting a line break?
In CSS, what does the * selector target?
In CSS, what does the * selector target?
Which of the following CSS properties is used to change the text color of an element?
Which of the following CSS properties is used to change the text color of an element?
What is the purpose of the <div> tag in HTML?
What is the purpose of the <div> tag in HTML?
In CSS, which selector has a higher specificity: a class selector or an ID selector?
In CSS, which selector has a higher specificity: a class selector or an ID selector?
What is the correct way to create a hyperlink in HTML?
What is the correct way to create a hyperlink in HTML?
In CSS, what is the purpose of the padding property?
In CSS, what is the purpose of the padding property?
What does the <!DOCTYPE html> declaration do?
What does the <!DOCTYPE html> declaration do?
In CSS, how do you select all <li> elements inside an unordered list (<ul>)?
In CSS, how do you select all <li> elements inside an unordered list (<ul>)?
You have the following CSS:
p {
color: blue;
}
.highlight {
color: red;
}
and HTML:
<p class="highlight">This is a paragraph.</p>
What color will the paragraph text be?
You have the following CSS:
p {
color: blue;
}
.highlight {
color: red;
}
and HTML:
<p class="highlight">This is a paragraph.</p>
What color will the paragraph text be?
What is the purpose of the box-sizing property in CSS?
What is the purpose of the box-sizing property in CSS?
Which of the following is the correct way to apply inline CSS to an HTML element?
Which of the following is the correct way to apply inline CSS to an HTML element?
In HTML, which tag is used to define the title of a webpage that appears in the browser tab?
In HTML, which tag is used to define the title of a webpage that appears in the browser tab?
In CSS, what is the effect of using !important in a style declaration?
In CSS, what is the effect of using !important in a style declaration?
How can you target all <p> tags that are direct children of a <div> with the ID 'container'?
How can you target all <p> tags that are direct children of a <div> with the ID 'container'?
What is the correct HTML tag for inserting a video?
What is the correct HTML tag for inserting a video?
What is the tag for creating an ordered list?
What is the tag for creating an ordered list?
What is the HTML tag for creating a new table?
What is the HTML tag for creating a new table?
If you have two conflicting CSS rules targeting the same element, one defined in an external stylesheet and the other as an inline style, which rule will be applied?
If you have two conflicting CSS rules targeting the same element, one defined in an external stylesheet and the other as an inline style, which rule will be applied?
Which of the following is the correct way to use the height attribute in HTML to set the height of an image to 100 pixels?
Which of the following is the correct way to use the height attribute in HTML to set the height of an image to 100 pixels?
In CSS, how do you specify the font family for an element?
In CSS, how do you specify the font family for an element?
If you set box-sizing: border-box; on an element with width: 200px;, padding: 20px;, and border: 5px solid black;, what will be the total rendered width of the element?
If you set box-sizing: border-box; on an element with width: 200px;, padding: 20px;, and border: 5px solid black;, what will be the total rendered width of the element?
What is the purpose of the span tag?
What is the purpose of the span tag?
In what section do you link an external CSS file?
In what section do you link an external CSS file?
Flashcards
What does HTML stand for?
What does HTML stand for?
Hyper-Text Markup Language, the standard language for creating web pages.
What are self-closing tags?
What are self-closing tags?
Tags that don't require a closing tag.
What is an attribute?
What is an attribute?
Provides additional information about an HTML element.
What does the class attribute do?
What does the class attribute do?
Signup and view all the flashcards
What is the src attribute?
What is the src attribute?
Signup and view all the flashcards
What is the alt attribute?
What is the alt attribute?
Signup and view all the flashcards
What is the href attribute?
What is the href attribute?
Signup and view all the flashcards
What is the rel attribute?
What is the rel attribute?
Signup and view all the flashcards
What is the style attribute?
What is the style attribute?
Signup and view all the flashcards
What does the height attribute do?
What does the height attribute do?
Signup and view all the flashcards
What does the width attribute do?
What does the width attribute do?
Signup and view all the flashcards
What is CSS?
What is CSS?
Signup and view all the flashcards
What does the * (universal) selector do?
What does the * (universal) selector do?
Signup and view all the flashcards
What are the main types of CSS selectors?
What are the main types of CSS selectors?
Signup and view all the flashcards
What happens when CSS specificities are tied?
What happens when CSS specificities are tied?
Signup and view all the flashcards
What does !important do in CSS?
What does !important do in CSS?
Signup and view all the flashcards
What does the CSS property font-size do?
What does the CSS property font-size do?
Signup and view all the flashcards
What does the CSS property font-family do?
What does the CSS property font-family do?
Signup and view all the flashcards
What does the CSS property color do?
What does the CSS property color do?
Signup and view all the flashcards
What does the CSS property background-color do?
What does the CSS property background-color do?
Signup and view all the flashcards
What does the CSS property height do?
What does the CSS property height do?
Signup and view all the flashcards
What does the CSS property width do?
What does the CSS property width do?
Signup and view all the flashcards
What does the CSS property padding do?
What does the CSS property padding do?
Signup and view all the flashcards
What does the CSS property margin do?
What does the CSS property margin do?
Signup and view all the flashcards
What does the CSS property border do?
What does the CSS property border do?
Signup and view all the flashcards
What does the CSS property box-sizing do?
What does the CSS property box-sizing do?
Signup and view all the flashcards
What does box-sizing: border-box do?
What does box-sizing: border-box do?
Signup and view all the flashcards
What is the <link> tag used for?
What is the <link> tag used for?
Signup and view all the flashcards
What does the <ul> tag do?
What does the <ul> tag do?
Signup and view all the flashcards
What does the <ol> tag do?
What does the <ol> tag do?
Signup and view all the flashcards
Study Notes
- HTML, or Hyper-Text Markup Language, structures web page content.
- HTML tags begin with "<" and define the element type.
- Most HTML tags require open and closing tags.
HTML Document Structure:
- Documents start and end with
<html></html>tags. - The
<head>section contains webpage information not displayed on the page.- The
<title>tag within<head>specifies the page title shown in the browser tab. - The
<style>tag in<head>embeds CSS, known as "internal CSS".
- The
- The
<body>section holds the visible content.<p>creates paragraphs.<h1>to<h6>create headings of varying sizes, with<h1>being the largest.<div>creates containers/boxes.<b>bolds text.<i>italicizes text.<video>embeds video content.<a>(anchor tag) creates hyperlinks.<ul>and<ol>create unordered (bulleted) and ordered (numbered) lists, respectively.<li>denotes a list item within<ul>or<ol>.<span>selects a section of text for styling.
Self-Closing Tags:
- Self-closing tags do not have a closing tag.
<!DOCTYPE html>declares HTML5.<link>links external CSS files (in the<head>).<br>inserts a line break.<hr>creates a horizontal line.<img>inserts an image.<source>in<video>or<audio>specifies the media file.
HTML Elements
- Consist of the opening tag, closing tag, and content.
HTML Attributes
- Attributes modify HTML elements, added to the opening tag.
class="class_name"specifies a class, allowing multiple space-separated class names.id="id_name"specifies a unique ID.src="image.jpg"provides the source URL for images (<img>) or media (<video>,<audio>).alt="alternative text"provides alternative text for images if they fail to load.href="style.css"links to another document (<a>,<link>).rel="stylesheet"defines the relationship of the linked document (<link>).style="color: red;"applies inline CSS.height="360px"sets the height of an element.width="240px"sets the width of an element.
CSS (Cascading Style Sheets)
- CSS styles HTML elements to control their appearance.
- CSS uses selectors to target HTML elements:
- Elements (tags).
- Classes.
- IDs.
*is a universal selector targeting all elements.
Multiple Selectors
- Target multiple elements by separating selectors with commas (e.g.,
p, ul, div).
Combining Selectors
- Combining selectors increases specificity without spaces (e.g.
p#p1.para.top). - Child elements are targeted using spaces (e.g.,
ul ol) or the direct child selector>(e.g.ul > ol).
Specificity
- Conflicting styles are resolved by the most specific selector.
- If specificity is tied, the later declaration wins.
- Specificity ranking (lowest to highest):
- Elements (tags).
- Classes.
:nth-child()pseudo-selector.- IDs.
- Inline styling (style attribute).
!importantoverrides all other CSS.
Common CSS Properties:
font-sizesets text size (pixels).font-familysets the font (e.g., Arial).colorsets text color (name, hex, RGB).background-colorsets background color.heightsets element height (pixels).widthsets element width (pixels).paddingadds space around content, increasing element size.- One value: applies to all sides.
- Two values: top/bottom, left/right.
- Three values: top, left/right, bottom.
- Four values: top, right, bottom, left (clockwise).
- Specific sides can be set with
padding-top,padding-bottom,padding-left, andpadding-right.
marginadds space outside the border, not affecting element size.- Margin values behave like padding values.
borderadds a border: specify width, style (e.g., solid), and color.box-sizingcontrols how width and height are calculated.content-box(default) sets width/height for content, padding/border increase total size.border-boxincludes padding/border within specified width/height.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
