CSS styles cheets and types:
CSS (Cascading Style Sheets) is used to style HTML elements, and there are three main types of CSS stylesheets:
1. Inline CSS
This type of CSS is written directly inside an HTML element using the style attribute. It only affects that particular element.
Example:
html
<p style="color: red; font-size: 18px;">This is styled with inline CSS</p>
- What it does: The text inside this <p> element will be red and the font size will be 18px.
1.Pros:
-Easy to use for a quick style on a single element.
2.Cons:
-Hard to maintain because the style is mixed with the HTML.
Not reusable for other elements.
2. Internal CSS (Embedded):
This type of CSS is placed inside the <style> tag in the <head> section of the HTML document. It applies to the entire page but is written within the same HTML file.
Example:
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<h1>This is an H1 heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
1.What it does:
-The background color of the page will be light blue.
-The heading <h1> will have green text and use the Arial font.
2.Pros:
-Useful for styling a single HTML document.
-Styles are kept in one place (in the <head> tag).
3.Cons:
-Not efficient for larger websites, where you might have many pages needing the same styles.
3. External CSS:
External CSS is the best and most commonly used type. The CSS code is stored in a separate .css file, and this file is linked to the HTML document.
Example:
1.HTML file (index.html):
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is an H1 heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2.CSS file (styles.css):
css
body {
background-color: lightyellow;
}
h1 {
color: navy;
font-size: 24px;
}
p {
color: gray;
font-family: Verdana;
}
1.What it does:
-The background of the page will be light yellow.
-The <h1> will have navy blue text and a font size of 24px.
-The <p> will have gray text and use the Verdana font.
2.Pros:
-Keeps your HTML and CSS separate, making both easier to maintain.
-Can be reused across multiple HTML pages, which saves time and effort.
3.Cons:
-Requires loading an external file, so there’s a slight delay in rendering the page (but this is usually very minimal).
How to Link External CSS:
To link an external CSS file to your HTML, you use the <link> tag inside the <head> of your HTML document.
html
<link rel="stylesheet" href="styles.css">
-rel="stylesheet": Tells the browser that this is a stylesheet.
-href="styles.css": The path to your external CSS file.
Why External CSS is Preferred:
1.Reusability: You can use the same .css file for multiple HTML pages, making it easy to apply consistent styles across your website.
2.Clean Code: It separates the HTML structure from the design, making your code easier to read and maintain.
3.Maintainability: If you need to change a style, you can do it in one place (the CSS file) instead of modifying multiple HTML files.
Example Combining All Three CSS Types:
html
<!DOCTYPE html>
<html>
<head>
<style>
/* Internal CSS */
h1 {
color: green;
}
</style>
<link rel="stylesheet" href="styles.css"> <!-- External CSS -->
</head>
<body>
<h1 style="font-size: 30px;">This is styled with inline CSS and internal CSS</h1> <!-- Inline CSS -->
<p>This is styled with external CSS.</p>
</body>
</html>
What happens here:
-The <h1> element is styled with inline, internal, and external CSS. The text color will be green (from internal CSS), and the font size will be 30px (from inline CSS).
-The paragraph (<p>) will get its style from the external CSS.
Top comments (0)