Transcript Algorithms 444

Computer Sciences Department
1
And use http://www.w3schools.com/
Cascading Style Sheets
CSS
Objectives







Introduction to CSS
Cascading Style Sheets
Benefits of using CSS
Levels of Style Sheets
CSS Syntax
Properties
CSS3
Introduction
 The CSS1 specification was developed in 1996
 CSS2 was released in 1998
 CSS3 is the latest standard for CSS and is completely
backwards-compatible with earlier versions of CSS
 CSSs provide the means to control and change presentation of
HTML documents (control the style and layout of multiple
Web pages all at once).
 CSS is not technically HTML, but can be embedded in HTML
documents
 Style sheets allow you to impose a standard style on a whole
document, or even a whole collection of documents
 Style is specified for a tag by the values of its properties
Computer Sciences Department
5
What is CSS?





CSS stands for Cascading Style Sheets
CSS defines how HTML elements are to be displayed
Styles were added to HTML 4.0 to solve a problem
CSS saves a lot of work
External Style Sheets are stored in CSS files
Computer Sciences Department
6
CSS Solved a Big Problem
 HTML was NEVER intended to contain tags for formatting a
document.
 HTML was intended to define the content of a document, like:
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
 When tags like <font>, and color attributes were added to the HTML
3.2 specification, it started a nightmare for web developers.
Development of large web sites, where fonts and color information
were added to every single page, became a long and expensive
process.
 To solve this problem, the World Wide Web Consortium (W3C)
created CSS.
 In HTML 4.0, all formatting could (and should!) be removed from the
HTML document, and stored in a separate CSS file.
Computer Sciences Department
7
CSS Saves a Lot of Work!
 The style definitions are normally saved in external .css files.
 With an external style sheet file, you can change the look of
an entire Web site by changing just one file!
Computer Sciences Department
8
Levels of Style Sheets

There are three levels of style sheets
• Inline - specified for a specific occurrence of a tag and apply
only
to
that
tag
– This is fine-grain style, which defeats the purpose of style
sheets - uniform style
• Document-level style sheets - apply to the whole document
in which they appear
• External style sheets - can be applied to any number of
documents

When more than one style sheet applies to a specific tag in
a document, the lowest level style sheet has precedence
 In a sense, the browser searches for a style property spec,
starting with inline, until it finds one (or there isn’t one)
Computer Sciences Department
9
Three Ways to Insert CSS
 There are three ways of inserting a style sheet:
 Inline style
 Internal style sheet
 External style sheet
Computer Sciences Department
10
Inline Styles
 - To use inline styles, add the style attribute to the relevant
tag.
- The style attribute can contain any CSS property.
Computer Sciences Department
11
Internal Style Sheet
 An internal style sheet should be used when a single document
has a unique style. You define internal styles in the head section
of an HTML page, inside the <style> tag, like this:
Computer Sciences Department
12
Computer Sciences Department
13
CSS Syntax
Computer Sciences Department
14
CSS Selectors
 CSS selectors allow you to select and manipulate
HTML elements.
 CSS selectors are used to "find" (or select) HTML
elements based on their id, class, type, attribute, and
more.
Computer Sciences Department
15
The element Selector
The element selector selects elements based on the element
name.
All <p> elements can be selected on a page like this: (all <p>
elements will be center-aligned, with a red text color)
Computer Sciences Department
16
The id Selector
 The id selector uses the id attribute of an HTML element to select a specific
element.
 An id should be unique within a page, so the id selector is used if you want
to select a single, unique element.
 To select an element with a specific id, write a hash character, followed by
the id of the element.
Computer Sciences Department
17
The class Selector
 The class selector selects elements with a specific class
attribute.
 To select elements with a specific class, write a period character,
followed by the name of the class.
 You can also specify that only specific HTML elements should be
affected by a class.
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
Computer Sciences Department
18
Try Grouping Selectors
Computer Sciences Department
19
Properties
 There are 60 different properties in 7 categories:
 Backgrounds
 Alignment of text
 Fonts
 Lists
 Margins
 Colors
 Borders
Computer Sciences Department
20
Property Values
 Keywords - left, small, …
 Not case sensitive
 Length - numbers, maybe with decimal points
 Units:









px - pixels
in - inches
cm - centimeters
mm - millimeters
pt - points
pc - picas (12 points)
em - height of the letter ‘m’
ex-height - height of the letter ‘x’
No space is allowed between the number and the unit specification e.g.,
1.5 in is illegal!
Computer Sciences Department
21
CSS Background
 The background-color property specifies the background
color of an element.
 With CSS, a color is most often specified by:
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 a color name - like "red“
 The background-image property specifies an image to use as
the background of an element.
 background-repeat
 background-attachment
 background-position
Computer Sciences Department
22
Computer Sciences Department
23
http://www.w3schools.com/css/css_background.asp
Computer Sciences Department
24
Text Alignment
Computer Sciences Department
25
Text Decoration
The text-decoration property is mostly used to remove or add
underlines from links for design purposes
Computer Sciences Department
26
Text Transformation and Indentation
 The text-transform property is used to specify uppercase and
