CSS Basics Tutorial
Topics
- Introduction
- Syntax
- Selector
- Using CSS in HTML Pages
- CSS Rules
- CSS Fonts
- CSS Text Formating
- CSS Box Model
- CSS Backgrounds
CSS Introduction
Cascading Style Sheets (CSS)
Applies to HTML Pages For Designing the Layout and View Appearance of Your Website.
A styled HTML document produced by the CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS Style</title>
<style type="text/css">
body {
background: yellow;
}
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
CSS Usage :
CSS Syntax
css selector { property-name:values }
Css Selector - HTML Dom Elements Selecting By Elements Tag,Class name or By id.
Property-name : like - background , font-size , color , text-alignment etc.
Property -values: like - orange , 17px, center, etc.
CSS Elements Selecting Syntax
- Single Element Type
HTML Element : - <p>Hello World! I Select All p Tag Elements</p>
- Multi Element Type
HTML Element : <h1>Hello H1<h1><h2>Hello H2<h2><h3>Hello H3<h3>
- All Element Type
HTML Element : <p>selected me</p> <h2>Selected me</p>
- Element By id ( # )
HTML Element : - <p id=”p1”>paragraph1</p><p id=”p2”>paragraph2</p>
- Element By Class ( . )
HTML Element : - <p class=”p1>Class p1</p><h1 class=”h1”>Heading 1</h1>
- Element with class
HTML Element : - <p class=”p1>Only Select me</p><p class=”p2”>Not Select me</p>
- Descendents Selector (E.g : - Only Select li element which parent is ul )
HTML Element : - <ul><li>select me</li><li>select me</li></ul>
Using CSS in HTML Pages
We Can Use CSS in HTML Pages in 3 ways: -
Inline css -
E.g :
<p style=”color:red”>I am a inline CSS Style Paragaraph Tag</p>
Internal CSS -
E.g :
<html>
<head>
<style> p { color:red; } </style>
<!----Internal CSS--->
</head>
<body>
<p> My Color Changed By Internal CSS</p>
</body>
</html>
External CSS -
E.g :
<html> <head> <link rel=”stylesheet” href=”style.css”> <!---Linking External CSS Using Href--> </head> <body> <p>My Style Changed By External CSS style.css</p> </body> </html>
style.css
p{color:red;}
h1{color:blue;}
As a Developer i Not Prefered To Using Inline CSS use minimum inline CSS Try to Use CSS Externally or Internally Because managing all element style easy.
You think what you like to edit?
100 time paragraph tag style?
Or
Just 1 change in External CSS
CSS Rules
Now What happened If Multiple Style Comes To Same Elements ?
E.g : - in Internal i add
p{ color :red; }
And in External I add
p{ color:black;}
Then Here is a Some Rules Which we See How It Works And Whom It Select.
Important ( <p style=’color:red!important’>Important</p>)
This always Comes First when we Selecting Element whether any internal external or inline css added important works first.
Inline css (we already see inline css above)
This comes in Second Position.
Now Inline and External Had Some Different Case.
Rule with selector :
1. ID
2. class
3. descendant/element type
4. universal
5. HTML attribute
This Rules Followed By Internal and External but Internal Always Comes First Then External.
CSS Fonts
- CSS font is Very important part of CSS for Customizing Fonts in Our Webpage. We Can Customize this fonts using Css.
- Change Font Weight
- Change Color
- Change line height (line gap between paragraph)
- Change Font Size
- Change Font Style
Example : -
<!DOCTYPE html>
<html>
<head>
<title>CSS Style</title>
<style type="text/css">
#p1 { color: red;font-size: 20px; }
#p2{ font-family: sans-serif; line-height: 40px; }
#p3{ font-style: italic;font-weight: 600; }
</style>
</head>
<body>
<p id="p1">I am p1 text with css font property color red and font size 20px </p>
<p id="p2">I am p2 text with css font property font family sans-serif and line height 20px</p>
<p id="p3">I am p3 with css property font style italic and font weight 600</p>
</body>
</html>
CSS Box Model
All elements in HTML can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
Css BOX Model is Wraps HTML elements.It consists of: margins, borders, padding, and the content.
Css BOX Model is Wraps HTML elements.It consists of: margins, borders, padding, and the content.
CSS Box Model Example
<!DOCTYPE html>
<html>
<head>
<title>Box Model</title>
<style type="text/css">
body{
padding: 10px;
background: red;
}
#box{
margin: 20px;
padding: 20px;
border:10px solid yellow;
}
</style>
</head>
<body>
<div id="box">
<p>I m inside a box Model</p>
</div>
</body>
</html>
Results :
Thanks.
Video Demo.
