css front end development , designing web page

 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 front end development , designing web page

More Related Content

Similar to css front end development , designing web page

More from Indu32

Recently uploaded

css front end development , designing web page