HTML Full Course (Day 09)
1. Introduction to CSS:
CSS (Cascading Style Sheets) is a styling language used to describe the presentation and appearance of HTML documents. It allows you to control the visual aspects of elements such as colors, layouts, fonts, and more. CSS works by selecting HTML elements and applying styles to modify their appearance.
2. Inline, internal, and external CSS:
CSS can be applied to HTML elements in three different ways:
- Inline CSS:
Inline styles are defined directly within an HTML element using the `style` attribute. For example, `<h1 style="color: red;">Hello</h1>`. Inline CSS is specific to that element and overrides any external or internal styles applied to it.
- Internal CSS:
Internal styles are defined within the `<style>` element, which is placed in the `<head>` section of an HTML document. The CSS rules inside the `<style>` element apply to the entire document or a specific section. Internal styles are applied to all elements that match the specified selectors.
- External CSS:
External styles are defined in a separate CSS file with a `.css` extension. This file is linked to the HTML document using the `<link>` element in the `<head>` section. External stylesheets can be shared across multiple HTML documents, ensuring consistency in styling.
3. Selectors and declarations:
CSS uses selectors to target specific HTML elements and declarations to specify the styles applied to those elements. Here's how they work:
- Selectors:
Selectors define which HTML elements should be targeted by the CSS rules. Common selectors include element selectors (e.g., `h1`, `p`, `div`), class selectors (e.g., `.my-class`), ID selectors (e.g., `#my-id`), and attribute selectors (e.g., `[type="text"]`). Selectors can also be combined, nested, or grouped to target elements more precisely.
- Declarations:
Declarations are used to specify the styles applied to the selected elements. Each declaration consists of a property and a value, separated by a colon. For example, `color: blue;` sets the text color to blue. Multiple declarations can be grouped together within curly braces ({ }) to form a CSS rule or a set of styles for a particular selector.
4. Applying CSS styles to HTML elements:
To apply CSS styles to HTML elements, you need to associate the CSS rules with the appropriate HTML elements using selectors. Here's how you can apply CSS styles to HTML elements:
- Inline styles:
Use the `style` attribute directly within an HTML element to define inline styles. For example, `<h1 style="color: red;">Hello</h1>`. Inline styles override external and internal stylesheets.
- Internal stylesheets:
Define CSS rules within the `<style>` element in the `<head>` section of the HTML document. Selectors in the CSS rules target the desired HTML elements, and the associated declarations specify the styles to be applied.
- External stylesheets:
Create a separate CSS file (e.g., `styles.css`) and link it to the HTML document using the `<link>` element. For example, `<link rel="stylesheet" href="styles.css">`. The CSS file contains CSS rules with selectors and declarations that will be applied to the corresponding HTML elements.
By using selectors and declarations effectively, you can target specific HTML elements and define the desired styles to create visually appealing and consistent designs for your HTML documents.
.png)
Comments
Post a Comment