Scribd
Upload
38 views

Lesson 4: Adding Text and Structure & Cascading Style Sheet

This document covers adding text and structure in XHTML and introduces Cascading Style Sheets (CSS). It discusses XHTML elements, text formatting, lists, importing Word documents, and the basics of CSS including selectors, the CSS styles panel, creating and applying rules. CSS allows consistent styling across pages by defining rules that can be reused through attaching an external style sheet to multiple documents.

Uploaded by

GABRIEL ZIKLIEN
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
38 views

Lesson 4: Adding Text and Structure & Cascading Style Sheet

This document covers adding text and structure in XHTML and introduces Cascading Style Sheets (CSS). It discusses XHTML elements, text formatting, lists, importing Word documents, and the basics of CSS including selectors, the CSS styles panel, creating and applying rules. CSS allows consistent styling across pages by defining rules that can be reused through attaching an external style sheet to multiple documents.

Uploaded by

GABRIEL ZIKLIEN
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Lesson 4

ADDING TEXT AND STRUCTURE & CASCADING STYLE


SHEET
Learning objectives:
Adding text and structure
• XHTML Structure
• Text Basics
• XHTML Lists and Formatting
• XHTML and Word Documents

Cascading Style Sheet


• Understand CSS
• Understanding Selector Types
• The CSS Styles Panel
• The new CSS Rule Dialogue Box
• Creating New Rules with CSS Styles Panel
• Creating Rules with Properties Inspector
• Applying Class Styles to Elements
• Editing Rules with CSS Styles Panel
• Editing Rules with Properties Inspector
• Editing Rules with Code Navigator
• Attaching CSS style sheets to pages
XHTML Structure
XHTML structure elements are considered to be either block-level elements or inline elements.
 Block Level Elements
These occupy their own line within a normal document flow and browsers usually display them this way
in their own line. Examples of block level elements include heading and paragraph tags (<h1>,<p>), and
the <div> tag that helps to define content.
 Inline Elements
These usually occur within a block-level element and are often used to identify content within that
element. Example of inline elements include the bold tag <strong> italics tag <em>, anchor tag <a>,
image tag <img> and the span <span> tag which allows styles to be added to the tagged text.
Example: <h1>Today is <strong>Monday</strong></h1>
Here <h1> is the Block level element and <strong> is the inline element which comes inside <h1> tag.
Text Basics
Text Basics
- Selecting Text
When you need to change text that has already been entered, you must first select it and then apply the appropriate
commands and tools.
- Lines and Paragraph
If you just keep typing then your text will be wrapped in a lines by Dreamweaver. However if you press enter then the lines
will placed inside the paragraph tags <p>
Entering Text
Entering text is very simple. Dreamwearver allows you to type directly into the page just as if you were using Microsoft
Word.
Structure Content
After typing your text you can simply select your text and using the properties inspector select whatever formatting you
want.
XHTML Lists and Formatting
 Ordered lists
Ordered lists also known as numbered lists, use some type of numbering system – numbers, letters, roman numerals – to
display listed items.
<ol> ordered list tag
<li> is the list item tag

 Unordered lists (bullet)


Unordered lists also known as bullet lists, use bullets or icons to denote the listed items.
<ul> Unordered list tag
<li> list item tag

 Definition lists
Definition lists displays a term followed by its definition. The properties inspector does not include a tool for this so use the
menu (Format > List > Definition List)
<dl> Definition list tag
<dt> This is the term tag
<dd> This is the definition tag
XHTML and Word Documents
Copying Text from a Word Document
You can simply copy text from word and past it into Dreamweaver given that your headings are in
the default heading styles (Heading 1 , Heading 2 etc..) and Normal for text paragraph.
Dreamweaver will recognise this and create it.
Importing a Word Document
Rather than copying and pasting selected text into a Dreamweaver page, you can simply import
an entire word document. As you do this you can simply select the formatting that is to be
retained.
(Refer to page 67 for exercise)
Understand CSS
 CSS Style Sheet
A CSS style (also known as a CSS rule) is merely a collection of formatting attributes that is then
used to style an element on the page.
 Anatomy of CSS Rule
Styles in CSS are made up of two parts:
1) Selector : Describes element that will be controlled by rule.
2) Declaration : Tells the browser that all properties contained within the braces should
be applied to the element identified by the selector.
(Refer to page 69 for example)
Understanding Selector Types
 Element(Tag) Selector
This is the most basic selector in CSS. It lets you restyle an element based on it’s HTML tag.
CSS Code XHTML Code
P{color:blue;} <p>Blue Paragraph</p>

 Class Selector
Lets you create rules that give an HTML element multiple looks. Example to format a paragraph
red and another blue:
CSS Code XHTML Code
p.blue{color:blue;} <p class=“blue”>Blua Paragraph</p>
p.red{color:red;} <p class=“red”>Blua Paragraph</p>
Understanding Selector Types cont…
 ID Selectors
- Id selectors are very similar to class selectors. Class selectors target the class attribute, while id
selectors target the id attribute.
- ID selectors are more powerful than class selectors and will override class selectors.

CSS Code XHTML Code


p#exampleID1{background-color:white} <p id=“exampleID1”>Paragraph with
white background</p>
p#exampleID2{text-transform:uppercase;} <p id=“exampleID2”>paragraph text
will be uppercase</p>
The CSS Styles Panel
The CSS styles hub acts as a central hub for everything to do with CSS in Dreamweaver.
 All View
All view gives you an overview of all CSS styles applied to the current document.
 Current View
Gives you a detailed view of the rules applied to the selected element.
The new CSS Rule Dialogue Box
There are different ways of creating a new CSS Styles Rule which we will look at shortly which are:
1. CSS Styles Panel
2. Properties Inspector

Whichever method you employ to create a new CSS rule the new CSS Rule dialouge box will open.
Components of the CSS Rule Dialogue Box
Selector Type
You can choose one of four selector types depending on the rule you are creating.
Selector Name
Name will depend on which selector type you choose
Rule Definition
◦ The location where you will store the rule.
Applying Class Styles to Elements
After creating your new CSS rules you to apply them in your elements you must specify that in
each tag for the associated attribute.

Example:
You can create a class called “test” but to use it you must specify that in the class attribute for
whichever element you want to use it for.

<p class=“test”>This paragraph will be set to class test</p>


Attaching CSS style sheets to pages
 Once you have created an external CSS style sheet you can quickly link it to other pages in
your site. All tag and ID selectors will be automatically applied to pages, leaving you to manually
apply class rules only as required.
 By using style sheet you keep all your CSS code in one file which prevents duplication of code
and helps maintain a consistent look across your site.
 To attach CSS style sheet do the following:
CSS Style Panel > Attach Style Sheet (chain icon)
Summary
 XHTML structure elements are considered to be either block-level elements or inline
elements.
If you will be using similar formatting for elements in your web pages it is best to create CSS
rules and use them throughout you site.

You might also like