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> tag in the document's <head> section.
- It is typically used for individual web pages.
1<!DOCTYPE html>
2<html>
3<head>
4 <style>
5 h1 {
6 color: blue;
7 }
8 </style>
9</head>
10<body>
11 <h1>This is a blue heading</h1>
12</body>
13</html>
14
Inline Style
- Use this behavior to apply inline styles directly to individual HTML elements.
- They override any other styles applied to the element.
1 <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.
1/* style.css */
2h1 {
3 color: red;
4}
5
1<!DOCTYPE html>
2<html>
3<head>
4 <link rel="stylesheet" type="text/css" href="style.css">
5</head>
6<body>
7 <h1>This is a red heading</h1>
8</body>
9</html>
10
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.
1/* style.css */
2p {
3 font-size: 16px;
4 margin: 10px;
5}
6
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.
1<head>
2 <link rel="stylesheet" type="text/css" href="style.css">
3</head>
4
CSS Properties
- CSS properties define the styling rules.
Here are a few commonly used properties:
color
The color property sets the text color.
1h2 {
2 color: #FF5733;
3}
4
font-size
The font-size property adjusts the text size.
1h3 {
2 font-size: 20px;
3}
4
CSS Styling
CSS styling applies the defined properties to HTML elements, giving them the desired appearance.
1/* style.css */
2h2 {
3 color: #FF5733;
4}
5
6h3 {
7 font-size: 20px;
8}
9
Style Selectors
- Selectors determine which elements are affected by a CSS rule.
ID Selector
An ID selector is used to select a specific element with a unique ID.
1<h4 id="special">Special Heading</h4>
1
2/* style.css */
3#special {
4 font-weight: bold;
5}
6
Class Selector
A class selector is used to select multiple elements with the same class.
1
2<h4 class="highlight">Highlighted Text</h4>
3<p class="highlight">This is also highlighted.</p>
4
1/* style.css */
2.highlight {
3 background-color: yellow;
4}
Pseudo-Class Selector
Pseudo-classes target specific states of elements, such as :hover for mouseover effects.
1/* style.css */
2a:hover {
3 color: purple;
4}
5
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 style your web content.