Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

484 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

14Dynamic HTML: Cascading Style Sheets™ (CSS)

1 2 34 5 67 Inline Styles 89

1011

Here is some text
1213 14 15
Here is some more text
16
Even more text

1718 19

Fig. 14.1 Inline styles .

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 485


1 2 34 5 67 8 Style Sheets 9

10 11 1213 EM { background-color: #8000FF ;14 color: white } 1516 H1 { font-family: Arial, sans-serif }1718 P { font-size: 18pt }1920 .blue { color: blue } 2122 23 2425 2627 28 A Heading 29

Here is some text. Here is some text. Here is some text.30 Here is some text. Here is some text.
3132 Another Heading 33
Here is some more text. Here is some more text.34 Here is some more text. Here is some more text.

3536 37

Fig. 14.2 Declaring styles in the header section of a document (part 1 of 2).



Fig. 14.2 Declaring styles in the header section of a document (part 2 of 2).



1 2 34 5 67 8 More Styles 9

1011 A.nodec { text-decoration: none }1213 A:hover { text-decoration: underline ;14 color: red ;15 background-color: #CCFFCC }1617 LI EM { color: red ;18 font-weight: bold }1920 UL { margin-left: 75px }2122 UL UL { text-decoration: underline ;23 margin-left: 15px }2425 26 2728 2930 Shopping list for Monday: 31 32 Milk 33 Bread34 35 White bread 36 Rye bread 37 Whole wheat bread 38 39 Rice 40 Potatoes 41 Pizza with mushrooms 42 4344

Go to the Grocery45 store

4647 48

Fig. 14.3 Inheritance in style sheets (part 1 of 2).



1 A { text-decoration: none }23 A:hover { text-decoration: underline ;4 color: red ;5 background-color: #CCFFCC }67 LI EM { color: red ;8 font-weight: bold }9

10 UL { margin-left: 2cm }1112 UL UL { text-decoration: underline ;13 margin-left: .5cm }

Fig. 14.4 An external style sheet (styles.css ).

Fig. 14.3 Inheritance in style sheets (part 2 of 2).

Hovering over a link



1 2 34 5 67 8 Importing style sheets 9

10 1112 1314 Shopping list for Monday: 15 16 Milk 17 Bread18 19 White bread 20 Rye bread 21 Whole wheat bread 22 23 Rice 24 Potatoes 25 Pizza with mushrooms 26 2728 Go to the Grocery store 2930 31

Fig. 14.5 Linking an external style sheet.



1 2 34 5 67 8 Absolute Positioning 9

1011 1213 15 Positioned Text 17 1920 21

Fig. 14.6 Positioning elements with CSS .



1 2 34 5 67 8 Relative Positioning 9

10 1112 P { font-size: 2em;13 font-family: Verdana, Arial, sans-serif }1415 SPAN { color: red ;16 font-size: .6em ; 17 height: 1em }1819 .super { position: relative ;20 top: -1ex }2122 .sub { position: relative ;23 bottom: -1ex }2425 .shiftl { position: relative ;26 left: -1ex }2728 .shiftr { position: relative ;29 right: -1ex }30 31 3233 3435

36 Text text text text superscript 37 text text text text subscript 38 text Text text left-shifted 39 text text text right-shifted 40 Text text text text text 41

4243 44

Fig. 14.7 Relative positioning of elements (part 1 of 2).



Fig. 14.7 Relative positioning of elements (part 2 of 2).



1 2 34 5 67 8 Background Images 9

10 1112 BODY { background-image: url(watermark.gif) ;13 background-position: bottom right ;14 background-repeat: no-repeat ;15 background-attachment: fixed }1617 P { font-size: 2em;18 color: #AA5588;19 text-indent: 1em;20 font-family: Arial, sans-serif }2122 .dark { font-weight: bold }2324 25 2627 2829

30 This is some sample text to fill in the page. 31 This is some sample 32 text to fill in the page. 33 This is some sample text to fill in the page.34 This is some sample text to fill in the page.35 This is some sample text to fill in the page.36 This is some sample text to fill in the page.37

3839 40

Fig. 14.8 Adding a background image with CSS (part 1 of 2).



Fig. 14.8 Adding a background image with CSS (part 2 of 2).

Background image



1 2 34 5 67 8 Box Dimensions 9

1011 DIV { background-color: #FFCCFF;12 margin-bottom: .5em }1314 15 1617 1819 Here is some20 text that goes in a box which is21 set to stretch across twenty precent 22 of the width of the screen. 2324 25 Here is some CENTERED text that goes in a box 26 which is set to stretch across eighty precent of 27 the width of the screen. 2829 30 This box is only twenty percent of31 the width and thirty percent of the height.32 What do we do if it overflows? Set the33 overflow property to scroll! 3435 36

Fig. 14.9 Setting box dimensions and aligning text (part 1 of 2).



Fig. 14.9 Setting box dimensions and aligning text (part 2 of 2).



1 2 34 5 67 8 Flowing Text Around Floating Elements 9

1011 DIV { background-color: #FFCCFF;12 margin-bottom: .5em ;13 font-size: 1.5em ;14 width: 50% }1516 17 1819 2021 Centered text 22 Right-aligned text 2324 This is some floated25 text, floated text, floated text, floated text. 26

27 Here is some flowing text, flowing text, flowing text.28 Here is some flowing text, flowing text, flowing text.29 Here is some flowing text, flowing text, flowing text.30 Here is some flowing text, flowing text, flowing text.31 Here is some flowing text, flowing text, flowing text.32 Here is some flowing text, flowing text, flowing text.33 Here is some flowing text, flowing text, flowing text.34 Here is some flowing text, flowing text, flowing text.35
3637
This is some floated38 text, floated text, floated text, floated text. 39 Here is some flowing text, flowing text, flowing text.40 Here is some flowing text, flowing text, flowing text.41 Here is some flowing text, flowing text, flowing text.42 Here is some unflowing text.43 Here is some unflowing text. 44

4546 47

Fig. 14.10 Floating elements, aligning text and setting box dimensions (part 1 of 2).



Fig. 14.10 Floating elements, aligning text and setting box dimensions (part 2 of 2).

.5 em margin

.5 em padding



Fig. 14.11 Box model for block-level elements.

Margin

Border

Padding



1 2 34 5 67 8 Borders 9

1011 BODY { background-color: #CCFFCC }1213 DIV { text-align: center ;14 margin-bottom: 1em;15 padding: .5em }1617 .thick { border-width: thick }1819 .medium { border-width: medium }2021 .thin { border-width: thin }2223 .groove { border-style: groove }2425 .inset { border-style: inset }2627 .outset { border-style: outset }2829 .red { border-color: red }3031 .blue { border-color: blue }3233 34 3536 3738 This text has a border 39 This text has a border 40 This text has a border 4142

A thin red line...
43
And a thicker blue line

4445 46

Fig. 14.12 Applying borders to elements (part 1 of 2).



Fig. 14.12 Applying borders to elements (part 2 of 2).



1 2 34 5 67 8 Borders 9

10 1112 BODY { background-color: #CCFFCC }1314 DIV { text-align: center ;15 margin-bottom: .3em ;16 width: 50%;17 position: relative ; 18 left: 25%;19 padding: .3em }20 21 2223 2425 Solid border 26 Double border 27 Groove border 28 Ridge border 29 Inset border 30 Outset border 31 32

Fig. 14.13 Various border-style s.



1 2 34 5 67 8 User Styles 9

10 1112 .note { font-size: 1.5em }1314 15 1617 1819

Thanks for visiting my Web site. I hope you enjoy it.
20
Please Note: This site will be moving soon.21 Please check periodically for updates.

2223 24

Fig. 14.14 Modifying text size with the em measurement.



Fig. 14.15 Adding a user style sheet in Internet Explorer 5.



1 BODY { font-size: 20pt ;2 background-color: #CCFFCC }3 A { color: red }

Fig. 14.16 A sample user style sheet.



Fig. 14.17 A Web page with user styles enabled.

Date post:	01-Jun-2020
Category:	Documents
Author:	others
View:	19 times
Download:	8 times

Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Documents

CSS (Cascading Style Sheet). What Is CSS? HTML tags allow mixing of: HTML tags allow mixing of: Structures (e.g., list, table, form) Structures (e.g.,

HTML and CSS - Andar Software · Basic Hypertext Markup Language (HTML) and Cascading Stylesheets (CSS) 5 2018.01 Revised 4/2018 HTML Editors HTML can be created or edited in many

HTML and CSS - englishonlineclub.comenglishonlineclub.com › pdf › HTML and CSS - Training...Basic Hypertext Markup Language (HTML) and Cascading Stylesheets (CSS) 15 2018.01 Revised

CSS – Cascading Style Sheets. Styling HTML with CSS CSS stands for Cascading Style Sheets Styles can be added to HTML in 3 ways – Inline - using a style.

CSS: Cascading Style Sheets - elite.polito.it · Summary •Introduction •CSS syntax •CSS selectors •CSS cascading •CSS box model •CSS positioning schemes •Page layout

1 CSS (Cascading Style Sheet) English for ICT. 2 HTML vs. CSS HTML can be used to indicate both semantic of document and its presentation It is advisable.

Creating a Website Using CSS - Mesa Public Schools...CREATING A WEBSITE USING CSS Mrs. Procopio CTEC6 –MYP1 HTML VS. CSS HTML –Hypertext Markup Language CSS –Cascading Style

Subject: Web Programming Topic : Cascading Style Sheets ......CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other

Introduction to Cascading Style Sheet (CSS)lin/CPET499-ITC250/2017-Fall/1...The web standards model – HTML, CSS, and JavaScript, : Most compelling reasons for using CSS and HTML

1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties.

1 HTML-CSS-XHTML. 2 HTML: HyperText Markup Language (Markup balisage). Sert à structurer les pages html4.01 XHTML: eXtensible HTML xhtml 1.0 CSS: Cascading.

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.

CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ

HTML 5/CSS 3/Javascript - dept-info.labri.frdept-info.labri.fr/~beurton/Enseignement/PI/CSS-en.pdfCSS Dé nition (CSS) CSS( Cascading Style Sheets , isa language allowing description

HTML ( Hypertext MarkUP Language - eecs.csuohio.edueecs.csuohio.edu/~sschung/CIS408/LectureNotes_webtechCMU.pdf · HTML (Hypertext MarkUP Language) ... CSS (Cascading Style Sheet)

Dynamic HTML (DHTML) combines 3 technologies: Cascading Style Sheets (CSS) refines HTML formatting and provides better control over positioning and layering.

CSS - Cascading Style Sheets. What is CSS ? css defines how to display an html document (fonts, colors, layouts etc.) were added to HTML 4.0 specification.