How to use css in HTML
Understanding CSS and Its Role in HTML
CSS stands for Cascading Style Sheets. It's a coding language used alongside HTML (HyperText Markup Language) to style the content of web pages. HTML is like the bare bones of a website, while CSS is the skin and clothes that make it look nice. If HTML is the cake, CSS is the icing.
In HTML, we define the structure of a website: headers, paragraphs, images, links etc. However, without CSS, all these elements would appear in the default styles provided by the browser, which can make your website look plain and uninteresting. CSS is what we use to add colours, borders, backgrounds, and even to layout our elements on the page.
How to Include CSS in HTML
There are three main ways to include CSS in your HTML files: inline styles, internal stylesheets, and external stylesheets.
Inline Styles
Inline styles are CSS rules that are applied directly to the HTML elements using the style attribute. This method is not commonly used because it's not efficient for styling a large number of elements and it can make the HTML code messy and hard to read.
Here's an example of inline CSS:
<p style="color: red; font-size: 20px;">This is a paragraph styled with inline CSS.</p>
This will display a paragraph with red text at a font size of 20 pixels.
Internal Stylesheets
An internal stylesheet is defined in the <head> section of an HTML document using the <style> tag. This method is useful when you want to apply styles to a single HTML page.
Here's an example of an internal stylesheet:
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>This is a paragraph styled with an internal stylesheet.</p>
</body>
This will display a paragraph with blue text at a font size of 16 pixels.
External Stylesheets
External stylesheets are separate .css files that are linked to an HTML document using the <link> tag. This method is the most common and efficient way to include CSS because you can apply the same styles to multiple HTML pages.
Here's an example of an external stylesheet:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph styled with an external stylesheet.</p>
</body>
And in the styles.css file:
p {
color: green;
font-size: 18px;
}
This will display a paragraph with green text at a font size of 18 pixels.
Basic CSS Syntax
A CSS rule-set consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
Here's an example of a basic CSS rule:
p {
color: black;
font-size: 14px;
}
This rule will apply the color black and a font size of 14 pixels to all paragraph elements in the HTML document.
CSS Properties
There are hundreds of CSS properties available for styling HTML elements. Some of the most commonly used ones include:
color: sets the text color.background-color: sets the background color.font-size: sets the text size.border: sets the border around an element.padding: sets the space between an element's content and its border.margin: sets the space around an element.
Here's an example of how to use these properties in CSS:
p {
color: white;
background-color: black;
font-size: 16px;
border: 1px solid red;
padding: 10px;
margin: 20px;
}
This will style the paragraph elements with white text on a black background, a font size of 16 pixels, a red border, 10 pixels of padding, and 20 pixels of margin.
Conclusion
CSS is a powerful tool for styling HTML documents. By understanding how to include CSS in HTML and how to use CSS properties, you can create visually appealing websites that provide a great user experience. Remember, practice makes perfect. So, don't hesitate to experiment and try out different styles on your own. Happy coding!