lowercase letters in a text.
 It can be used to turn everything into uppercase or lowercase
letters, or capitalize the first letter of each word
 The text-indent property is used to specify the indentation of
the first line of a text.
Computer Sciences Department
27
CSS font
Computer Sciences Department
28
Font Properties
 Font Family: P {font-family: "Times New Roman", Times, serif;}
 Font Style:
 Font Size
 Set Font Size With Em: font-size: 2.5em; /* 40px/16=2.5em */
(To allow users to resize the text . 1em is equal to the current font size. The default text size in browsers is
16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula:
pixels/16=em)
 Use a Combination of Percent and Em: font-size: 100%;
Computer Sciences Department
29
Styling Links and CSS Pseudo-classes
 Links can be styled with any CSS property (e.g. color, fontfamily, background, etc.).
 Links can be styled differently depending on what state they
are in.
 The four links states are:
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked
 A pseudo-class is used to define a special state of an element
 Example
Computer Sciences Department
30
Match the first <i> element in all <p>
elements
 In the following example, the selector matches the first <i>
element in all <p> elements
Computer Sciences Department
31
first-line and first-letter
CSS Lists
 The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
 In HTML, there are two types of lists:
 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters
 With CSS, lists can be styled further, and images can be used as the
list item marker. For example
 List - Example
Computer Sciences Department
32
Computer Sciences Department
33
Computer Sciences Department
34
CSS Tables
 Table Borders: table, th, td { border: 1px solid black;}
 Table Width and Height: table {width: 100%;}
 Horizontal Text Alignment “left, right, or center”: th {text-align:
left;}
 Vertical Text Alignment ” top, bottom, or middle”: td {
height: 50px; vertical-align: bottom;}
 Table Padding
 Table Color
 table, td, th {
border: 1px solid green;
}
Computer Sciences Department
th {
background-color: green;
color: white;
}
td {
padding: 15px;
}
35
CSS Box Model
Computer Sciences Department
36
Computer Sciences Department
37
Computer Sciences Department
38
Margin
 The margin clears an area around an element (outside the
border).
 The margin does not have a background color, and is
completely transparent.
 The top, right, bottom, and left margin can be changed
independently using separate properties.
 A shorthand margin property can also be used, to change all
margins at once.
 Example
Computer Sciences Department
39
CSS Display and Visibility
 The display property specifies if/how an element is
displayed.
 The visibility property specifies if an element should be
visible or hidden.
 visibility: hidden; hides an element, but it will still take up the
same space.
 display: none; element will be hidden, and the page will be
displayed as if the element is not there
 li {display:inline;} displays <li> elements as inline elements.
Computer Sciences Department
40
CSS Positioning
 The CSS positioning properties allow you to position an element. It can
also place an element behind another, and specify what should
happen when an element's content is too big.
 There are four different positioning methods:
 Static Positioning: HTML elements are positioned static by default. A static
positioned element is always positioned according to the normal flow of
the page. “are not affected by the top, bottom, left, and right properties”
 Fixed Positioning: An element with a fixed position is positioned relative
to the browser window, and will not move even if the window is scrolled
 Relative Positioning: A relative positioned element is positioned relative to
its normal position
 Absolute Positioning: An absolute position element is positioned relative
to the first parent element that has a position other than static. If no such
element is found, the containing block is <html>.
Computer Sciences Department
41
 The z-index property specifies the stack order of an element
(which element should be placed in front of, or behind, the
others).
 An element with a larger z-index generally covers an element
with a lower one
Computer Sciences Department
42
Computer Sciences Department
43
CSS Float
 With CSS float, an element can be pushed to the left or right,
allowing other elements to wrap around it.
 Float is often used with images, but it is also useful when
working with layouts
Computer Sciences Department
44
CSS Navigation Bar
 Navigation Bar = List of Links
 <ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
 Horizontal Navigation Bar: li {display: inline;}
Computer Sciences Department
45
CSS Image Opacity / Transparency
 Creating transparent images with CSS is easy.
 The CSS opacity property is a part of the CSS3 recommendation
 The CSS3 property for transparency is opacity
 IE9, Firefox, Chrome, Opera, and Safari use the property opacity for
transparency. The opacity property can take a value from 0.0 - 1.0. A lower
value makes the element more transparent.
 IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 100. A lower value makes the element more transparent.
 Example
Computer Sciences Department
46
Css3
Computer
47 Sciences Department
CSS3 3D Transforms
 CSS3 allows you to format your elements using 3D
transforms.
 The 3D transform methods:
 rotateX()
 rotateY()
 More
Computer Sciences Department
48
CSS3 Animations
 An animation lets an element gradually change from one style to
another.
 You can change as many properties you want, as many times you
want.
 You can specify when the change will happen in percent, or you
can use the keywords "from" and "to" (which represents 0% and
100%).
 0% represents the start of the animation, 100% is when the
animation is complete.
 When an animation is created in the @keyframe rule, you must
bind it to a selector, otherwise the animation will have no effect.
 Bind the animation to a selector (element) by specifying at least
these two properties:

the name of the animation

the duration of the animation
 more
Computer Sciences Department
49