Introduction to CSS (Cascading Style Sheets)
Cascading Style Sheets (CSS)
- Cascading Style Sheets (CSS) is a crucial part of web development used to control the presentation and styling of web pages.
- In this guide, we will cover the various types of style sheets.
- How to create and apply styles, use CSS properties, and select elements for styling.
Types of Style Sheets
Internal Style Sheet
- An internal style sheet is defined within the HTML document using the <style> stage in the document's <head> section.
- It is typically used for individual web pages.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>This is a blue heading</h1>
</body>
</html>
Inline Style
- Use this behavior to apply inline styles directly to individual HTML elements.
- They override any other styles applied to the element.
<p style="color: green;">This is a green paragraph.</p>
External Style Sheet
- An external style sheet is a separate CSS file linked to an HTML document using the <link> tag.
- It allows you to maintain consistent styles across multiple web pages.
/* style.css */
h1 {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a red heading</h1>
</body>
</html>
Creating Styles
- Styles are created by specifying CSS properties and values.
- Properties define how an element should be styled, and values determine the specific style.
/* style.css */
p {
font-size: 16px;
margin: 10px;
}
In this example, we set the font size and margin for all <p> elements.
Linking to External Style Sheets
- To apply an external style sheet, you need to use the <link> tag in the HTML document's <head> section.
- The href attribute specifies the path to the CSS file.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
CSS Properties
CSS properties define the styling rules.
Here are a few commonly used properties:
Color
The color property sets the text color.
h2 {
color: #FF5733;
}
Font size
The font size property adjusts the text size.
h3 {
font-size: 20px;
}
CSS Styling
CSS styling applies the defined properties to HTML elements, giving them the desired appearance.
/* style.css */
h2 {
color: #FF5733;
}
h3 {
font-size: 20px;
}
Style Selector
Selectors determine which elements are affected by a CSS file.
ID Selector
An ID selector is used to select a specific element with a unique ID.
<h4 id="special">Special Heading</h4>
/* style.css */
#special {
font-weight: bold;
}
Class Selector
A class selector is used to select multiple elements with the same class.
<h4 class="highlight">Highlighted Text</h4>
<p class="highlight">This is also highlighted.</p>
/* style.css */
.highlight {
background-color: yellow;
}
Pseudo Class Selector
Pseudo-classes target specific states of elements, such as :hover for mouseover effects.
/* style.css */
a:hover {
color: purple;
}
Conclusion
With this you've learned about the types of style sheets, creating styles, using CSS properties, and selecting elements for styling. CSS is a powerful tool for web developers to control the visual appearance of their web pages. Experiment and practice to become proficient in using CSS to syle your web content.
