HTML and CSS styles format
HTML and CSS are two separate languages that are used together to create web pages. HTML is used to define the structure and content of the web page, while CSS is used to control the presentation and styling of the web page. Here's an example of how you can use CSS to format HTML elements:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is some sample text.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
CSS:
/* styles.css */
body {
font-family: Arial, sans-serif;
}
h1 {
color: #ff0000;
font-size: 36px;
}
p {
font-size: 18px;
line-height: 1.5;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 10px;
background-color: #eaeaea;
margin-bottom: 10px;
}
In this example, the CSS code is saved in a separate file named styles.css and linked to the HTML file using the <link> tag in the <head> section of the HTML document. The CSS styles are defined using selectors that target specific HTML elements. For example, the body selector applies styles to the entire web page, while the h1 selector targets only the <h1> heading element.
The CSS properties are used to define the specific styles for each targeted element. For example, the color property is used to set the text color of the <h1> element to red (#ff0000), while the font-size property is used to set the font size to 36 pixels.
Overall, the CSS styles help to create a visually appealing and easy-to-read web page by controlling the presentation and layout of the HTML content.