CSS (Cascading Style Sheets) is a fundamental component of web development. It provides a way to add style, layout, and design to HTML documents, making web pages look visually appealing and professional. CSS is a style sheet language that allows web developers to separate the presentation of a document from its content. In this tutorial, we will cover the basics of CSS, including syntax, selectors, properties, and values, and show you how to apply CSS to HTML documents to style web pages.
The syntax of CSS is straightforward. It consists of a selector, followed by one or more declarations, which are enclosed in curly braces. The selector specifies which element or elements the style rules apply to, and the declarations specify the properties and values that define the style.
Here is an example of the basic syntax of CSS:
selector {
property: value;
property: value;
property: value;
}
Selectors are used to specify which elements in an HTML document the style rules apply to. There are several types of selectors in CSS, including:
`p`
selector applies to all `p`
elements in the document.`.my-class`
selector applies to all elements with the `class="my-class"`
attribute.`#my-id`
selector applies to the element with the `id="my-id"`
attribute.`[type="text"]`
selector applies to all elements with
the `type="text"`
attribute.CSS properties are used to define the style of an element. There are many CSS properties, each with its own set of possible values. Some common properties include:
`color`
: Specifies the text color of an element.`font-size`
: Specifies the size of the font used in an element.`background-color`
: Specifies the background color of an element.`border`
: Specifies the border properties of an element.`padding`
: Specifies the padding around the content of an element.`margin`
: Specifies the margin around an element.Here is an example of CSS properties and their values:
selector {
color: red;
font-size: 18px;
background-color: #f5f5f5;
border: 1px solid black;
padding: 10px;
margin: 20px;
}
To apply CSS to an HTML document, you need to link the CSS file to the HTML file using the
`<link>`
tag. The
`<link>`
tag goes in the
`<head>`
section of the HTML document, and it specifies the location of
the CSS file.
Here is an example of how to link a CSS file to an HTML document:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
In the example above, the `href`
attribute specifies the location of the CSS file, and the `rel`
attribute specifies the relationship between the HTML document and the CSS file.
Once the CSS file is linked to the HTML document, you can use the selectors, properties, and values to style the elements in the HTML document.
CSS is a powerful tool for web developers. It allows you to separate the presentation of a document from its content, making it easier to maintain and update your web pages. In this tutorial, we covered the basics of CSS