CSS Introduction
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML.
What is CSS?
CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed.
Example: A simple CSS rule that changes the color of all <p> elements to blue:
p {
color: blue;
}
CSS Syntax
A CSS rule consists of a selector and a declaration block:
- The selector points to the HTML element you want to style.
- The 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 Syntax
selector {
property: value;
}
How to Add CSS
There are three ways to apply CSS to HTML:
- External stylesheet
- Internal stylesheet
- Inline style
External Stylesheet
An external stylesheet is ideal when the style is applied to many pages. With an external stylesheet, you can change the look of an entire website by changing just one file.
Example: Linking to an external stylesheet
<link rel="stylesheet" type="text/css" href="mystyle.css">
Internal Stylesheet
An internal stylesheet may be used if one single HTML page has a unique style. Internal styles are defined within the <style> element, inside the <head> section.
Example: Internal stylesheet
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
Inline Styles
An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element.
Example: Inline style
<p style="color: blue;">This is a blue paragraph.</p>
Conclusion
CSS is a powerful tool for controlling the look and feel of your web pages. By understanding the basics of CSS, you can create visually appealing and well-structured websites.