CSS
CSS
4
Version year
.
6
Selector Property Value
Linking HTML and CSS
• HTML (content) and CSS (presentation) can be
linked in three ways:
7
ID and class Selector
• Id selector is used for an unique element .
#appin{……………..}
.appin{……………..}
8
•h1,p,a {…………………….}
•h1.appin {…………………….}
•.c1{…………………..}
•.c2{…………………..}
9
CSS properties
• Text
Color
body{color:red;}
h1{color:#00FF00;}
Align
h1{text-align:left/right/center/justify ;}
Decoration
h1{text-decoration:overline/line-through/underline;}
Transformation
h1{text-transform:uppercase/lowercase/capitalize;}
Indentation
p{text-indent:146px;}
10
CSS properties
• background
Color
body{background-color:red;}
h1(background-color:#00FF00;}
Image
body{background-image:url(‘File.ext’) ;}
Repeat
body{background-repeat:repeat/no-repeat/repeat-x/repeat-y ;}
Shorthand implementation
body{background:#FFFFFF url(‘File.ext’) no-repeat right top;}
Color Image
Repeat 11
Position
• Font
Family
CSS properties
p{font-family:Arial,helventika,Sans-Serif;}
Style
h1{font-style:normal/italic/oblique ;}
Size
h1{font-size:40px /1em;}
weight
h1{font-weight:bold/100 to 900/normal;}
12
• Font
CSS properties
Shorthand
h1{font:italic small-caps bold 15px georgia;}
13
CSS properties
• Border
The border-color specifies the color of a border.
By name
by #Code
The border-style specifies whether a border should be solid, dashed line,
double line, or one of the other possible values.
dotted /dashed /solid /double /groove /ridge /inset /outset /none /hidden
The border-width specifies the width of a border.
thin/ thick / medium
In pixels
• Shorthand
h1{ border:1px solid red;}
border-collapse: collapse;
14
• Variants of Border
border-bottom-style
border-top-style
border-left-style
border-right-style
border-bottom-color
border-top-color
border-left-color
border-right-color
border-bottom-width
border-top-width
border-left-width
border-right-width
h1{border-bottom: 1px solid red;}
15
CSS properties
• Links
we will discuss Pseudo-Classes of CSS.
The :link signifies unvisited hyperlinks.
The :visited signifies visited hyperlinks.
The :hover signifies an element that currently has the user's mouse pointer
hovering over it.
The :active signifies an element on which the user is currently clicking.
<style>
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
16
CSS properties
• Margins
• The margin properties are used to generate space around elements.
• The margin properties set the size of the white space outside the border.
margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent
element
17
CSS properties
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
p{
margin: 100px 150px 100px 80px;
} Top Bottom
Right Left 18
CSS properties
If the margin property has four values:
• margin: 25px 50px 75px 100px;
• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px
If the margin property has three values:
• margin: 25px 50px 75px;
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px
If the margin property has two values:
• margin: 25px 50px;
• top and bottom margins are 25px
• right and left margins are 50px
If the margin property has one value:
• margin: 25px;
• all four margins are 25px
19
CSS properties
auto Value
You can set the margin property to auto to horizontally center the element
within its container.
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
<div>
<p>This div will be centered because it has margin: auto;
</p>
</div>
20
CSS properties
• Padding
The padding property allows you to specify how much space should appear
between the content of an element and its border.
21
CSS properties
div {
border: 1px solid black;
background-color: lightblue;
}
div.appin {
padding: 25px 50px 75px 100px;
}
22
• display CSS properties
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of
element it is. The default display value for most elements is block or inline.
display: none; is commonly used with JavaScript to hide and show elements
without deleting and recreating them.
• Visibility
A property called visibility allows you to hide an element from view.
NOTE − Remember that the source code will still contain whatever is in the
invisible paragraph, so you should not use this to hide sensitive information.
Visible
hidden
23
CSS properties
• Float:-the float property specifies whether or not a box (an element)
should float.
• Left
• Right
• Center
• None
• Initial
• inherit
24
CSS properties
Pseudo Code
a:hover
{
Css property
}
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
<p>An <img class="top" src="logo.gif" alt=“Appin" width="270"
height="50"> image with a text-top alignment.</p><br>
25
Define a special state of
Pseudo Class
an element
Active a:active
Hover a:hover
Visited a:visited
Link a:link
Checked input:checked
Focus input:focus
Pseudo elements
::after
::before
::first-letter
::first-line
::selection