Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
13 views

Cascading Style Sheets (CSS)

Uploaded by

ranjith
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
13 views

Cascading Style Sheets (CSS)

Uploaded by

ranjith
Copyright
© © All Rights Reserved
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