HTML BASIC
Introduction
to CSS
Using
External CSS:
<link>
The <link> element
can be used in an HTML document to tell the browser where to find the CSS file
used to style the page. It is an empty element (meaning it does not need a closing tag), and it lives inside
the <head> element. It should use three attributes:
href
This specifies the path to the
CSS file (which is often placed in a folder called css or styles).
type
This attribute
specifies the type of document being linked to. The value should be text/css.
rel
This specifies the relationship
between the HTML page and the file it is linked to. The value should be stylesheet
when linking to a CSS file. An HTML page can use more than one CSS style
sheet. To do this it could have a <link> element for every CSS
file it uses. For example, some authors use one CSS file to control the
presentation (such as fonts and colors) and a second to control the layout
Example:
<!DOCTYPE html>
<html>
<head>
<title>Using External CSS</title>
<link href="css/styles.css"
type="text/css"
rel="stylesheet" />
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of different
potato
varieties. They are usually described as
early, second early and
maincrop.</p>
</body>
</html>
Using
Internal CSS:
<style>
You can also
include CSS rules within an HTML page by placing them inside a <style>
element, which
usually sits inside the <head> element of the page. The <style>
element should use
the type attribute
to indicate that the styles are specified in CSS. The value should be text/css.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Using Internal CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of different
potato
varieties. They are usually described as
early, second early and main crop.</p>
</body>
</html>
CSS Selectors:
There are many different types
of CSS selector that allow you to target rules to specific elements in an HTML
document. The table on the opposite page introduces the most commonly used CSS
selectors. On this page, there is an HTML file to demonstrate which
elements these CSS selectors
would apply to. CSS selectors are case sensitive, so they must match element
names and attribute values exactly.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
</head>
<body>
<h1 id="top">Kitchen Garden Calendar</h1>
<p
id="introduction">Here
you can read our
handy guide about what to do
when.</p>
<h2>Spring</h2>
<ul>
<li><a
href="mulch.html">
Spring mulch vegetable beds</a></li>
<li><a
href="potato.html">
Plant out early potatoes</a></li>
<li><a
href="tomato.html">
Sow tomato seeds</a></li>
<li><a
href="beet.html">
Sow beet seeds</a></li>
<li><a
href="zucchini.html">
Sow zucchini seeds</a></li>
<li><a
href="rhubarb.html">
Deadhead rhubarb flowers</a></li>
</ul>
<p class="note">
This page was written by
<a
href="mailto:ivy@example.org">
ivy@example.org</a> for
<a
href="http://www.example.org">Example</a>.
</p>
<p>
<a href="#top">Top of page</a>
</p>
</body>
</html>
How CSS Rules Cascade:
If there are two or more rules
that apply to the same element, it is important to understand which will take
precedence.
LAST RU LE
If the two selectors are
identical, the latter of the two will takeprecedence. Here you can see
the second i selector takes
precedence over the first.
SPECIFICITY
If one selector is more specific
than the others, the more specific rule will take precedence
over more general ones. In this
example:
h1 is more specific than *
p b is more specific than p
p#intro is more specific
than p
IMPORTANT
You can add !important after
any property value to indicate that it should be considered more important than
other rules that apply to the same element. Understanding how CSS rules
cascade means you can write
simpler style sheets because you can create generic rules that apply to most
elements and then override the properties on individual elements that need to
appear differently.
Example:
<h1>Potatoes</h1>
<p id="intro">There
are <i>dozens</i> of different <b>potato</b>
varieties.</p>
<p>They are usually described as
early, second early and maincrop potatoes.</p>
* {
font-family: Arial, Verdana, sans-serif;}
h1 {
font-family: "Courier New", monospace;}
i {
color: green;}
i {
color: red;}
b {
color: pink;}
p b {
color: blue !important;}
p b {
color: violet;}
p#intro {
font-size: 100%;}
p {
font-size: 75%;}
Inheritance
you specify the font-family or
color properties on the <body> element, they will apply to
most child elements. This is because the value of the font-family property
is inherited by child elements. It saves you from having to apply these
properties to as many elements (and results in simpler style sheets). You can
compare this with the background-color or border properties; they
are not inherited by child elements. If these were inherited by all
child elements then the page could look quite messy. You can force a lot of
properties to inherit values from their
parent elements by using inherit
for the value of the properties. In this example, the
<div> element with a class called page inherits
the padding size from the CSS rule that
applies to the <body> element
Example:
<div
class="page">
<h1>Potatoes</h1>
<p>There are dozens of different potato
varieties.</p>
<p>They are usually described as early, second
early and maincrop potatoes.</p>
</div>
HTML
body {
font-family: Arial, Verdana,
sans-serif;
color: #665544;
padding: 10px;}
.page {
border: 1px solid #665544;
background-color: #efefef;
padding: inherit;}
BrowserCam.com
BrowserLab.Adobe.com
BrowserShots.org
CrossBrowserTesting.com
CSS rules
usually appear in a separate document, although they may appear within an HTML
page.
Declarations
are made up of two parts: the properties of the element that you want to
change, and the values of those properties. For example, the font-family
property sets the choice of font, and the value arial specifies Arial as the
preferred typeface.
Color
Ø How to specify Color
Ø Color Terminology and Contrast
Ø Background Color
Foreground
Color
The color property allows
you to specify the color of text inside an element. You can specify any color
in CSS in one of three ways:
rgb
values
These express colors in terms of
how much red, green and blue are used to make it up. For example: rgb(100,100,90)
hex codes
These are six-digit codes that
represent the amount of red, green and blue in a color, preceded by a pound or
hash # sign. For example: #ee3e80
color names
There are 147 predefined color
names that are recognized by browsers. For example:
DarkCyan We look at these three different ways of specifying
colors on the next double-page spread.
Example:
/* color name */
h1 {
color: DarkCyan;}
/* hex code */
h2 {
color: #ee3e80;}
/* rgb value */
p {
color: rgb(100,100,90);}
Background
Color
CSS treats each HTML elementas
if it appears in a box, and thebackground-color property
sets the color of the background
for that box. You can specify your choice of background color in the same three
ways you can specify foreground colors: RGB values, hex codes, and color names
(covered on the next page). If you do not specify a background color, then the
background is transparent. By default, most browser windows have a white
background, but browser users can set a background color for their windows, so
if you want to be sure that the background is white you can use the background-color
property on
the <body> element.
Example:
body {
background-color:
rgb(200,200,200);}
h1 {
background-color: DarkCyan;}
h2 {
background-color: #ee3e80;}
p {
background-color: white;}
No comments:
Post a Comment