INTRODUCTION TO CSS - SYNTAX
AND USAGE
Introduction
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML. CSS enhances the appearance of web pages by allowing you to control layout, color, fonts, and other design elements. This section covers the basics of CSS, its syntax, and how to use it to style HTML documents.
What is CSS?
Definition:
CSS stands for Cascading Style Sheets. It is used to style and layout web pages, including the design, colors, and fonts.
Why Use CSS?
- Separation of Content and Design: Keeps the HTML code clean and separates design elements.
- Reusability: Apply the same styles across multiple web pages.
- Consistency: Ensure a consistent look and feel across your website.
- Efficiency: Change the look of an entire website by modifying just one file.
CSS Syntax
CSS rules are made up of selectors and declaration blocks.
1. CSS Rule Structure:
selector {
property: value;
property: value;
}
2. Example:
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
CSS Selectors
1. Element Selector:
Selects HTML elements based on the element name.
p {
color: blue;
}
2. Class Selector:
Selects elements with a specific class attribute.
.intro {
font-size: 20px;
}
<p class=”intro”>This is an introduction paragraph.</p>
3. ID Selector:
Selects an element with a specific id attribute.
#header {
background-color: grey;
}
<div id=”header”>This is the header.</div>
4. Universal Selector:
Selects all elements on the page.
* {
margin: 0;
padding: 0;
}
5. Grouping Selector:
Applies the same style to multiple elements.
h1, h2, h3 {
color: green;
}
CSS Properties
1. Color:
Text Color: Sets the color of the text.
h1 {
color: red;
}
Background Color: Sets the background color of an element.
div {
background-color: yellow;
}
2. Font:
Font Family: Sets the font of the text.
p {
font-family: ‘Arial’, sans-serif;
}
Font Size: Sets the size of the text.
h1 {
font-size: 24px;
}
3. Text:
Text Alignment: Aligns the text inside an element.
p {
text-align: center;
}
Text Decoration: Adds decoration to the text (underline, overline, etc.).
a {
text-decoration: none;
}
4. Box Model:
Margin: Sets the outside space of an element.
div {
margin: 10px;
}
Padding: Sets the inside space of an element.
div {
padding: 20px;
}
Border: Sets the border around an element.
div {
border: 1px solid black;
}
Adding CSS to HTML
1. Inline CSS:
Styles are added directly within an HTML element.
<p style=”color: blue;”>This is a blue paragraph.</p>
2. Internal CSS:
Styles added within the <style> tag in the <head> section.
<head>
<style>
p {
color: red;
}
</style>
</head>
3. External CSS:
Styles added in an external file linked to the HTML document.
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
/* styles.css */
body {
background-color: lightgrey;
}
Additional Resources
Articles:
- “CSS Basics”
- “CSS Tutorial”
Videos:
- CSS Crash Course For Absolute Beginners on YouTube by Traversy Media
- Learn CSS in 20 Minutes on YouTube by Web Dev Simplified
Conclusion
CSS is a powerful tool that allows you to create visually appealing web pages by controlling layout, color, fonts, and more. Practice using different CSS properties and selectors to enhance your web development skills.
