CSS Introduction
CSS (Cascading Style Sheets) is a styling language used to control the presentation and layout of HTML documents. It allows web developers to define the appearance of web pages, including elements such as colors, fonts, spacing, and positioning. Here’s an introduction to CSS:
Key Concepts:
- Selectors: Selectors are patterns used to select and style HTML elements. They can target elements based on their type, class, ID, attributes, or relationship with other elements.Example:
/* Selects all <p> elements */
p { color: blue; }
/* Selects elements with class "highlight" */
.highlight { background-color: yellow; }
/* Selects an element with ID "header" */
#header { font-size: 24px; }
- Properties: CSS properties define the visual aspects of selected elements. Each property has a name and a value, which determine how the element should be styled.Example:
/* Sets the font size to 16 pixels */
font-size: 16px;
/* Sets the text color to red */
color: red;
/* Sets the background color to light gray */
background-color: lightgray;
- Values: Values are assigned to CSS properties to specify how the properties should be applied to elements. Values can be keywords, such as
blueoritalic, or numerical units, such as10pxor2em.Example:/* Sets the font family to Arial */
font-family: Arial;
/* Sets the border width to 2 pixels */
border-width: 2px;
/* Sets the margin to 10 pixels on all sides */
margin: 10px;
- Selectors and Declarations: CSS rules consist of selectors and declarations. Selectors specify which elements to style, and declarations define the style properties and their values.Example:
/* Selector */
p { /* Declaration */ color: blue; }
How CSS is Applied:
- CSS can be applied to HTML documents in three ways:
- External Stylesheets: CSS code is stored in separate
.cssfiles and linked to HTML documents using<link>elements. - Internal Stylesheets: CSS code is written within
<style>tags in the<head>section of HTML documents. - Inline Styles: CSS code is applied directly to individual HTML elements using the
styleattribute.
- External Stylesheets: CSS code is stored in separate
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Internal Stylesheet */
h1 { color: blue; font-size: 24px; }
.highlight { background-color: yellow; } </style>
</head>
<body>
<!-- Inline Style -->
<p style="font-family: Arial;">This is a paragraph.</p>
<!-- External Stylesheet -->
<p class="highlight">This is another paragraph.</p>
<!-- Heading with Internal Stylesheet -->
<h1>Welcome to CSS</h1>
</body>
</html>
In summary, CSS is a powerful language that allows you to control the visual presentation of HTML documents. By applying styles to HTML elements using selectors and declarations, you can create attractive and responsive web pages.