Presentation is loading. Please wait.

Presentation is loading. Please wait.

Today CSS HTML A project.

Similar presentations

Presentation on theme: "Today CSS HTML A project."— Presentation transcript:

1 Today CSS HTML A project

2 The Breakdown All web pages can be broken down into bucketized content areas These areas can updated by changing the code on every page, - or - By using cascading style sheets!

3 Advantages of Style Sheets
Saves time Easy to change Keep consistency Give you more control over layout Use styles with JavaScript => DHTML Make it easy to create a common format for all the Web pages

4 Applying a single style sheet to multiple documents

5 Basic Structure of a Style
Each definition contains: A property A colon A value A semicolon to separate two or more values Can include one or more values h1 {font-size:12pt; color:red}

6 Style Precedence External style sheet Embedded styles Inline styles

7 Three Style Types Inline styles Example
Add styles to each tag within the HTML file Use it when you need to format just a single section in a web page Example <h1 style=“color:red; font-family: sans-sarif”>IU</h1>

8 Three Style Types Embedded or internal styles Example
A style is applied to the entire HTML file Use it when you need to modify all instances of particular element (e.g., h1) in a web page Example <style> h1 {color:red; font-family:sans-serif} </style>

9 Creating an Embedded Style
<head> <title>Embedded Example</title> <style> (default is “text/css”) Style declarations </style> </head> A style declaration: Selector {attribute1:value1; attribute2:value2; …} Selector = an element in a document (e.g., a header or paragraph)

10 An Example of an embedded style (p. 353 Fig 7-2)
<head> <title>Getting Started</title> <style type=“text/css”> h1 {font-family: sans-serif; color: organge} </style> </head>

11 Three Style Types External style sheets Example
An external style sheet is a text file containing the style definition (declaration) Use it when you need to control the style for an entire web site Example h1, h2, h3, h4, h5, h6 {color:red; font-family:sans-serif} Save this in a new document using a .css extension

12 Creating an External Style Sheet
Open a new blank document in Notepad Type style declarations h1 {color:red; font-family:sans-serif;} Do not include <style> tags Save the document as filename.css

13 Linking to Style Sheets 1
Open an HTML file Between <head> and </head> add <link href=URL rel=“relation_type” type=“link_type”> URL is the file.css Relation_type=“stylesheet” Link_type=“text/css” Save this file and the .css file in the same web server directory

14 An example of an external style sheet with an original html file
<head> <title>Getting Started</title> <link href=“scraps.css” rel=“stylesheet” type=“text/css” /> </head> h1 {font-family: sans-serif; color: orange} b {color: blue} Text file of css named “stylesheet” html file

15 Style Sheet Strategies
Wherever possible, place your styles in external style sheets Take advantage of the power of CSS to have control over an entire Web site

16 Using IDs and Classes Use an id to distinguish something, like a paragraph, from the others in a document. For example, to identify a paragraph as “head”, use the code: <p id=“head”>… </p>

17 Working With Ids To create an ID for a specific tag, use the property:
<tag ID=id_name> To apply a style to a specific ID, use: #id_name {style attributes and values}

18 Classes HTML and XHTML require each id be unique– therefore an id value can only be used once in a document. You can mark a group of elements with a common identifier using the class attribute. <element class=“class”> … </element>

19 Applying a style to a class

20 Working With Classes To create a class, enter the following in the HTML tag: <tag CLASS=class_name> <h1 CLASS=FirstHeader>IU</h1> class_name is a name to identify this class of tags To apply a style to a class of tags, use: tag.class_name {style attributes} or .class_name {style attributes}

21 Working With Classes and Ids
The difference between the Class property and the ID property is that the value of the ID property must be unique: you can’t have more than one tag with the same ID value You can apply the same Class value to multiple document tags

22 Working With DIV <DIV> tag is used for blocks of text, e.g., paragraphs, block quotes, headers, or lists To create a container for block-level elements, use: <DIV CLASS=class_name> Block-level elements </DIV> Class_name is the name of the class You can substitute the ID proper for the Class property (with ID, the syntax for CSS style, #id_name {style attributes and values}

23 Working With <DIV>
DIV.Slogan {font-weigh:bold} style Maxwell…: “We teach… Resulting text <DIV CLASS=Slogan>Maxwell Scientific’s new Slogan is:<BR>”We teach science”</DIV> HTML code

24 Working With <span>
With the <span> tag, you can use inline elements, e.g., <B>, <I> To create a container for inline elements, use: <span CLASS=class_name> inline elements </span>

25 CSS for Page Layout CSS manipulates the size and location of block-level elements Block-level elements in HTML: Heading tags, e.g., <H1>, <H2> <p> <blockquote> and <address> tags List tags, e.g., <ul>, <ol>, <dl> <div> <body> <hr> <img>

26 CSS for Page Layout Parts of the block-level elements: Margin Border

27 CSS for Page Layout (Carey, 7.49)
I appreciate the prompt delivery of the pack of star disks. padding border margin

28 Controlling the Margins
To define the margins of an element, use: margin:value where value = a length value (“em” is often used), a percentage (a margin proportional to the element’s width, or auto

29 Controlling the Margins
To set margins on a side, use: margin-top margin-right margin-bottom margin-left E.g., LI {margin-left:2em; margin-right:2em; margin-top:1em; margin-bottom:1em}

30 Setting the Padding Size
To define padding, use: padding: value where value = a length value or a percentage (a padding proportional to the element’s width)

31 Setting the Padding Size
To set margins on a side, use: padding-top padding-right padding-bottom padding-left

32 Formatting the Border Border can be set in three ways: border-width
border-style border-color

33 Formatting the Border To set the border, use:
border:width_value style color To set borders on a side, use: border-top border-bottom border-left border-right Carey

34 Formatting Width & Height of Block-Level Boxes
To set the width of a block-level element, use: width:value height:value where value can be a length value, a percentage, or auto E.g., textarea {width:225px; height:100px}

35 Using the Float Attribute (p. 371-372)
To float (wrap) a block-level element, use: float:margin Where margin = right, left, none To prevent an element from wrapping, use: Clear:margin Where margin=right, left, both, none

36 Using the Float Attribute
float:right width:50px clear:right float:right width:50px

37 Formatting Hypertext Links
To remove the style of underlining hypertext, use: A {text-decoration:none} 4 types of hyperlinks can be modified: A:visited {styles for previously visited links} A:link {styles for links that have never visited} A:active {styles for links that are currently being clicked} A:hover {styles when the mouse cursor is hovering over the link}

Download ppt "Today CSS HTML A project."

Similar presentations

Ads by Google