Embed Size (px)
Citation preview
CSS2
Typography and page layout is better
controlled • Font Size
• Line Spacing
• Letter Spacing
• Indents
• Margins
• Element Positioning
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
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
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.
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
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}
Background-color, color, font-family, font-
size, font-style, font-weight, line-height,
margin, margin-left, margin-right, text-
align,
text-decoration, width
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
<h1 style=“color:#cc0000”>This heading is
red</h1>
<p style=“background-
color:green;color:white”>This paragraph is
using an inline style.</p>
<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>
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
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
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.
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>
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>
<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.
<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 />
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”
/>
![Format.docx · Web viewResults and Discussion [Times New Roman, font size: 12] Main document text size: 11, Times New Roman Explain about the simulation models and simulation software](https://img.dokumen.tips/doc/110x75/5eb967d4a36b8d04b849168b/formatdocx-web-view-results-and-discussion-times-new-roman-font-size-12-main.jpg)
