CSS Concepts
Why Use CSS?
Three places to put style commands
What Can CSS Control?
How To Link To An External CSS
· Save as filename.css
· Reference .CSS in <head> of .HTM(s)
Sample code:
· <head>
<link rel="stylesheet"
href
How To Add Styles To An HTML Tag
· Within a tag's < >, code an
attribute = "value" pair defining style characteristics
<h1 style = "font: small-caps bold italic; font-family: 'Verdana, Arial, sans-serif'; color: #008080; text-align: center;">Department</h1>
<p style = "font-family: Times;
color: #800000; font-weight: bold;">
The paragraph starts from here...</p>
- Cascading Style Sheets (CSS) is a style sheet language.
- Styles are named sets of formatting commands.
- Style sheets are control documents that are referenced by content documents like MSword,doc etc.
- Its most common application is to style web pages written in HTML and XHTML.
- CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element.
- CSS style information can be in a separate document or it can be embedded into an HTML document.
Why Use CSS?
- Separate format from content.
- Enforce consistency.
- Greatly simplify control & maintenance.
Three places to put style commands
- External: Affects all documents it's attached to.
- Internal: Affects only document it appears in.
- Inline: Affects only text it's applied to.
What Can CSS Control?
- It can control Page background.
- It controls colors, images, fonts and text, margins and spacing, headings.
- It controls positioning, links, lists, tables, cursors, etc.
- Rules have two basic parts: selector and declaration.
- Declaration also has two parts: property and value.
- Selector tells the rule what to modify.
- Declaration tells the rule how to modify it.
- In a separate .CSS file ,affects all pages to which it is linked
- CSS referenced by pages with <link> tag.
- In the <head> of an .HTM page.
- Affects only page in which it appears.
- Rules are coded in <style></style> container.
How To Link To An External CSS
· Save as filename.css
· Reference .CSS in <head> of .HTM(s)
Sample code:
· <head>
<link rel="stylesheet"
href
How To Add Styles To An HTML Tag
· Within a tag's < >, code an
attribute = "value" pair defining style characteristics
<h1 style = "font: small-caps bold italic; font-family: 'Verdana, Arial, sans-serif'; color: #008080; text-align: center;">Department</h1>
<p style = "font-family: Times;
color: #800000; font-weight: bold;">
The paragraph starts from here...</p>