Embedded Files
Module 2
2.1 introduction to CSS
CSS(Cascadint Style Sheets)
In this module we are going to see what is the use of CSS is and how we can use it to develop a web sight:
What is CSS?
What is CSS?
Welcome to the world of CSS, where plain, dull web pages transform into beautiful, stylish, and eye-catching designs! If HTML is the skeleton of a website and JavaScript is the brain, then CSS is the fashion designer, adding colors, layouts, and animations to bring everything to life! 🎨✨
A Little CSS History 🎨📜
A Little CSS History 🎨📜
1996 – CSS was introduced by Håkon Wium Lie to style boring HTML pages. (Finally, some fashion for the web!)
1998-2005 – CSS2 arrived, bringing layouts, fonts, and more styling superpowers.
2012 – CSS3 revolutionized web design with animations, gradients, and responsiveness.
Today – CSS is the backbone of modern web design, making sites beautiful and user-friendly! 🚀✨
📱 How CSS Works in the Browser
Every browser (Chrome, Firefox, Edge, Safari) has a CSS Rendering Engine that styles your webpage beautifully.
You write CSS ➡️ Browser processes it ➡️ Your page looks sleek instantly!
Chrome uses Blink, Firefox has Gecko, and Safari uses WebKit (cool names, right?).
Example:
Imagine a webpage is a smartphone 📱.
HTML is the phone’s hardware. (The processor, screen, and battery that provide the structure and functionality 🔋🔧)
CSS is the phone’s outer design. (The sleek body, the color, the smooth edges, and the screen layout that make it look great 🎨✨)
JavaScript is the software and interactions. (Touch gestures, animations, and app responsiveness that bring it to life 📲)
look at the image below for more visual understanding:
CSS: Cascading Style Sheets
is a stylesheet language used to describe the presentation of a document written in
CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
Imagine a webpage is like a plain cake (HTML), and CSS is the icing and decorations that make it look nice! 🎂, or in our case we’re working with documents.
What Can CSS Do?
What Can CSS Do?
Change Colors:🎨 Make text and backgrounds colorful.
Change Fonts: 🔠use different styles of text.
Resize Things: 📏Make text or images bigger or smaller.
Move Things Around:📦Change the position of elements.
I am hopeful that you have installed VS (Visual Studio) Code with the preferred extension that was mentioned before. If not, watch this video:
Now let’s make our website look gorgeous!
Why Use CSS?
Why Use CSS?
CSS defines styles of your web pages, including design, layout, and variations in display across devices and screen sizes.
Uses of CSS:
Styling HTML Elements: Change colors, fonts, backgrounds, borders, etc.
Layout Control: Arrange elements using flexbox, grid, or positioning.
Responsive Design: Make websites look good on all devices (mobile, tablet, desktop).
Animation & Effects: Add transitions, hover effects, and animations.
CSS can save you a lot of work. An external stylesheet saved as. CSS can be used to style multiple web pages all at once!
CSS is very fun to learn, especially with our Try It Yourself Editor. So keep learning and enjoy!
🖌 Styling Your First Webpage with CSS!
🖌 Styling Your First Webpage with CSS!
Let’s add some style! Open a simple HTML file and add this inside the <style> tag or a separate CSS file:
🧑💻 Writing Your First CSS Script!
🧑💻 Writing Your First CSS Script!
Let’s try to run the code in the VS.Code IDE!!
Let’s try to run the code in the VS.Code IDE!!
i. Steps to Follow in VS Code
i. Steps to Follow in VS Code
Open VS Code
Create a new folder (e.g., CSS-Example) and open it in VS Code.
Create two files inside the folder:
index.html → For the HTML structure.
styles.css → For the CSS styles.
Write the following code in each file.
The HTML portion, which is the text you wish to decorate, must be written first.
After the HTML, you will decorate (cutomize) the word or paragraph like theis👇
After the HTML, you will decorate (cutomize) the word or paragraph like theis👇
V. How to View in Browser
V. How to View in Browser
Right-click on index.html in VS Code.
Select "Open with Live Server" (If you don’t have it, install the Live Server extension from VS Code Extensions).
The page will open in your browser, and the paragraph will be styled as described.
What Happens?
What Happens?
color: blue; → Text turns blue.
font-size: 20px; → Text becomes larger.
font-weight: bold; → Text becomes bold.
text-align: center; → Text is centered inside the paragraph.
background-color: yellow; → Paragraph background becomes yellow.
padding: 10px; → Adds space inside the paragraph.
border: 2px solid black; → Adds a black border around the paragraph.
Final Result (Visual Representation):
Final Output (What You’ll See)
Final Output (What You’ll See)
Blue, bold text
Yellow background
Centered text
Black border around the paragraph
Extra spacing inside the paragraph
Page updated
Google Sites
Report abuse