Categories
Using CSS (Cascading Style Sheets) involves the following steps:
1. Create a CSS File: Start by creating a new plain text file with a .css extension (e.g., styles.css). This file will contain all your CSS code and is separate from your HTML file. It's considered best practice to keep your HTML and CSS separate for better organization and maintenance.
2) Link the CSS File to HTML: In your HTML file (usually within the head section), link the CSS file using the <link> element. The href attribute should point to the location of your CSS file.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="path/to/styles.css">
</head>
<body>
<!-- Your HTML content goes here -->
</body>
</html>
3) Write CSS Rules: Inside the CSS file, you can write CSS rules to style your HTML elements. A CSS rule consists of a selector and a declaration block.
/* CSS rule */
selector {
property: value;
/* more properties and values */
}
For example, to change the text color of all paragraphs to red:
/* styles.css */
p {
color: red;
}
4) Selectors and Styling: Use CSS selectors to target HTML elements you want to style. As mentioned earlier, there are various types of selectors you can use: element selectors, class selectors, ID selectors, etc. Combine selectors to create specific styling rules.
/* Example: Styling a specific class */
.highlight {
background-color: yellow;
font-weight: bold;
}
/* Example: Styling elements within a certain container */
.container p {
font-size: 16px;
}
/* Example: Styling a specific ID */
#header {
font-size: 24px;
color: blue;
}
5) Save and Refresh: After writing your CSS code, save the CSS file. When you refresh your HTML page in the browser, it should now apply the specified CSS styles to the corresponding HTML elements.