Cascading Style Sheets (CSS) Class 11/Class 9
Cascading Style Sheets (CSS) is a language used to describe the presentation of web pages, including the layout, colors, typography, and other visual elements. CSS works in conjunction with HTML and JavaScript to create visually appealing and responsive web pages.
There are three main types of CSS:
- Inline CSS: Inline CSS is used to style a specific element or tag within an HTML document. It is defined within the HTML tag using the "style" attribute. Inline CSS is not commonly used in modern web development because it can make the code difficult to maintain and update.
Example: <h1 style="color: red; font-size: 24px;">Hello, world!</h1>
- Internal CSS: Internal CSS is defined within the head section of an HTML document using the
<style>tag. It applies styles to the entire HTML document or specific sections of the document. Internal CSS is useful for small websites or web pages that require a few styling rules.
Example:
<!DOCTYPE html> <html> <head> <style> h1 { color: red; font-size: 24px; } </style> </head> <body> <h1>Hello, world!</h1> </body> </html>
- External CSS: External CSS is defined in a separate file with a
.cssextension and linked to an HTML document using the<link>tag. This method allows developers to apply styles to multiple web pages, keeping the design consistent throughout the website. External CSS is the most commonly used method of applying styles to web pages.
Example:
File: style.css
h1 { color: red; font-size: 24px; }
CSS has become an essential tool for web development, allowing developers to create beautiful, functional websites that work across different devices and screen sizes. By understanding the different forms of CSS, developers can choose the right method for their projects and create elegant and efficient designs.
CSS Selector
In CSS, a selector is used to target specific HTML elements and apply styles to them. A selector identifies the HTML element to which a style is applied. Here are some commonly used CSS selectors:
- Element Selector: This selector targets all instances of an HTML element. For example, the following code targets all h1 elements and sets their font size to 36px:
h1 {font-size: 36px;}
- Class Selector: This selector targets all elements with a specific class attribute. A class is defined using the "." (dot) character followed by the name of the class. For example, the following code targets all elements with the class "example" and sets their font weight to bold:
.example {font-weight: bold;}
- ID Selector: This selector targets a specific element with a unique ID attribute. An ID is defined using the "#" (hash) character followed by the name of the ID. For example, the following code targets the element with the ID "header" and sets its background color to blue:
#header {background-color: blue;}
CSS properties
CSS properties are used to define the visual style and appearance of HTML elements on a web page. Each property corresponds to a specific aspect of an element's appearance. Here are some commonly used CSS properties:
color: This property sets the color of the text. The value can be specified in a number of ways, such as a color name, a hex code, or an RGB value.
Example:
color: blue;
color: #0088cc;
color: rgb(0, 136, 204);
font-family: This property sets the font family for text. The value can be a specific font name or a list of font names.
Example:
font-family: Arial, sans-serif;
font size: This property sets the size of the text. The value can be specified in pixels, ems, or other units of measurement.
Example:
font-size: 18px;
font-size: 1.2em;
background color: This property sets the background color of an element. The value can be specified in the same ways as the color property.
Example:
background-color: white;
background-color: #f0f0f0;
margin: This property sets the margin around an element. The value can be specified in pixels, ems, or other units of measurement.
Example:
margin: 10px;
padding: This property sets the padding around an element. The value can be specified in the same ways as the margin property.
Example:
padding: 10px;
border: This property sets the border around an element. The value can be specified in pixels, ems, or other units of measurement, and can include the border color and style.
Example:
border: 1px solid black;
border: 2px dashed red;
CSS properties are a powerful way to control the visual style of HTML elements on a web page. By using these properties in combination with CSS selectors, developers can create customized and visually appealing web pages.
