1. What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to control the design and layout of HTML or XML documents. The main purpose of CSS is to style the content of a webpage, such as colors, fonts, spacing, and layout, to make it visually appealing.
2. Main Purposes of CSS:
- Design and Layout: To present HTML content in an attractive and organized manner.
- Colors, Fonts, and Margin: To control the appearance of text, including its color, size, and other styling options.
- Responsive Design: To optimize a website’s presentation across different screen sizes.
3. Types of CSS:
- Inline CSS:
This type of CSS is written directly within the HTML element using thestyleattribute. Example:
<p style="color: red; font-size: 20px;">This is a paragraph.</p>- Internal CSS:
This CSS is placed within the<style>tag inside the<head>section of the HTML document. Example:
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>- External CSS:
CSS is placed in a separate file, and that file is linked to the HTML document. Example:
- style.css (in the external CSS file):
p { color: green; font-size: 16px; } - Linking the external CSS file in HTML:
html <head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
4. CSS Selectors:
CSS selectors are used to target HTML elements to apply styles.
- Element Selector (Tag Selector):
Targets specific HTML tags.
p {
color: red;
}- ID Selector:
Uses the#symbol to target an element with a specific ID.
#header {
background-color: blue;
}- Class Selector:
Uses the.symbol to target elements with a certain class.
.menu {
color: white;
}- Universal Selector:
Targets all elements in the HTML document.
* {
margin: 0;
padding: 0;
}- Attribute Selector:
Selects elements based on their attributes.
a[href^="https"] {
color: green;
}5. Common CSS Properties and Values:
Here are some commonly used CSS properties:
- color:
Specifies the color of the text.
p {
color: red;
}- background-color:
Sets the background color of an element.
div {
background-color: lightblue;
}- font-size:
Sets the size of the text.
h1 {
font-size: 30px;
}- margin:
Specifies the space around an element.
div {
margin: 20px;
}- padding:
Defines the space inside an element, between the element’s border and content.
div {
padding: 15px;
}- border:
Adds a border around an element.
p {
border: 2px solid black;
}6. CSS Box Model:
In CSS, every element is considered a box. This is known as the Box Model, which consists of the following parts:
- Content: The actual content of the element (e.g., text, image).
- Padding: The space around the content inside the element.
- Border: The boundary between the padding and the margin.
- Margin: The space outside the border, separating the element from other elements.
7. CSS Layouts:
- Flexbox:
Flexbox is a layout model that allows us to align and distribute space among items in a container. Example:
.container {
display: flex;
justify-content: space-between;
}- Grid:
CSS Grid Layout is a powerful two-dimensional system for arranging items in rows and columns. Example:
.container {
display: grid;
grid-template-columns: auto auto auto;
}8. CSS Media Queries:
Media Queries are used to apply different styles based on the device’s screen size, such as mobile, tablet, or desktop.
Example:
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}This code applies styles when the screen width is 768px or less.
9. CSS Animations:
CSS Animations allow you to create movement and transitions on elements. It can be used for effects like fading, sliding, and other dynamic behaviors.
Example:
@keyframes slide {
0% { left: 0; }
100% { left: 100px; }
}
.box {
position: relative;
animation: slide 2s infinite;
}10. Conclusion:
CSS is an essential technology for designing web pages. It works together with HTML and JavaScript to make websites more visually appealing and interactive. By understanding and utilizing CSS, developers can create well-organized, beautiful, and responsive websites.
