Scribd
Upload
23 views24 pages

Cascading Style Sheets (CSS)

Uploaded by

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

Cascading Style Sheets (CSS)

Uploaded by

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

CASCADING STYLE SHEETS (CSS)

INTRO TO CSS

Cascading Style Sheet (CSS) is used


to set the style in web pages that
contain HTML elements.
It sets the background color, font-
size, font-family, color, … etc.
properties of elements on a web
page.
WHAT IS CSS?
 Cascading Style Sheet
 Stylesheet Language
 Standards-based set of properties and attributes to define

styles
 To describe the presentation a document written in a

‘markup language’ like HTML or XML


 Defines the style of how things in tags appear.

 Font, color, size, margins, etc.

 Cascading

 Rules to determine how to

 apply markup that contains

 other markup
WHY CSS?
 Separate Content from Form
 Content is the text and images, marked up to define regions of
specific types
 Form defines the “style” for the content

<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
My information 1 goes here.
The old way: </font>
<font size=“14px”>
My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
Different information goes here.
</font>
WHY CSS? CONTINUED.
 Separate Content from Form
 Content

<p class=“header”>My First Header</p>


<p class=“info”>My Information 1 goes here</p>
<p class=“header”>My Second Header</p>
<p class=“info”>Different Information goes here</p>
(Specific markup properties like Class will be discussed later).

 Form or Style

.header { font-size:14px;}
.info { font-family: verdana;
font-color: blue;
font-size: 12px; }
WHAT DOES THIS SEPARATION GET US?
 Separate Content from Form
 Specify the style once for every instance of that class.
 Example: Specify the font once for all text on the HTML page that
you’ve identified as a “header”.

 The stylesheet can be a separate file which all HTML pages


on your entire site can link to.
 Only have to specify the style once for your ENITRE SITE

 Can change the style for your entire site by editing only
ONE FILE.
CSS SKINNING
 “Skinning” - changing the look of a page or your site
 Selecting an appearance by choosing which stylesheet to use.

<link rel="stylesheet" type="text/css" href=“skin1.css" />

<p class=“info”>My Information 1 goes here</p>


+
skin1.css
.info { background-color: White;
font-family: Verdana;
font-color: Blue; }
=
Some information goes here.
CSS SKINNING 2
 “Skinning” - changing the look of a page or your site
 Selecting an appearance by choosing which stylesheet to use.

<link rel="stylesheet" type="text/css" href=“skin2.css" />

<p class=“info”>My Information 1 goes here</p>


+
skin1.css
.info { background-color: Blue;
font-family: Serif;
font-color: White; }
=
Some information goes here.
CSS SYNTAX
 3 Elements to a CSS Statement
 Selector
 What HTML sections does it affect?
 Property
 What attribute of that HTML section will be affected?
 Value
 What change will be made to that attribute?
THREE CSS DEFINITION LOCATIONS
 Inline: the “style” attribute
<p style=“font-color:red;font-size:10px;”>Content</p>
Note, the selector for inline CSS is the tag which contains the style attribute.
 Internal: the <style> markup tag
<html><head><style>
p{ background-color: Red;
font-family: serif;
font-color: White; }
</style></head><body>
<p>Content</p>
</body></html>

 External: the .css stylesheet file


<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
CSS SYNTAX: SELECTORS
 There are many kinds of selectors and many ways to reference them:
 Type, Class, ID, Pseudo, etc.

 HTML Type Tag – selected with the tag type


p{ font-size: 10px;
font-color: White; }

<p>Content</p>
 The Class Attribute – precede the class with a period
.myinfo { font-size: 10px;
font-color: White; }

<p class=“myinfo”>Content</p>
<div class=“myinfo”>Other content</div>
CASCADING INHERITANCE
 Nested elements inherit
the properties from the
its parent

 If you specify a style for the body { font-family: Verdana;


<body> tag it will affect all font-size: 14px; }
content in your HTML page.
body { font-family: Verdana;
font-size: 1.1em; }
 If you want to override .littletext { font-size: 8px; }
inherited settings, you <body>
need to specify a style in This text is larger.
a more local element <p class=“littletext”>This text is
smaller.</p>
TEXT-RELATED CSS PROPERTIES
 color – specifies the color of the text
 font-size – size of font: xx-small, x-
small, small, medium, large, x-large, xx-
large, smaller, larger or numeric value
 font-family – comma separated font names
 Example: verdana, sans-serif, etc.
 The browser loads the first one that is
available
 There should always be at least one generic
font
 font-weight can be normal, bold, bolder,
lighter or a number in range [100 … 900]
13
CSS RULES FOR FONTS
 font-style – styles the font
 Values: normal, italic, oblique

 text-decoration – decorates the text


 Values: none, underline, line-trough, overline,
blink
 text-align – defines the alignment of text or other
content
 Values: left, right, center, justify

14
SHORTHAND FONT PROPERTY
 font
 Shorthand rule for setting multiple font properties at the
same time
font:italic normal bold 12px/16px verdana

is equal to writing this:

font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;
15
BACKGROUNDS

 background-image
 URL of image to be used as background, e.g.:

background-image:url("back.gif");
 background-color
 Using color and image and the same time

 background-repeat
 repeat-x, repeat-y, repeat, no-repeat

 background-attachment
 fixed / scroll

16
BACKGROUNDS
 background-position: specifies vertical and
horizontal position of the background image
 Vertical position: top, center, bottom
 Horizontal position: left, center, right
 Both can be specified in percentage or other numerical
values
 Examples:

background-position: top left;

background-position: -5px 50%;

17
BACKGROUND SHORTHAND PROPERTY
 background:shorthand rule for setting
background properties at the same time:
background: #FFF0C0 url("back.gif") no-repeat
fixed top;
is equal to writing:
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
Some browsers will not apply BOTH color and
image for background if using shorthand rule
18
BACKGROUND-IMAGE OR <IMG>?
 Background images allow you to save many image
tags from the HTML
 Leads to less code
 More content-oriented approach

 All images that are not part of the page content (and
are used only for "beautification") should be moved to
the CSS

19
BORDERS
 border-width: thin, medium, thick or numerical
value (e.g. 10px)
 border-color: color alias or RGB value

 border-style: none, hidden, dotted, dashed,


solid, double, groove, ridge, inset, outset
 Each property can be defined separately for left, top,
bottom and right
 border-top-style, border-left-color, …

20
BORDER SHORTHAND PROPERTY

 border: shorthand rule for setting border properties


at once:
border: 1px solid red
is equal to writing:
border-width:1px;
border-color:red;
border-style:solid;
 Specify different borders for the sides via shorthand
rules: border-top, border-left, border-right,
border-bottom
 When to avoid border:0
21
WIDTH AND HEIGHT
 width – defines numerical value for the width of
element, e.g. 200px
 height – defines numerical value for the height of
element, e.g. 100px
 By default the height of an element is defined by its
content
 Inline elements do not apply height, unless you change

their display style.

22
MARGIN AND PADDING
 margin and padding define the spacing around the
element
 Numerical value, e.g. 10px or -5px
 Can be defined for each of the four sides separately -
margin-top, padding-left, …
 margin is the spacing outside of the border
 padding is the spacing between the border and the
content
 What are collapsing margins?

23
MARGIN AND PADDING: SHORT
RULES
 margin: 5px;
 Sets all four sides to have margin of 5 px;

 margin: 10px 20px;


 top and bottom to 10px, left and right to 20px;

 margin: 5px 3px 8px;


 top 5px, left/right 3px, bottom 8px

 margin: 1px 3px 5px 7px;


 top, right, bottom, left (clockwise from top)

 Same for padding

24

You might also like