CSS (Cascading Style Sheets) is a language used for describing the presentation of a document written in a markup language, such as HTML or XML.
It is used to control the layout and visual design of web pages.
CSS selectors are used to select elements on a web page and apply styles to them.
Some common types of selectors include:
Element selectors: Selects elements based on their HTML tag name, such as "p" for paragraphs or "h1" for headings.
Example:
p {
color: blue;
}
Class selectors: Selects elements based on their class attribute. Classes are assigned to elements using the "class" attribute, and multiple elements can share the same class.
Example:
.highlight {
background-color: yellow;
}
ID selectors: Selects elements based on their id attribute.
IDs are assigned to elements using the "id" attribute, and each element can have only one unique id.
Example:
#header {
font-size: 20px;
}
Attribute selectors: Selects elements based on their attributes and attribute values.
Example:
a[href='https://example.com']
{
color: red;
}
There are also more advanced selectors such as:
Pseudo-class selectors: Selects elements based on their state or position in the document, such as links that have been visited or elements that are being hovered over.
Example:
a:hover {
text-decoration: underline;
}
Pseudo-element selectors: Selects a specific part of an element, such as the first letter of a paragraph or the ::before and ::after of an element.
Example:
p::first-letter {
font-size: 20px;
}
You can also group selectors to apply the same styles to multiple elements.
Example:
h1, h2, h3 {
color: blue;
text-align: center;
}
You can also use CSS cascading and inheritance to apply styles to child elements.
It is important to note that the specificity of the selectors is also important, more specific selectors will have precedence over more general selectors.
HTML figures are used to embed images, videos, or other types of media within an HTML document. They are typically used to include illustrations, diagrams, or photographs that are related to the content of the document.
The <figure> tag is used to define a container for the media, and the <img> tag is used to define the actual media element.
Attributes of the <figure> tag include:
class: specifies a class name for the element
id: specifies a unique id for the element
style: specifies an inline CSS style for the element
title: provides additional information about the element
Attributes of the <img> tag include:
src: specifies the URL of the image
alt: provides alternative text for the image in case the image cannot be displayed
width and height: specify the dimensions of the image
style: specifies an inline CSS style for the element
title: provides additional information about the element
Here is an example of using the <figure> and <img> tags to embed an image in an HTML document:
In this example, the <img> tag is used to define the image element and the src attribute is used to specify the URL of the image. The alt attribute provides alternative text for the image, and the width and height attributes specify the dimensions of the image. The <figcaption> is used to provide a caption for the image
Note that the <figcaption> is optional and can be used to provide a caption for the image.
The HTML <pre> element is used to define preformatted text. Text within an <pre> element is displayed in a fixed-width font, and whitespace characters such as spaces and line breaks are honored.
This allows the text to maintain its original formattings, such as multiple spaces or line breaks.
The <pre> element is often used to display code snippets or other text that should retain its original formatting.
Example:
<pre>
This is a preformatted
text block.
White space is preserved.
</pre>
It also has a default CSS styling, it has a monospace font, a white background, and the text is wrapped.
You can also use the white-space property to control how the text is displayed, such as using white-space: pre-line; to wrap text but still honor line breaks.
To embed a YouTube video in an HTML webpage, you can use the <iframe> element.
The src attribute should be set to the URL of the video on YouTube, and the width and height attributes can be set to specify the size of the video player.
There are several attributes that can be used with the <iframe> element to customize the appearance and behavior of the embedded video. Some commonly used attributes include:
src: The URL of the video to be embedded. This is required for the video to be displayed.
width and height: The width and height of the video player, in pixels.
frameborder: The width of the border around the video player, in pixels. A value of "0" will remove the border.
allowfullscreen: Allows the video to be played in fullscreen mode.
title: Title of the video
id: unique id for the iframe
class: class name for the iframe
sandbox : Enables an extra set of restrictions for the content in the iframe.
seamless : Indicates that the iframe should be displayed as if it is a part of the containing document, rather than being isolated in a separate browsing context.
srcdoc : The HTML content of the page to show in the iframe.
name : The name of the iframe.
Please note that some of these attributes might not be supported in some older browsers.
