Cascading Style Sheets (CSS) Notes
Download
Report
Transcript Cascading Style Sheets (CSS) Notes
Computer Applications II
A Style Sheet is a web page development tool
that allows the developer to make global
changes to a web page (or web site) as
opposed to changing every single page of the
site individually.
It is the ‘skeleton’ of a web page that
contains the minimum tags required to define
and create a basic page.
Used to define layout elements of a web page,
much like a template. This allows the designer to
define several attributes in a single place that are
to be shared on pages throughout a site.
Less code to actually be typed, keeping sheets
shorter and neater.
Appearance of site is more consistent.
Pages load faster and site accessibility is
improved.
Editing and updating is faster and more efficient.
Cascading Style Sheet (CSS) -- allows web page designers
to attach style sheets containing specific information
regarding the appearance of web pages, much like a
template.
Internal style sheet – used for individual pages containing
large amounts of text. The tag <style> is placed inside
the <head> section of the HTML code. Attributes and tag
properties are then listed inside curly braces { }.
External style sheet – used for numerous web pages that
will make up a web site, requiring pages to have a
consistent appearance. This is a separate text file, linked
to web pages. An HTML tag is indicated, followed by tag
properties in the same format as the internal style sheet.
This page is then saved in a text-only format with a .css
extension. The link can then be placed within the <head>
section of all pages to which the style attributes will apply.
Browser Default
External Default
Internal Style Sheet (in the head section)
Inline Style (inside an HTML element)
Three parts of syntax:
◦ Selector – HTML tag you wish to define
◦ Property – attribute you wish to change
◦ Value – each property can take a value
Example:
◦ Selector {property:value}
◦ body {color:black}
If value is more than one word
◦ Put quotes around the value
◦ p {font-family:”sans serif”}
If more than one property is specified
◦ You must separate each property with a semicolon
◦ p {text-align:center;color:red}
Grouping selectors
◦ Separate each selector with a comma
◦ h1,h2,h3,h4,h5,h6 {color:green}
Class Selector
CSS Comments
◦ The class selector allows you to define different styles
for the same type of HTML element
◦ p.right {text-align:right}
◦ p.center {text-align:center}
◦ <p class=“right”>This paragraph will be rightaligned</p>
◦ <p class=“center”>This paragraph will be centeraligned</p>
◦ Comments are used to explain the HTML code-helps
when code is edited later. Comments are ignored by
browsers.
◦ /*This is a comment*/
External
◦ Ideal when style is applied to many pages. Each page must
link to the style sheet. CSS file does not contain HTML
tags.
hr {color:sienna}
p {margin-left:20px}
body {background-image:url(“images/back40.gif”)}
Internal
◦ Used when a single document has a unique style.
<head>
<style type=“text/css”>
hr {color:sienna}
p {margin-left:20px}
body {background-image:url(“images/back40.gif”)}
</style>
</head>
Inline Styles
◦ Use sparingly. Loses many of the advantages of style
sheets.
<p style=“color:sienna;margin-left:20px”>This is a
paragraph</p>
Multiple Lines
◦ If multiple properties are set for the same selector in
different style sheets-values will be inherited from the
more specific sheet
External:
h3 {color:red;text-align:left;font-size:8pt}
Internal
h3 {text-align:right;font-size:20pt}
Properties for the h3 will be: color:red; text-align:right;
font-size: 20pt
Set by Name – specify a color name
◦ body {color:blue}
Set by RGB – specify an RGB value
◦ h2 {color:rgb(255,0,0)}
Set by HEX – specify a hex value
◦ h1 {color:#00ff00}
Used to set horizontal alignment of text
Examples:
◦ h1 {text-align:center}
◦ p.date {text-align:right}
◦ p.main {text-align:justify}
Used to set or remove decorations from text.
Used primarily to remove underlines from
links for design purposes
Examples:
◦ a {text-decoration:none}
◦ h2 {text-decoration:line-through}
Used to specify uppercase and lowercase
letters in text
Examples:
◦ p.uppercase {text-transform:uppercase}
◦ p.lowercase {text-transform:lowercase}
◦ p.capitalize {text-transform:capitalize}
Used to specify indentation of first line of text
Examples:
◦ p {text-indent:50px}
Family – Serif
Family – Sans Serif
Family – Monospaced
Setting Font Family
◦ Have small lines at the ends on some characters
◦ Times New Roman, Georgia
◦ Fonts that do not have lines at the end of characters
◦ Arial, Verdana
◦ All characters have the same width
◦ Courier New, Lucida Console
◦ Set with the font-family property. If font family is more
than one word, use quotation marks. Specify several font
names in case browser does not support first font
◦ p {font-family:”Times New Roman”,Georgia,Serif}
Normal
◦ Text is shown normally
◦ p.normal {font-style:normal}
Italic
◦ Text is shown in italics (most common use of fontstyle property)
◦ p.italic {font-style:italic}
Oblique
◦ Text is leaning-similar to italic, but less
◦ p.oblique {font-style:oblique}
Headings – Do not use font size adjustments
to make paragraphs look like headings or
headings look like paragraphs. Always use
proper HTML tags, like <h1> - <h6>.
Absolute – Sets text to a specified size
◦ Does not allow a user to change text size in all
browsers
◦ Useful when the physical size of the output is
known
Relative – Sets the size relative to
surrounding elements
◦ Allows a user to change the text size in browsers
Set using Pixels
◦ Gives full control over the text size
◦ h1 {font-size:40px}
Set using EM
◦ Recommended by the W3C. 1em is equal to the current
font size (default text size for browsers is 16px, so
default of 1em is 16px)
◦ h1 {font-size:2.5em} /*40px/16=2.5em*/
Set using Combination of Percentage and EM
◦ Works in all browsers. Set a default font-size in % for
body element
◦ body {font-size:100%}
◦ h1 {font-size:2.5em}