CSS, or Cascading Style Sheets, is a language used to describe the look and formatting of a website written in HTML. CSS controls the layout, colors, fonts, and overall appearance of web pages. Let's explore the basics of CSS and see some examples to help you get started.
What is CSS?
CSS stands for Cascading Style Sheets. It allows you to separate the content of a web page (written in HTML) from its style and layout. This makes it easier to maintain and update the look of your site.
How CSS Works
CSS works by selecting HTML elements and applying styles to them. For example, you can change the color, size, and font of text, or the background color of a page. CSS rules are made up of selectors and declarations. A selector points to the HTML element you want to style, and a declaration specifies the style you want to apply.
Basic Structure of CSS
Here is the basic structure of a CSS rule:
selector {
property: value;
}For example, to change the color of all paragraphs to blue, you would write:
p {
color: blue;
}Adding CSS to HTML
There are three ways to add CSS to HTML: inline, internal, and external.
1. Inline CSS
Inline CSS is used to apply a unique style to a single HTML element. You use the style attribute within the element. For example:
<p style="color: blue;">This is a blue paragraph.</p>2. Internal CSS
Internal CSS is used to define styles for a single HTML page. You include the CSS within a <style> element in the <head> section of the HTML document. For example:
<head>
<style>
p {
color: blue;
}
</style>
</head>3. External CSS
External CSS is used to apply styles to multiple HTML pages. You link to an external CSS file using the <link> element in the <head> section. For example:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>And in the styles.css file, you can write your CSS:
p {
color: blue;
}Selectors
Selectors are used to target HTML elements. There are several types of selectors in CSS:
1. Element Selector
The element selector targets all elements of a given type. For example, this CSS rule will apply to all <p> elements:
p {
color: blue;
}2. Class Selector
The class selector targets elements with a specific class attribute. Use a period (.) before the class name. For example:
.myClass {
color: green;
}In HTML, you can use this class like this:
<p class="myClass">This is a green paragraph.</p>3. ID Selector
The ID selector targets an element with a specific ID attribute. Use a hash (#) before the ID name. For example:
#myId {
color: red;
}In HTML, you can use this ID like this:
<p id="myId">This is a red paragraph.</p>Common CSS Properties
Here are some common CSS properties that you will use often:
1. Color
The color property sets the color of text. For example:
p {
color: blue;
}2. Background Color
The background-color property sets the background color of an element. For example:
div {
background-color: yellow;
}3. Font Size
The font-size property sets the size of the text. For example:
h1 {
font-size: 24px;
}4. Margin
The margin property sets the space outside an element. For example:
p {
margin: 20px;
}5. Padding
The padding property sets the space inside an element, between the element's border and its content. For example:
div {
padding: 10px;
}Example: Styling a Simple Web Page
Let's put it all together and style a simple web page. Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p class="intro">This is a simple web page.</p>
<div>Enjoy your stay!</div>
</body>
</html>And here's the CSS in styles.css:
h1 {
color: navy;
font-size: 36px;
text-align: center;
}
.intro {
color: green;
font-size: 18px;
margin: 20px;
}
div {
background-color: lightgrey;
padding: 15px;
margin-top: 10px;
text-align: center;
}Conclusion
CSS is a powerful tool that allows you to control the look and feel of your web pages. With these basics, you can start experimenting and creating beautiful websites. Remember, practice makes perfect, so keep trying out new styles and properties.