CSS Class Day 1
# CSS Notes
Introduction
What is CSS?
CSS stands for Cascading Style Sheets
CSS is used to design HTML tags.
CSS describes how HTML elements displayed on web.
With the help of CSS we can save a lot of work.
It can control the layout of multiple web pages all at once with External style sheets.
Akash Technolabs [Link]
What does CSS do ?
You can add new looks to your old HTML documents.
You can completely change the look of your website with only a few changes in CSS code.
Akash Technolabs [Link]
Invent
World Wide Web Consortium
or
W3C
CSS was invent on October 10, 1994 and maintained by a group of people within the
W3C.
Akash Technolabs [Link]
Advantages of CSS
CSS saves time
Pages load faster
Easy maintenance
Multiple Device Compatibility
Global web standards
Offline Support
Akash Technolabs [Link]
CSS Syntax
The selector points to the HTML element.
CSS declaration always ends with a semicolon.
Akash Technolabs [Link]
Example
p {
color: red;
t ex t -a l i g n : c e n t e r ;
}
< p > W e l c o m e t o C S S World</p>
Akash Technolabs [Link]
How To Add CSS in HTML?
How To Add CSS in HTML
There are three Ways to Insert CSS in HTML.
1. Inline style
First Priority
2. Internal style sheet
Second priority
3. External style sheet
Third priority
Akash Technolabs [Link]
InLine
Akash Technolabs [Link]
Inline Styles
An inline style may be used to apply a unique style for a single element.
In Element we can use style=‘’ .
<p style="color : blue;">
This is a heading
</p>
Akash Technolabs [Link]
Internal
Akash Technolabs [Link]
Internal Style Sheet
An internal style sheet used for one single page.
If you want to apply Style Sheet in whole, single document, then you can define all those
rules in header section of the HTML document using <style> tag.
<html>
<head>
<style>
h1 {
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Akash Technolabs [Link]
Internal CSS
We can define css design in style tag.
Akash Technolabs [Link]
External
Akash Technolabs [Link]
External Style Sheet
If you want to use your style sheet in various pages, then it is always recommended to
define a common style sheet in a separate file with the extension ".css", and include
external css file in your HTML files using <link> tag.
With an external style sheet, you can change the look of an entire website by changing
just one file.
Syntax :-
<head>
<link rel="stylesheet" type="text/css" href=“main_page.css">
</head>
Akash Technolabs [Link]
Example
[Link]
[Link]
<link rel="stylesheet" type="text/css" href="[Link]"/>
Akash Technolabs [Link]
Load Same css in Multiple Pages
Akash Technolabs [Link]
[Link]
We can modify css as per need.
Akash Technolabs [Link]
CSS selectors
CSS selectors
CSS selectors are used to find HTML elements based on their element name, id, and class.
1. The element Selector
2. The id Selector
3. The class Selector
Akash Technolabs [Link]
Element Selector
Akash Technolabs [Link]
The element Selector
Element selector selects html elements based on the element name.
Example :-
p{
text-align: center;
color: red;
}
<p>Welcome to HTML World</p>
Note: All <p> elements in your page will affect
Akash Technolabs [Link]
Example
It will change text color of all h1 tag
Akash Technolabs [Link]
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element must be unique within a page.
To select an element with a specific id, write a hash (#).
Note: An id name cannot start with a number…
Akash Technolabs [Link]
Example
<html>
<head>
<style>
#demo {
text-align: center;
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p id="demo">Welcome to CSS world</p>
</body>
</html>
Akash Technolabs [Link]
Id Selector
In Html page there will be a unique Id.
Same id we can not use in other element.
Akash Technolabs [Link]
Class Selector
Akash Technolabs [Link]
The class Selector
Class Selector is useful when you want to apply formatting to different HTML elements
with the same format.
To select elements with a specific class, write a period (.)
Note: A class name cannot start with a number…
Akash Technolabs [Link]
Example
<html>
<head>
<style>
.demo {
text-align: center;
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p class="demo">Welcome to CSS world</p>
</body>
</html>
Akash Technolabs [Link]
Class Selector
Class selector we can use for multiple element.
Akash Technolabs [Link]
Multiple Class
We can assign Same Class to Multiple Element
We can assign Multiple class to same Element.
Akash Technolabs [Link]
Get Exclusive
Video Tutorials
[Link]
[Link]
[Link]
Rating Us Now
Just Dial
[Link]
Navrangpura-Bus-Stop-Navrangpura/079PXX79-XX79-
170615221520-S5C4_BZDET
Sulekha
[Link]
ahmedabad-contact-address/ahmedabad
Connect With Me
# Social Info
[Link]
Akashpadhiyar
Akash Padhiyar
#AkashSir Akash_padhiyar
+91 99786-21654
[Link]
[Link] #Akashpadhiyar
[Link] #aptutorials
[Link]
