Overview
CSS (Cascading Style Sheets) is a fundamental technology used for styling web pages. It allows you to control the layout, colors, fonts, and overall appearance of your HTML documents. This tutorial will cover the basics of CSS, including an introduction to CSS, selectors, properties, and values, and how to apply styles to HTML elements.
Key Points
- Introduction to CSS
- Selectors, Properties, and Values
- Applying Styles to HTML Elements
1. Introduction to CSS
CSS is used to define the visual presentation of web pages. It separates the content of a web page (HTML) from its design (CSS), allowing you to maintain and update the styling of your site independently of its structure.
Basic Syntax
A CSS rule consists of a selector and a declaration block:
selector {
property: value;
}
- Selector: Indicates which HTML element(s) the rule applies to.
- Property: Specifies the aspect of the element to style (e.g., color, font-size).
- Value: Defines the style for the property (e.g., blue, 16px).
Example:
p {
color: blue;
font-size: 16px;
}
This rule styles all <p> elements with blue text and a font size of 16 pixels.
2. Selectors, Properties, and Values
Selectors
Selectors are used to target HTML elements. Here are some common types of selectors:
- Element Selector: Selects all elements of a given type.
p { color: green; } - Class Selector: Selects elements with a specific class attribute. Use a dot (
.) followed by the class name..highlight { background-color: yellow; } - ID Selector: Selects an element with a specific ID attribute. Use a hash (
#) followed by the ID.#main-header { font-size: 24px; } - Universal Selector: Selects all elements.
* { margin: 0; padding: 0; } - Descendant Selector: Selects elements that are descendants of another element.
div p { color: red; }
Properties and Values
CSS properties determine what aspect of an element is being styled, and values define the specific style. Here are some common properties:
- Color:
color: blue; - Font Size:
font-size: 16px; - Background Color:
background-color: lightgrey; - Margin:
margin: 10px; - Padding:
padding: 15px; - Border:
border: 1px solid black;
3. Applying Styles to HTML Elements
CSS can be applied to HTML elements in three different ways: inline styles, internal stylesheets, and external stylesheets.
Inline Styles
Inline styles are applied directly within an HTML element’s style attribute.
Example:
<p style="color: red; font-size: 20px;">This is an inline styled paragraph.</p>
Internal Stylesheet
Internal styles are defined within a <style> element in the <head> section of the HTML document.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Stylesheet Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This paragraph is styled using an internal stylesheet.</p>
</body>
</html>
External Stylesheet
External styles are defined in a separate CSS file, which is linked to the HTML document using the <link> element.
Example:
Create a CSS file named styles.css:
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
font-size: 18px;
}
Link the CSS file to your HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External Stylesheet Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This paragraph is styled using an external stylesheet.</p>
</body>
</html>
Conclusion
CSS is an essential tool for web developers, allowing them to create visually appealing and well-structured web pages. By understanding the basics of CSS, including selectors, properties, and values, you can start styling your HTML documents effectively. Practice applying styles using inline, internal, and external stylesheets to see the impact of CSS on your web pages. Happy styling!
