CSS Introduction
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS is what you use to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
Basics of CSS
What is CSS?
CSS stands for Cascading Style Sheets. It describes how HTML elements should be displayed on screen, paper, or in other media. CSS saves a lot of work by controlling the layout of multiple web pages all at once.
How CSS Works
CSS is used to apply styles to HTML elements. It can be written in three ways:
- Inline CSS
- Internal CSS
- External CSS
1. Inline CSS
Inline CSS is used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element.
html
2. Internal CSS
Internal CSS is used to define styles in the head section of an HTML document.
html
Copy code
3. External CSS
External CSS is used to define styles in an external .css file. This method is the most recommended as it keeps your HTML code clean and the styles reusable across multiple pages.
- Create a CSS file (e.g.,
styles.css):
css
Copy code
/* styles.css */ h1 { color: blue; } p { color: red; }
- Link the CSS file to your HTML document:
html
Copy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>External CSS Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a Blue Heading</h1> <p>This is a Red Paragraph.</p> </body> </html>
Basic CSS Syntax
CSS is made up of rulesets. Each ruleset consists of a selector and a declaration block.
- Selector: Specifies which HTML element the style will be applied to.
- Declaration Block: Contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
Example:
css
Copy code
/* This is a CSS ruleset */ selector { property: value; property: value; }
Applying the Ruleset:
css
Copy code
h1 { color: blue; font-size: 20px; }
In this example:
h1is the selector.color: blue;andfont-size: 20px;are declarations.
Common CSS Properties
Here are some common CSS properties you will use often:
- Color and Backgrounds:cssCopy code
color: red; /* Text color */ background-color: yellow; /* Background color */ - Text Formatting:cssCopy code
font-family: Arial, sans-serif; /* Font family */ font-size: 16px; /* Font size */ font-weight: bold; /* Font weight */ text-align: center; /* Text alignment */ - Box Model (Margins, Padding, Borders):cssCopy code
margin: 10px; /* Margin */ padding: 15px; /* Padding */ border: 1px solid black; /* Border */ - Layout:cssCopy code
display: block; /* Display type */ width: 100%; /* Width */ height: 50px; /* Height */
Conclusion
CSS is a powerful tool that allows you to create visually appealing web pages. By understanding the basics of CSS, you can start styling your HTML documents to improve their appearance and user experience. As you become more familiar with CSS, you can explore more advanced features such as flexbox, grid, animations, and responsive design.