Chapter1 CSS
CSS (Cascading Style Sheets) is a style sheet language used to describe the display of an HTML or XML document. It allows web developers to control the appearance and layout of multiple web pages at once. Here's a detailed overview of some fundamental CSS properties:
1. Color:
a). color: sets the text color.
b). background-color: Sets the background color of an element.
2. Typography:
a). font-family: specifies the font of the text.
b). font-size: Sets the size of the font.
c). font-weight: controls the boldness of the text.
d). text-align: aligns text (left, right, center, justify) inside an element.
3. Layout:
a).display: Defines the display behavior of an element (block, inline, etc.).
b). width and height: sets the width and height of an element.
c). Margin: The space outside of an element is controlled by the margin.
d). padding: manages the space inside of an element.
e).float: Allows an element to be positioned to the left or right of its container.
f).position: controls the positioning method of an element (static, relative, absolute, or fixed).
4. Border and Outline:
a). border: defines the border around an element (width, style, color).
b). outline: Sets a line around the border edge of an element.
5. Background:
a). background-image: Sets an image as the background.
b). background-position: specifies the background image's initial location.
c). background-repeat: specifies how a background image should be repeated.
6. Others:
a). text-decoration: controls text decoration (underline, line-through, etc.).
b). z-index: Sets the stacking order of elements.
c). cursor: specifies the type of cursor to be displayed when hovering over an element.
Understanding and utilizing these CSS properties allows for the creation of visually appealing and responsive web pages. It's essential to learn how these properties work together to achieve the desired layout, styling, and interactivity on a website.
Example:- Here we use some property of CSS
<Html>
<head>
<style>
b{color:blue;font-family:jokerman;font-size:50;text-decoration:underline;background-image:url("image.jpg");text-transform:uppercase}
i{color:green;font-size:50;text-decoration:line-through}
u{color:red;text-decoration:overline;font-style:italic;font-weight:bold;background-color:yellow;font-size:50;text-decoration:overline}
</style>
</head>
<body>
<b>Country</b>
<p>
<i>State</i>
<p>
<u>City</u>
<p>
</body>
</html>
20231102011446.png)
Result:-
20231102011506.png)
