Lesson 1: Introduction Of css
CSS (Cascading Style Sheets) is a language used for describing the presentation of a document written in HTML or XML. It controls the layout, appearance, and style of web pages. In this tutorial, we'll cover the basics of CSS and how to use it to style your web pages.
Getting Started
To use CSS, you'll need a basic understanding of HTML. HTML defines the structure and content of your web page, while CSS is used to style and format that content.
To Learn HTMl Basics Do Click Here
Setting up your HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ABCSA CSS Tutorial</title>
</head>
<body>
<h1>Welcome to ABCSA CSS Tutorial!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Lesson 2: Creating a CSS file
Create a new file named `styles.css` in the same directory as your HTML file.
What is the Syntax of making CSS?
selector {
property: value;
}
Here is the description of above syntax code:
- **Selector:** Selects the HTML element you want to style.
- **Property:** The aspect of the selected element you want to change.
- **Value:** The value you want to assign to the property.
Basic Styling
Let's start with some basic styling examples:
/* Let's change the style of h1 tag */
h1 {
color: blue;
font-size: 24px;
}
/* Let's change the style of h3 tag */
h3 {
color: yellow;
font-size: 30px;
}
/* Targeting elements by class */
.myclass {
background-color: yellow;
padding: 10px;
}
/* Targeting elements by ID */
#my-id {
border: 1px solid black;
}
Applying Styles
To apply these styles, save the CSS file and refresh your HTML page in the browser. You should see the changes reflected.
Lesson 3: What is CSS Box Model?
The term "box model" is used about design and layout of a web page.
In this we design a box to put every html element.
There are different parts of box model :
- Content - The content of the box, where text and images appear
- Padding - Clears an area around the content. The padding is transparent
- Border - A border that goes around the padding and content
- Margin - Clears an area outside the border. The margin is transparent
let's understand this with example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 20px solid blue;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. </div>
</body>
</html>
Lesson 4: Various example of CSS
Now let's check Various example of CSS practically i below Code:
examples of Different CSS style:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styles Test</title>
<style>
/* Color and Text Styles */
h1 {
color: red;
}
p {
font-size: 16px;
font-family: Arial, sans-serif;
}
.bold-text {
font-weight: bold;
}
/* Background and Border Styles */
body {
background-color: #f0f0f0;
}
.bg-image {
background-image: url('background.jpg');
background-size: cover;
}
.bordered-box {
border: 2px solid black;
border-radius: 5px;
}
/* Box Model and Layout */
.sized-box {
width: 200px;
height: 150px;
}
.padded-box {
padding: 20px;
}
.margined-box {
margin: 10px;
}
/* Positioning and Display */
.inline-block {
display: inline-block;
}
.positioned-box {
position: relative;
top: 50px;
left: 20px;
}
/* Animations and Transitions */
@keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
.animated-box {
animation: slidein 3s ease-in-out;
}
.transition-box {
transition: background-color 0.3s ease-in-out;
}
.transition-box:hover {
background-color: lightblue;
}
</style>
</head>
<body>
<!-- Color and Text Styles -->
<h1>Hello, CSS!</h1>
<p>This is a paragraph.</p>
<p class="bold-text">This paragraph is bold.</p>
<!-- Background and Border Styles -->
<div class="bg-image sized-box padded-box margined-box bordered-box">
<p>This is a div with background image, border, padding, and margin.</p>
</div>
<!-- Positioning and Display -->
<div class="positioned-box">
<p>This div is relatively positioned.</p>
</div>
<span class="inline-block">This is an inline-block element.</span>
<!-- Animations and Transitions -->
<div class="animated-box transition-box">
<p>This div has an animation and transition effect.</p>
</div>
</body>
</html>
Test the Above Code in ABCSA Html Editor
Replace `'background.jpg'` with the actual path to your background image file. This HTML file demonstrates various CSS styles and effects applied to different HTML elements.
Lesson 5: Conclusion
This tutorial covers the basics of CSS, including syntax, selectors, properties, and the box model. Experiment with different styles and properties to see how they affect your web page. CSS is a powerful tool for controlling the look and feel of your website, so keep practicing and exploring to master it!
Lesson 6: Exercises For You
- Make html code to change the background of paragraph with yellow color and font color to red.
- Write a code to animate the text "Best Online Course by ABCSA Online".
- Make a box model of your choice, choose different color of border, text and background as per your choice and test it in html editor to check your work.
- Make css to change the color and text size of different headings - h1, h2, h3, h4, h5, h6.
- What is the meaning of CSS.
Comments
Post a Comment