CSS presentation for beginners where they can understand easily

 Style sheet is a collection of formatting styles,
which can be applied to a web page .
 CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 5.0 to solve a
problem
Style sheet

The syntax of a style rule is as follows:
Selector {property:value;}
Where
Selector =any html tag
Property= attributes like font color, font size
Value= setting for the attributes
Ex: h1{color:red;}
style Rule

There 3 types of css
1. Inline css
2. Internal css
3. External css
Types of css

1. Inline css
Ex: <h1 style=“color:green”>
2. Internal css
Ex: <head>
<style>
p{color:red;}
</style>
</head>
Style sheet

3. External css
<head>
<link REl=“stylesheet” href=“filename.css”
type=“text/css”>
</head>
Style sheet

There 4 types of selector :
1. Tag (html code)
2. Class (.)
3. Id (#)
4. Universal (*)
Types of selector

Tag (html code)
Ex: h1{color:red}
Types of selector

<html>
<head>
<title>css</title>
<style> #control{color:limegreen}
</style></head>
<body>
<p id="control"> gfuigfugfu gugfufgufgufg ufg
</p> </body> </html>
Id (#)

<html>
<head>
<title>css</title>
<style>
.note{color:green; font-weight:bold}
.syntax{color:red; font-weight:Normal} </style></head>
<body>
<p class="syntax">hhfh hhflhkfhkfhlhkflfhlk hlhhfhfhh<br>
fuhfu hfofhifhihfih ihfhifhih h.</p>
<p class="note">hhfihfi hfihfi hfhfhfiohfhi hifhihh<br>
jfjfo ojfofjpojfojfojfojoj j .</p>
<h1 class="note"> welcome to online form</h1>
</body> </html>
Class (.)

* {Text-transform: uppercase;}
Universal (*)

 There 2 types
 Single line
 Multi line
/*........................
........................
......................... */
Comments

 Text- align : left, right, center, justify
 Text- transform : uppercase, lowercase ,
capitalize
 Text-indent : 2em or 20 px
 Text-decoration : underline , over line, line-
through
 Word-spacing : Normal or length
Basic elements in css

 Font - family : Calibri , Arial etc
 font – size : 5
 Font-style : Normal or italic
 Font- weight : Bold
 Font – variant : small-caps or normal
Basic elements in css (font)

 Background Image
 Background attach
 Background Repeat
 Background color
 Background Position
Background

Body {background-image: url(‘smallPic.jpg’); }
or
{background-image: url(‘smallPic.jpg’);
background-repeat: no-repeat;}
Or
{background-image: url(‘smallPic.jpg’);
background-repeat: repeat-y;}
Background Image

{ background-image: url(smallPic.jpg);
background-repeat: repeat-x;}
Or
background-repeat: repeat; }
Or
h4 { background-color: white; }
Or
background-position: top center; }
Background Image

 .solid {border-style: solid; }
 .double {border-style: double; }
 .groove {border-style: groove; }
 .dotted {border-style: dotted; }
 .dashed {border-style: dashed; }
 .inset {border-style: inset; }
 .outset {border-style: outset; }
 .ridge {border-style: ridge; }
 .hidden {border-style: hidden; }
Border Style Types

 table { border-width: 7px; border-style: outset; }
td { border-width: medium; border-style:
outset; }
p { border-width: thick; border-style: solid; }
Border Width

 table { border-color: rgb( 100, 100, 255);
border-style: dashed; }
 td { border-color: #FFBD32; border-style: ridge;
}
 p { border-color: blue; border-style: solid; }
Ex : p { border: 20px outset blue ;} h4{ border:
5px solid; } h5{ border: dotted; }
Border Color

 The CSS margin properties define the space
around elements.
Example
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
 margin:25px 50px 75px 100px;
 margin:25px 50px 75px;
 margin:25px 50px;
 margin:25px
CSS Margin

 The CSS padding properties define the space between
the element border and the element content.
 Example
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
 padding:25px 50px 75px 100px;
 padding:25px 50px 75px;
 padding:25px 50px;
 padding:25px;
CSS Padding

Css allows the web page designers to position
the web page anywhere on the web page .
There 4 types of position
 Normal
 Absolute
 Relative
 Fixed
Position Properties

 Absolute Positing
 Size properties
 Clip properties
 Z-index property
 Visibility Property
 Pseudo classes
 Pseudo elements
 Border Collapse
 List Property
 Scrollbar property
 Cursor Property
 Zoom Property
Advanced css Properties

Z-index
body{ background-color:green ;}
.e1{position:absolute ; font-size:medium ; z-
index:1;}
.e2{position:absolute ; font-size:larger ; z-
index:2; color:red ;left:5px;}

 Absolute Position
#header {position:absolute ;
top :100px;
left:20px ;}
 Size property
.vcard{width:250px; height:150px; border:solid
thin red; background-color:pink;
padding:10px;}

 Clip properties
.li{position:absolute ; clip:rect(0 100px 75px
40px);}
 Pseudo classes
a:link {color:white ; background-color:black;}
a:visited{color:white ; background-color:brown;}
a:hover {color: black ; background-color:white;}
a:active {color:pink ; background-color:white;}

 Pseudo classes & Pseudo elements
p:first-letter{font-size:xx-large;font-weight:bold;}
p:first-line{font-weight:bolder;background-
color:pink;}
 List Property
ul{list-style: url('images1.jpg') inside;}

 Visibility Property
<style type="text/css">
#image{visibility:hidden;}
</style>
 Border Collapse
Table{border-collapse:collapse;}

 Cursor Property
body{cursor: crosshair;}
input{cursor: text;}
.addcart{cursor: hand;}
 Scrollbar Property
TextArea {scrollbar-base-color:gray ;
scrollbar-arrow-color:green ;
scrollbar-face-color:yellow ;
scrollbar-shadow-color:blue ;
scrollbar-track-color: pink ;}

CSS presentation for beginners where they can understand easily

Recommended

More Related Content

Similar to CSS presentation for beginners where they can understand easily (20)

More from Indu32 (12)

Recently uploaded (20)

CSS presentation for beginners where they can understand easily