Professional Documents
Culture Documents
Cascading Style Sheets
Cascading Style Sheets
(CSS)
By
Fahad Ahmed Satti
What is CSS?
• A set of presentation
rules for styling the web
• Separation of structure
from style
Top 10 Reasons for Using CSS
1. Build from the ground up to replace
traditional Web design methods
CSS to replace HTML tables, font tags, frames, and other presentational
hacks of HTML elements
Web page
Web page
CSS CSS
Physical layout
Text
CSS CSS
Headings
Body
What is CSS?
• One cascading style sheet can be used to set the style and
format for many different web pages.
• The biggest advantage is that if the web author wants to make
whole changes to a website, the style editing takes place in
one location (the CSS), yet is applied to all related locations
(the pages).
• Imagine a large site with hundreds of pages. To change even
on item on each page, without a CSS, would require editing of
each of the hundreds of pages.
• In contract, a CSS based website would require the editing of
only one file – the CSS.
Types of CSS
• External
• Internal/Embedded
• Inline
External
• Allows for using style sheets from other sources
• Connection made via the LINK tag
• Use the optional TYPE attribute to specify a media type
• Two Methods
Linking a CSS file: (Recommended)
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
</head>
Importing a CSS file: (Not supported in older browsers)
<head>
<style type=”text/css”>@import url(path/to/cssdoc.css);</style>
</head>
Internal/Embedded
• Style characteristics are embedded in the HEAD
section of the webpage
• Perhaps best used when a single page requires a
unique style sheet
<head>
<style type=“text/css”>
hr { color: navy}
body {margin-left: 20px}
</style>
</head>
Inline
• Least flexible
• Requires each element to be tagged if you
want them to appear differently
• Looses the advantage of using CSS
}
selector {property: value} declaration
Basic CSS Syntax
selector {property: value}
p { text-align: center;
color: navy;
font-family: arial
}
Basic CSS Syntax – Grouping Selectors
Selectors can be grouped so that a common
property can be specified
p b { color: yellow }
<p class=“right”>
This paragraph will be right aligned.
</p>
<p class=“center”>
So will this text
</p>
CSS Syntax – id Selector
While the class selector can apply to several
different elements, the id selector can only apply
to one, unique element with in a document.
This style will apply to only that <p> element that has id
value equal to para1
CSS Syntax – id Selector
p#para1 { text-align: center; color: green }
<p id=“para1”>
This text would be centered and green
</p>
CSS Syntax - comment
You can insert comments to help you describe the particular style
/* This is a comment */
P { color: red;
/* This is another comment */
Font-family: verdana }
CSS Properties
• Basic CSS Properties
– Background Properties
– Text Properties
– Font Properties
– Border Properties
– Margin Properties
32
Background properties
• Define the background effects of an element
• Effects include color, using an image for a
background, repeating an image and
positioning an image
Background properties
• Basic syntax
– background
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
Background properties
• All attributes can be set in a single
declaration:
Shorthand Property:
background: #000000 url(‘psumark.gif’) no-
repeat fixed center
Equivalent to:
background-color: #000000; background-image:
url(‘psumark.gif’); background-repeat: no-
repeat; background-attachment: fixed;
background-position: center
Background properties
• Setting the body background (internal CSS)
<style>
body { background: #000000 url(‘psumark.gif’)
no-repeat fixed center }
</style>
Background properties
46
Font properties
• Define the look of the font in text areas
• One of the broader sets of properties in CSS
– font
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
Font properties
• All attributes can be set in a single declaration:
Shorthand Property:
font: italic small-caps 900 12px arial
Equivalent to:
font-style: italic; font-variant: small-caps; font-
weight: 900; font-size: fixed; font-family: arial
48
Font properties
• font-style
– Normal
– Italic
– oblique
• Syntax
– body {font-style: italic}
Font properties
• font-variant
– Normal
• font displays as is
– small-caps
• font displays in all capitals, with lower case letters in smaller size
Syntax:
body {font-variant: small-caps}
Font properties
• font-weight
– normal
– bold range from 100 – 900
– bolder 400 is the same as normal weight
700 is the same as bold weight
– lighter
– weighted values
Syntax:
body {font-weight: bold}
Font properties
• font-size
• xx-small
• x-small
• Small
• Medium
• Large
• x-large
• xx-large
• %
Syntax:
body {font-size: 20px}
{font-size: x-large}
{font-size: 125%}
Font properties
• font-family
– family-name
• “times”, “arial”, “courier”, “verdana”
– generic-family
• “serif”, “sans-serif”, “monospace”
Syntax:
body {font-family: verdana, sans-serif}
CSS Properties
• Basic CSS Properties
– Background Properties
– Text Properties
– Font Properties
– Border Properties
– Margin Properties
54
Border properties
• Allows you to specify the width, style, and
color of an element’s border
• Many different properties can be applied
• Border border-color
border-style
border-width
border-bottom border-right
border-bottom-color
border-right-color
border-bottom-style
border-right-style
border-bottom-width
border-right-width
border-left border-top
border-left-color
border-top-color
border-left-style
border-top-style
border-left-width
border-top-width
Border properties
• You can specify the width, style, color and on which sides the
border appears
Shorthand Property:
border: medium double rgb(250,0,255)
Equivalent to:
border-width: medium; border-style: double; border-color:
rgb(255,0,255)
CSS Properties
• Basic CSS Properties
– Background Properties
– Text Properties
– Font Properties
– Border Properties
– Margin Properties
57
Margin properties
• Define the space around elements
• You can use negative values to overlap content
• Margins can be set independently or
collectively
• Can be set to auto, a fixed length or a % of the
total height of the document
Margin properties
• Properties
– margin
– margin-top
– margin-right
– margin-bottom
– margin-left
Margin properties
• Can be set in one declaration
• Think clock face (clockwise)
– top, right, bottom, left
h1 {margin: 40px}
Margin properties
• Margin settings can be paired (left and right,
top and bottom)
h1 {margin: 40px 0 5% 0}
In this example, the top margin would be 40 pixels, the left and
right margins would be 0, and the bottom margin would
be 5% of the total height of the document.
CSS Box Properties
• Content - The content of
the box, where text and
images appear
• Padding - Clears an area
around the content. The
padding is transparent
• Border - A border that
goes around the padding
and content
• Margin - Clears an area
outside the border. The
margin is transparent
66
CSS3
• latest standard for CSS.
• completely backwards-compatible with earlier
versions of CSS.
• most of the CSS3 Modules are W3C
Recommendations
• and most of the new CSS3 properties are
already implemented in modern browsers.
67
CSS3 Modules
• Some of the most important CSS3 modules are:
– Selectors
– Box Model
– Backgrounds and Borders
– Image Values and Replaced Content
– Text Effects
– 2D/3D Transformations
– Animations
– Multiple Column Layout
– User Interface
68
CSS3 Rounded Corners(1)
• with border-radius property, you can give any element
"rounded corners".
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
<p id="rcorners1">Rounded
corners!</p>
70
CSS3 Rounded Corners(3)
• Three values: first value applies to top-left,
second value applies to top-right and bottom-
left, and third value applies to bottom-right
#rcorners5 {
border-radius: 15px 50px
30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
71
CSS3 Rounded Corners(4)
• Three values: first value applies to top-left,
second value applies to top-right and bottom-
left, and third value applies to bottom-right
#rcorners5 {
border-radius: 15px 50px
30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
72
CSS3 Rounded Corners(5)
• Two values: first value applies to top-left and
bottom-right corner, and the second value
applies to top-right and bottom-left corner
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
74
CSS3 Rounded Corners(4)
• Elliptical Corners
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
75
CSS3 Border Images
• border-image
• you can set an image to be used as the border
around an element.
• The property has three parts:
– The image to use as the border
– Where to slice the image
– Define whether the middle sections should be
repeated or stretched
h1 {
text-shadow: 2px 2px 5px red;
}
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px
blue, 0 0 5px darkblue;
}
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px
grey;
}
div#trans {
-webkit-transform:
rotateY(150deg); /* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s,
height 4s; /* For Safari 3.1 to
6.0 */
transition: width 2s, height
4s;
}
div:hover {
width: 300px;
height: 300px;
}
• Shorthand
div {
animation: example 5s linear 2s infinite alternate;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} 95
CSS3 Media Queries
• Media queries in CSS3 extend the CSS2 media types idea
– In CSS2 @media was used to define different style rules for
different media types(computers, printers, tablets, etc)
– In CSS3, Instead of looking for a type of device, they look at the
capability of the device.
96
Syntax
@media not|only mediatype and (expressions) {
CSS-Code;
}
• The result of the query is true if the specified
media type matches the type of device( the
document is being displayed on)
• and all expressions in the media query are true.
• When a media query is true, the corresponding
style sheet or style rules are applied, following
the normal cascading rules.
Web Tech 1. Cascading Style Sheets 97
CSS3 Media Types
• Unless you use the not or only operators, the
media type is optional and the all type will be
implied.
Value Description
speech Used for screenreaders that "reads" the page out loud
Phone
Desktop Tablet
Web Tech 1. Cascading Style Sheets 101
The Viewport
• user's visible area of a web page
• varies with the device(smaller on a mobile
phone than on a computer screen)
• <meta name="viewport" content="width=device-
width, initial-scale=1.0">
– width=device-width sets the width of the page to
follow the screen-width of the device
– initial-scale=1.0 sets the initial zoom level
when the page is first loaded by the browser.
<body>
<h2>Hide elements on different screen sizes</h2>
<div class="example">Example DIV.</div>
</body>
</html> Web Tech 1. Cascading Style Sheets 121
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
<body>
<div class="example">Example DIV.</div>
</body>
</html> Web Tech 1. Cascading Style Sheets 122
Thank you
123