HTML styles are applied using CSS (Cascading Style Sheets), which allows you to control the appearance and layout of HTML elements. CSS can be added to HTML in three ways: inline, internal, or external.
Types of CSS:
-
Inline CSS: Applied directly to an HTML element using the
styleattribute.<p style="color: blue; font-size: 20px;">This is a blue paragraph with font size 20px.</p> -
Internal CSS: Defined inside a
<style>tag in the<head>section of the HTML document.<head> <style> p { color: red; font-size: 18px; } </style> </head> <body> <p>This paragraph will have red color and font size 18px.</p> </body> -
External CSS: Defined in a separate
.cssfile, and linked to the HTML file using the<link>tag in the<head>.<head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>This paragraph will be styled according to the rules in the external CSS file.</p> </body>The external
styles.cssfile:p { color: green; font-size: 16px; }
CSS Syntax:
CSS rules are written with selectors and declarations. A selector targets the HTML element, and declarations specify what styles to apply.
selector {
property: value;
}
Example:
h1 {
color: darkblue;
font-size: 24px;
}
- Selector:
h1(all<h1>elements in the HTML document) - Property:
color,font-size(the characteristics to style) - Value:
darkblue,24px(the actual style values)
Common CSS Properties:
-
Text properties:
color: Sets the text color.font-size: Defines the size of the text.font-family: Specifies the font to use.font-weight: Defines the thickness of the text (e.g.,bold).text-align: Aligns the text (e.g.,left,right,center).
-
Box model properties:
width,height: Set the width and height of an element.padding: Controls the space inside an element, between the content and the border.margin: Defines the space outside an element.border: Defines the border around an element (e.g.,border: 1px solid black;).
-
Background properties:
background-color: Sets the background color.background-image: Sets a background image.
-
Positioning properties:
position: Defines the positioning of an element (e.g.,static,relative,absolute,fixed).top,right,bottom,left: Specify the position of an element whenpositionis notstatic.
-
Display and Layout:
display: Defines how an element is displayed (e.g.,block,inline,flex,grid).flex: A powerful layout model to create flexible and responsive designs.grid: A layout system that allows you to design complex layouts easily.
-
Color and Background:
color: Text color.background-color: Background color of the element.background-image: Sets an image as the background.
Example of CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
h1 {
color: #333;
text-align: center;
margin-top: 50px;
}
p {
font-size: 18px;
color: #555;
line-height: 1.6;
margin: 20px 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph styled with CSS. You can change the font size, color, and layout with different properties.</p>
<p>Another paragraph with some content here.</p>
</div>
</body>
</html>
Key Points:
- Selectors: Target HTML elements for styling.
- Properties: Control the appearance and layout.
- Values: Specify the styles to apply.
- Cascade and Inheritance: CSS follows a cascading order, with styles inherited from parent elements unless overridden.
Let me know if you need more examples or explanations on specific CSS features!
No comments:
Post a Comment