typography and page layout is better controlled georgia, “times new roman”, serif;} p...
TRANSCRIPT
![Page 1: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/1.jpg)
CSS2
![Page 2: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/2.jpg)
Typography and page layout is better
controlled • Font Size
• Line Spacing
• Letter Spacing
• Indents
• Margins
• Element Positioning
![Page 3: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/3.jpg)
Style is separate from structure • Text and color formatting can be configured and
stored separately from the body section of the
Web page document. This helps with
accessibility.
Styles can be stored • If the styles need to be modified, you only need
to change in one place, the CSS document. The
XHTML document remains intact.
Keeps the document size smaller and
less cluttered with code
Site maintenance is easier
![Page 4: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/4.jpg)
Inline • Style that is coded in the body of the Web page
• The style can only apply to the specific element
which contains it as an attribute
Embedded • Defined in the header of a Web page.
• The style applies to the entire Web document
![Page 5: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/5.jpg)
External • Styles are coded in a separate text file.
• Is associated with the Web page using a <link />
element in the header section.
Imported • Similar to external
• Uses the @import directive to import into
embedded styles or into another external style
sheet.
![Page 6: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/6.jpg)
Body {color: blue; background-color: yellow;}
• Or using Hexadecimal color references:
Body {color:#0000FF; background-
color:#FFFF00;}
Notice that both the background and text
colors were configured to avoid varied results
caused by default browser colors.
This is a recommended W3C practice
![Page 7: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/7.jpg)
CSS can be used to modify text
decoration
A link can have the underline removed
with CSS with the simple following code: • a {text-decoration: none}
![Page 8: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/8.jpg)
Background-color, color, font-family, font-
size, font-style, font-weight, line-height,
margin, margin-left, margin-right, text-
align,
text-decoration, width
![Page 9: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/9.jpg)
Color can be indicated as a: • Name……………..color:blue
• Hexadecimal…..color:#FFCCFF
• RGB………………..color:rgb(255,0,0)
For a hexadecimal color with like pairs,
you can apply a shorthand. The following
codes are equivalent: • Color:#FF0000
• Color:#F00
![Page 10: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/10.jpg)
<h1 style=“color:#cc0000”>This heading is
red</h1>
<p style=“background-
color:green;color:white”>This paragraph is
using an inline style.</p>
![Page 11: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/11.jpg)
<html>
<head>
<title>Embedded Styles</title>
<style type=“text/css”>
body {background-color: #CCFFFF; color: #000033;}
</style>
</head>
<body>
<h1>Embedded Styles</h1>
</body>
</html>
![Page 12: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/12.jpg)
This sets the size of the font and can use a
variety of text and numeric values. • xx-small, x-small, small, medium, large, x-large, xx-
large
• Pixel units, i.e. 12px
• Points, i.e. 12 pt
• Percentages, i.e. 150%
• em, i.e. 1 em
![Page 13: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/13.jpg)
A way to configure font typefaces, and
goes from specific to generic to
accommodate different computers. • font-family:Arial, Verdana, sans-serif
• If the computer has Arial installed, it will use
that, if not, it will use Verdana, if not installed, it
will use the default sans-serif font that is
available to the system.
• Serif, sans-serif, monospace, cursive, fantasy
![Page 14: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/14.jpg)
Styles can be applied to selectors:
h2 {background-color:#AEAED4;
color:#191970; font-
family: Georgia, “Times New Roman”, serif;}
p {font-size: .90em;}
ul{font-weight: bold;}
Quotes were added to Times New Roman
because there were spaces in the font name.
![Page 15: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/15.jpg)
When you want to apply a CSS rule to a
particular class of elements and not tie the
style to a certain tag, use a class selector.
When setting a style for a class, configure the
class name as the selector. Place a dot in front
of the class name in the style sheet.
.nav {font-weight: bold; font-size: 1.25em;}
To apply:
<p class=“nav”>This content is displayed using the styles
in the nav class.</p>
![Page 16: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/16.jpg)
Use the id selector when identifying and applying a CSS rule specifically to a single area on the Web page.
When setting a style for an id, place the hash mark (#) in front of the id name in the style sheet.
#footer { font-size: .75em; font-style: italic;}
To apply the style in the Web page:
<p id=“footer”>This paragraph will be displayed using styles configured in
the footer id.</p>
![Page 17: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/17.jpg)
<div> configures a section with a line
break above and below. This creates a
section that is separated from the rest of
the Web page.
<div> is used to define sections that
contain block level elements • <p>, <blockquote>, <ul>, <ol>, other <div>
elements.
![Page 18: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/18.jpg)
<span> defines a section that is not
physically separated from another area.
Use <span> if you need to format an area
that is contained within another • <p>, <blockquote>, <li> or <div> element.
<div> is similar to a paragraph(<p>)
while <span> is similar to a break<br />
![Page 19: Typography and page layout is better controlled Georgia, “Times New Roman”, serif;} p {font-size: .90em;} ul{font-weight: bold;} Quotes were added to Times New Roman because there](https://reader031.vdocuments.net/reader031/viewer/2022030509/5ab96b7e7f8b9aa6018ddab8/html5/thumbnails/19.jpg)
External style sheets are contained in a
separate text file.
Use a <link /> element in the header of
the HTML document to associate the style
sheet with the Web page.
The external style sheet is always saved
with a .css file extension.
<link rel=“stylesheet” href=“color.css” type = “text/css”
/>