Scribd
Upload
3 views

CSS

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in separating presentation from content and enhancing accessibility. It covers various CSS properties, selectors, and methods for linking CSS to HTML, along with examples of syntax and application. Additionally, it discusses the evolution of CSS versions and introduces concepts such as pseudo-classes and pseudo-elements.

Uploaded by

neelesh1222
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in separating presentation from content and enhancing accessibility. It covers various CSS properties, selectors, and methods for linking CSS to HTML, along with examples of syntax and application. Additionally, it discusses the evolution of CSS versions and introduces concepts such as pseudo-classes and pseudo-elements.

Uploaded by

neelesh1222
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

CSS

Styling with Cascading Style sheets


Håkon Wium Lie and Bert Bos
December 17, 1996
3
CSS Introduction
• Cascading Style Sheets (CSS)
• Used to describe the presentation of documents
• Define sizes, spacing, fonts, colors, layout, etc.
• Improve content accessibility
• Improve flexibility
• Designed to separate presentation from content
• Due to CSS, all HTML presentation tags and
attributes are deprecated, e.g. font, center, etc.

4
Version year
.

CSS 1 December 17, 1996


CSS 2 May 1998
CSS 2.1 7 June 2011
CSS 3 June 2012
CSS 4 Apr 12, 2016
Style Sheets Syntax
• Stylesheets consist of rules, selectors,
declarations, properties and values

• Selectors are separated by commas


• Declarations are separated by semicolons
• Properties and values are separated by colons
h1,h2,h3 { color: green; font-weight: bold;}

6
Selector Property Value
Linking HTML and CSS
• HTML (content) and CSS (presentation) can be
linked in three ways:

• Inline: the CSS rules in the style attribute


• No selectors are needed

• Embedded(Internal) : Inside the <head> using <style> tag

• External: CSS rules in separate file (best)


• Usually a file with .css extension
• Linked via <link rel="stylesheet" href=…> tag

7
ID and class Selector
• Id selector is used for an unique element .

• Id selector uses id attribute of HTML <tag>.

• Id selector defines with ‘#’ .

#appin{……………..}

• class selector is used for a group of elements.

• class selector uses class attribute of HTML <tag>.

• Class selector defines with ‘.’ .

.appin{……………..}
8
•h1,p,a {…………………….}

•h1.appin {…………………….}

•.c1{…………………..}
•.c2{…………………..}

•<h1 class=“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.

The padding-bottom specifies the bottom padding of an element.


The padding-top specifies the top padding of an element.
The padding-left specifies the left padding of an element.
The padding-right specifies the right padding of an element.
The padding serves as shorthand for the preceding properties.

21
CSS properties
div {
border: 1px solid black;
background-color: lightblue;
}

div.appin {
padding: 25px 50px 75px 100px;
}

<div class=“appin">Appin tech lab bhopal</div>

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

Used to style specified parts of an element

::after
::before
::first-letter
::first-line
::selection

You might also like