cascading style sheets. slide 2 lecture overview overview of cascading style sheets (css) ways to...
Post on 19-Dec-2015
232 views
TRANSCRIPT
Cascading Style Sheets
Slide 2
Lecture Overview Overview of Cascading Style Sheets
(CSS) Ways to declare a CSS CSS formatting capabilities New features in CSS3
Slide 3
Introduction to CSS A trend in Web page design is to
separate the document structure and content from the document formatting
Cascading Style Sheets are the preferred XML way to do this I will use them extensively in this course I will (try) not to use the old deprecated
methods
Slide 4
CSS Versions CSS 2 is the current version supported
by most browsers CSS 3 is in the “draft” state. The
standard is broken down into several modules I’ll talk about CSS 3 and where we are
Slide 5
Style Rules (1) Style rules format “things” The things we format are defined by the
selector Element names Classes IDs
Slide 6
Style Rules (2) Style rules are made up of a property
and a value A colon separates a property and its value Multiple property:value pairs are
connected with a semi-colon as in
property:value; property:value
Slide 7
Style Rules (3) Property / value pairs are enclosed in a
selection block A selector precedes the declaration
block
Slide 8
Types of Selectors There are different types of selectors
Each has a different level of “specificity” A class within an element An id within an element An element within an element
Slide 9
Element in Element It’s possible to apply styles to an
element only when it appears inside of another element
Example to format <em> only inside of <code>
code em {color: #800000;}
Slide 10
Element in Class Classes allow you to restrict the selector
by setting the class attribute of some other element
Class named begins with a period Followed by the developer-chosen class
name Followed by the typical { property:value; property:value }
Slide 11
Declaring a Class (Example) Declare a class named MyClass (name
begins with a dot (.))
.MyClass {color:aqua}
Declare a class that will be applied only to <p> tags
p.MyClass {color:aqua}
Slide 12
Using a Class (Example) Use the class attribute of an element
to apply the style The value is the same as the CSS class
name Example to format the paragraph using
the CSS class named MyClass:
<p class="MyClass">Formatted using class MyClass.</p>
Slide 13
ID Selectors They are similar to inline styles but
allow a style to be referenced through an element’s id attribute One-to-one correspondence between the
selector and style
Use these to format blocks with <div> and <span>
Slide 14
ID Selectors (2) The declaration is similar to a class Use # instead of . in the CSS file Example to format the element whose id attribute has a value of #TestID
#TestID{}
Slide 15
When rules collide Simply put, the more specific rule
overrides the more general rule Style rules are inherited
Slide 16
Using CSS – The Basics Using CSS is (usually) a two-part
process Declare a style Use the style to format an element, such
as a paragraph One style can be used to format many
elements
Slide 17
Three ways to Declare a Style Inline
The style is declared as part of the element declaration in the element’s body
We really don’t use these much Embedded
Declared in the header of the Web page (<head>) element
External The style is declared in a CSS page and used by
the referencing HTML page
Slide 18
Inline Style Declaration Set the style property of an element The property’s value contains a style
declaration as mentioned in the previous slide
See InlineStyle.htm in the corresponding chapter example
Slide 19
Inline Style Declaration (Example) The style attribute contains the style
declaration<p style="padding: 10px; margin: 10px; font-family: ‘arial'; font-size: 10pt;font-weight: bold;border: thin groove #000080;width: 300px;" >
Some text </p>
Slide 20
Embedded Style Sheets Embedded (internal) style sheets
appear inside of a <style> element in the <head> section Multiple styles can be declared
You can declare styles for common HTML elements such as <p> or anything else
Slide 21
Embedded Style Sheets (Syntax) Each style has the following syntax
selector { property:value; property:value }
selector contains the HTML5 tag, class, id Note the <> characters do not appear
The property:value syntax is the same as before
Note that the {} characters enclose the style
See EmbeddedStyle.htm
Slide 22
Embedded Style Sheets Example
Slide 23
External Style Sheets Its just a file with an extension of .css
Its contents are the same as the contents of a <style> element
Reference an external style sheet using the <link> tag in an XHTML document
It’s possible to reference several external style sheets using multiple <link> tags
Slide 24
Using the <link> Tag The <link> tag has 3 important
attributes rel – The relationship between the current
document and the linked document Always “stylesheet”
type – MIME type Always “text/css”
href – The URL of the linked CSS Absolute and relative URL are permitted
Slide 25
Using the <Link> Tag (Example) Link to the CSS named using a relative
directory reference
<link rel=“stylesheet" href="MainStyle.css" type="text/css" />
See ExternalStyle.htm and MainStyle.css
Slide 26
Conflict Resolution It’s possible that an inline, internal, or
external style element will conflict Styles are applied in the following order
External style sheets Embedded style sheets Inline styles
Thus, inline styles will override embedded and external styles
Slide 27
.NET and CSS Visual Studio .NET knows how to
Create cascading style sheets Create custom styles
Slide 28
Creating a CSS in .NET From an open project Click Project, Add New Item Select Cascading Style Sheet
Slide 29
Creating a CSS in .NET (Illustration)
Slide 30
CSS in .NET (Illustration)
Slide 31
CSS in .NET (Illustration)
Slide 32
Using CSS in .NET .NET validates the <link> element .NET validates the stylesheet itself Intellisense also works as you would
expect