A Very Short Introduction to CSS
A Very Short Introduction to CSS
Adding Styles to a Web Page
- Embed style information directly into an element using the style attribute
<h1 style="color: green"> Inline Styles are Sloppy Styles </h1>
<head> <title>Embedded Style Sheet Test</title> <style> ... </style> </head>
<head> <title>External Style Sheet Test</title> <link rel="stylesheet" href="SampleStyles.css"> </head>
The Anatomy of a Style Sheet
A style sheet is a text file, which you’ll usually place on a web server alongside your HTML pages. It contains one or more rules. The order of the rules doesn’t matter.
Each rule applies one or more formatting details to one or more HTML elements.
Here’s the structure of a simple rule:
selector {
property: value;
property: value;
}
- The selector identifies the type of content you want to format.
- The property identifies the type of formatting you want to apply.
- The value sets a value for the property.
h1 {
text-align: center;
color: green;
}
CSS Properties
You can get an at-a-glance overview of all the properties listed at www.htmldog.com/reference/cssproperties.
Formatting the Right Elements with Classes
To pick out specific elements, and give them distinct formatting, you need to give these elements a name with the class attribute.
For ex.,
In the Web page:
<h1 class="ArticleTitle"> HTML5 is Winning </h1>
In the style sheet:
.ArticleTitle {
font-family: Garamond, serif;
font-size: 40px;
}
Style Sheet Comments
The CSS comment start with the characters /* and end with the characters */.Structuring a Page with <div> Elements
When working with style sheets, you’ll often use the <div> element to wrap up a
section of content.
In HTML, the span and div elements are used for generic organizational or stylistic applications.Most HTML elements signify the specific meaning of their content, span and div tags signify no specific meaning besides the generic grouping of content. span and div elements are used purely to imply a logical grouping of enclosed elements. There is one difference between div and span. In standard HTML, a div is a block-level element whereas a span is an inline element. The div block visually isolates a section of a document on the page, in the same way as a paragraph. The span element contains a piece of information inline with the surrounding text.
- Multiple Selectors To define some formatting that applies to more than one element or more than one class. The trick is to separate each selector with a comma. For ex.,
h1, h2 {
font-family: Impact, Charcoal, sans-serif;
}
.Content .LeadIn {
font-variant: small-caps;
}
<div class="Content">
<p>
<span class="LeadIn">Right now</span>, you're probably feeling pretty
good.
After all, life in the developed world is comfortable ...</p>
...
</div>
#Menu {
border-width: 2px;
border-style: solid;
}
<div id="Menu">...</div>
Pseudoclass Selectors
Browsers have supported a few pseudoclasses(start with a colon) for formatting links:
- :link
- :visited
- :hover
- :active
.BackwardLink:link {
color: red;
}
.BackwardLink:visited {
color: blue;
}
<a class="BackwardLink" href="...">...</a>
Attribute Selectors
Attribute selection is a new feature offered by CSS3 that lets you format a specific type of element that also has a specific value set for one of its attributes. For example,,br>input[type="text"] {
background-color:silver;
}
A Style Sheet Tour
- <body> element This is the best place to set inherited values that you want to apply, by default, to the rest of the document.
Examples include margins, padding, background color, the font, and the width:
body {
font-family: “Lucida Sans Unicode”, “Lucida Grande”, Geneva, sans-serif;
max-width: 800px;
}
.Header {
background-color: #7695FE;
border: thin #336699 solid;
padding: 10px;
margin: 10px;
text-align: center;
}
/* CSS */
.Header h1 {
margin: 0px;
color: white;
font-size: xx-large;
}
.Header .Teaser {
margin: 0px;
font-weight: bold;
}
.Header .Byline {
font-style: italic;
font-size: small;
margin: 0px;
}
/* web page */
<div class="Header">
<h1>How the World Could End</h1>
<p class="Teaser">Scenarios that spell the end of life as we know</p>
<p class="Byline">by Ray N. Carnation</p>
</div>
.Content {
font-size: medium;
font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif;
padding-top: 20px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
line-height: 120%;
}
.Content .LeadIn {
font-weight: bold;
font-size: large;
font-variant: small-caps;
}
.Content h2 {
color: #24486C;
margin-bottom: 2px;
font-size: medium;
}
.Content p {
margin-top: 0px;
}
.Footer {
text-align: center;
font-size: x-small;
}
.Footer .Disclaimer {
font-style: italic;
}
.Footer p {
margin: 3px;
}
留言