Scribd
Upload
62 views

Cascading Style Sheet (CSS) : Instructor: Dr. Fang (Daisy) Tang

CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS styles define how HTML elements are displayed. Styles can be defined internally, externally, or inline. When multiple conflicting styles apply, they cascade into a single style following specific rules. CSS properties like font, color, and text alignment can be set for different HTML elements using CSS selectors. External style sheets can reduce work by defining styles in separate CSS files.

Uploaded by

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

Cascading Style Sheet (CSS) : Instructor: Dr. Fang (Daisy) Tang

CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS styles define how HTML elements are displayed. Styles can be defined internally, externally, or inline. When multiple conflicting styles apply, they cascade into a single style following specific rules. CSS properties like font, color, and text alignment can be set for different HTML elements using CSS selectors. External style sheets can reduce work by defining styles in separate CSS files.

Uploaded by

Simmi
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 20

Cascading Style Sheet (CSS)

Instructor: Dr. Fang (Daisy) Tang

CS 299 – Web Programming and Design


What is CSS?

• CSS stands for Cascading Style Sheets


– Styles define how to display HTML elements
– Styles are normally stored in Style Sheets
– Styles were added to HTML 4.0 to solve a problem
– External style sheets can save a lot of work
– External style sheets are stored in CSS files
– Multiple style definitions will cascade into one

• Example: my homepage
• Another example:
http://www.w3schools.com/css/demo_default.htm (.html)

CS 299 – Web Programming and Design 2


Multiple Ways to Define Style

• External Style Sheet (.css files)


• Internal Style Sheet
• Inline Styles

• Examples: http://www.w3schools.com/html/html_styles.asp

• More: default style, CSS changed by


JavaScript

CS 299 – Web Programming and Design 3


Multiple Styles Cascade Into One

• What style will be used when there is more


than one style?
– Browser default
– External style sheets are included
– Embedded styles (inside the <head> tag) override
external styles
– Inline styles (inside an HTML element) override both
embedded and external styles
– Styles modified with JavaScript override all other
styles

CS 299 – Web Programming and Design 4


CSS Style Rule

property names
declarations

p{
font-size: x-large ;

background-color: yellow
}

selector string declaration block

CS 299 – Web Programming and Design 5


Selector Strings

• Type selector:
– Element type, such as body, p, hr, etc.
• See previous example
– Multiple element types using the same style are
separated by comma
• h1, h2, h3, h4, h5, h6 {background-color:purple}

• ID selector:
– #p1, #s1 {background-color: blue}
– <p id=“p1”> … </p>
– <span id=“s1”>…</span>
– id values are case-sensitive

CS 299 – Web Programming and Design 6


Sector Strings, Continue …

• Class selector:
– .myitalic {font-style: italic}
– .myred {color: red}
– <span class=“myitalic myred”> … </span>
– class values are case sensitive
– multiple classes can be applied, separated by space
– All but a few elements, such as html, head, and elements
that appear as content of head, have the class attribute

• ID and class selectors can be prefixed by an element type


name
– p.right {text-align: right}
– p#left {text-align: left}
– <p class=“right”> … </p>
– <p id=“left”> … </p>

CS 299 – Web Programming and Design 7


Selector Strings, Continue …

• A selector within the content of certain element types


– ul span {color: green}: applies to a span element within a
ul element
– ul ol li {letter-spacing: 1em}: applies to an li element
within an ol element that is within a ul element

• CSS comments
/* This is a comment */
p{
text-align: center;
/* This is another comment */
color: black; font-family: arial
}

CS 299 – Web Programming and Design 8


How to Insert a Style Sheet?

• External style sheet


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
• Internal style sheet
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
</style>
</head>
• Inline style
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

CS 299 – Web Programming and Design 9


CSS Basics

• Background
• Text
• Font
• Border
• Outline
• Margin
• Padding
• List
• Table

CS 299 – Web Programming and Design 10


CSS Advanced

• CSS dimension
• CSS classification
• CSS positioning
• CSS pseudo-class
• CSS pseudo-element
• CSS media types

CS 299 – Web Programming and Design 11


Font

• Generic font families defined in


HTML and CSS are:
– Serif
– Sans-serif
– Monospace
– Cursive
– Fantasy
• There are a lot other font
families, but might not be well
supported

CS 299 – Web Programming and Design 12


How to Select a Font Family?

• Rules-of-Thumb
– Don’t use more than 3-4 fonts on any one page
– Don’t change the font in mid sentence unless you
have a very good reason
– Sans-serif for online, serif for print
– Monospace for typewriter and code
– Script and fantasy for accents
• Sans-serif fonts are the basis of your site, for
example:
– Arial, geneva, helvetica, lucida sans, trebuchet,
verdana
– Verdana is a font family that was actually invented
for use on the web

CS 299 – Web Programming and Design 13


Selecting Font, Continue

• Use serif fonts for print


– If you have print friendly versions of your site, use
serif fonts
– Examples: garamond, georgia, new york, times,
times new roman
• Monospace for bode examples
– Use it to provide instructions, give examples, or
imply typewritten text
– Examples: courier, courier new, lucida console,
monaco
• Example:
– http://www.csupomona.edu/~ftang/www/courses/CS299-S09/examples/font.html

CS 299 – Web Programming and Design 14


More Case Studies of CSS

from CSS Tutorials @


http://webdesign.about.com/od/css/Cascading_Style_Sheets.htm

CS 299 – Web Programming and Design


Case Study

• Understanding CSS “float”


– http://webdesign.about.com/od/advancedcss/a/aa010107.htm

CS 299 – Web Programming and Design 16


Case Study

• Tableless layouts
– http://webdesign.about.com/od/css/a/aa102102a.htm

• There are many potential problems about


using table for layout
– http://webdesign.about.com/od/layout/a/aa111102a.htm

• Frames can also be substituted by CSS


– http://webdesign.about.com/od/css/a/aa110402a.htm

CS 299 – Web Programming and Design 17


Case Study

• Fixed width layouts vs. Liquid layouts


– http://webdesign.about.com/od/layout/i/aa060506.htm

• Fixed width layouts:


– The width of the entire page is set with a specific
numerical value

• Liquid layouts:
– The width of the entire page is flexible depending
upon how wide the viewer’s browser is

CS 299 – Web Programming and Design 18


Case Study

• How to build a 3-column layout:


– http://webdesign.about.com/od/csstutorials/ss/css_layout_sbs.htm

• Steps:
– Draw your layout
– Create and style a Container element
– Use a Headline Tag for the Header
– To get 3 columns, start by building 2 columns
– Then add 2 columns inside the wide second column
– Add in the Footer
– Add in your personal style and content

CS 299 – Web Programming and Design 19


Free Web Templates

• http://webdesign.about.com/od/websitetemplates/a/bl_layouts.htm

• http://www.csszengarden.com

CS 299 – Web Programming and Design 20

You might also like