| CSS Syllabus |
|---|
| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
CSS Tutorial
Introduction to CSS (Cascading Style Sheets)
What is CSS?
CSS stands for Cascading Style Sheets. In this CSS Tutorial stylesheet language used to describe the presentation of a document written in HTML or XML. CSS is responsible for the visual look and layout of web pages, allowing you to control the appearance of elements separately from their structure.
How CSS Works with HTML
HTML (HyperText Markup Language) structures the content of a web page by defining elements like headings, paragraphs, links, images, and more. CSS, on the other hand, styles these elements. By separating content from design, CSS provides greater flexibility and control in the specification of presentation characteristics.
CSS Syntax and Structure
A CSS rule consists of two main parts: a selector and a declaration block.
- Selector: Specifies the HTML element(s) to be styled.
- Declaration Block: Contains one or more declarations separated by semicolons. Each declaration includes a CSS property and a value, separated by a colon.
selector {
property: value;
property: value;
}
Example:
p {
color: blue;
font-size: 16px;
}
In this example, the p selector targets all paragraph elements, setting their text color to blue and font size to 16 pixels.
Types of CSS
- Inline CSS: Directly within an HTML element using the
styleattribute.
<p style="color: blue; font-size: 16px;">This is a paragraph.</p>
2. Internal CSS: Inside a <style> tag within the <head> section of an HTML document.
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
3. External CSS: In an external .css file linked to an HTML document.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
styles.css:
p {
color: blue;
font-size: 16px;
}
CSS Selectors
CSS selectors are patterns used to select elements to apply styles. Common selectors include:
Type Selector: Selects all elements of a given type.
h1 {
color: red;
}
Class Selector: Selects elements with a specific class attribute, prefixed with a dot (.).
.example {
color: green;
}
ID Selector: Selects a single element with a specific ID attribute, prefixed with a hash (#)
#unique {
color: purple;
}
Attribute Selector: Selects elements with a specific attribute
[type="text"] {
border: 1px solid black;
}
CSS Properties
CSS properties are used to style and modify the characteristics of HTML elements. Some common properties include:
Color and Background:
color: Sets the text color.background-color: Sets the background color.background-image: Sets a background image.
Text and Font:
font-family: Sets the font.font-size: Sets the font size.text-align: Aligns the text.text-decoration: Adds decoration to text (e.g., underline).
Box Model:
width,height: Set the dimensions.margin: Sets the space outside the border.padding: Sets the space inside the border.border: Sets the border around the element.
Example of a Simple CSS-Styled Web Page
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Styled Page</title>
</head>
<body>
<h1 class="title">Welcome to My Website</h1>
<p>This is a paragraph of text styled with CSS.</p>
<p class="highlight">This paragraph has a unique style.</p>
</body>
</html>
CSS (styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1.title {
color: #333;
text-align: center;
}
p {
color: #666;
font-size: 18px;
line-height: 1.5;
margin: 10px 20px;
}
p.highlight {
background-color: #ff0;
padding: 10px;
border: 1px solid #ccc;
}
In this example, the HTML structure is styled using an external CSS file (styles.css). The body has a light gray background and uses the Arial font. Headings and paragraphs are styled with specific colors, alignments, and margins. Additionally, the .highlight class adds a yellow background and border to specific paragraphs.
This introduction provides a foundation for understanding and using CSS to style web pages effectively.
