CMPT165-CSS.docx

58 views5 pages
CSS
•Stylesheets are used to specify the appearance (style) of a web page
•They can specify what each <h1>, <h2>, <p>, etc. looks like
•They are saved with a .css file extension, and they can be applied to any HTML file
•To specify a style for all <h2> tags, you write something like this
h2
{ color: #00A651;
}
•And, similarly for all <p> tags
p
{ background-color: #8C6239;
}
•Also note how the stylesheet is connected to the HTML file:
<link rel="stylesheet" type="text/css" href="choc.css">
•The <link> tag must go in an HTML file's header that is, as contents of the <head> tag
<head>
<link rel="stylesheet" type="text/css" href="choc.css">
</head>
•The <link> tag has three required attributes:
-rel ("relationship"): specifies the relationship of the linked file to the HTML page (stylesheet in
this case)
-type the MIME type (always text/css for stylesheets)
-href the file name for the stylesheet
•The order of the attributes within the <link> tag doesn't matter
CSS Properties
•There are dozens of CSS properties such as
-color (font colour)
-background-color
-font-family
-font-size
-etc
•font-style
-Possible values: normal (default) or italic
-italic has the same effect as the <i> tag
E.g. font-style: italic;
•font-weight
-Possible values: normal (default) or bold
-bold has the same effect as the <b> tag
E.g. font-weight: bold;
•text-decoration
-Possible values: none (default), underline, overline, line-through
-underline has the same effect as the <u> tag
Unlock document

This preview shows pages 1-2 of the document.
Unlock all 5 pages and 3 million more documents.

Already have an account? Log in
•text-align
-Possible values: left (default), right, center, justify
•You can use font/text properties to change the style of HTML links (<a>)
•Links, unlike other HTML tags, have different states
-link (a normal, unvisited link)
-visited (a link to a page you've visited)
-hover (a link that has the mouse over it)
-active (a link that has just been clicked)
E.g. (link.css)
a:link
{ color: blue;
}
a:visited
{ color: green;
}
a:hover
{ color: brown;
}
a:active
{ color: red;
}
The order here is important
•You can apply any combination of properties to the <a> tag and its four states however, the
best properties to change are color, background-color and text-decoration (specifically,
underline)
-To remove the <a> tag's default underlining, use text-decoration: none;
•You can put background images in your pages with the background-image property
E.g. body
{ background-image: url("surgeBarrier.jpg");
}
•The URL here can be relative or absolute
•If the image file is smaller than the browser window size, it will be tiled (repeated) horizontally
and/or vertically
•height and width can be used to set the size of most block-level elements
E.g. p
{ width: 50%;
height: 100px;
background-color: green;
}
•With CSS, you can put borders around most elements (both block-level and inline)
•There are three main border properties
-border-width
-border-color
-border-style
Unlock document

This preview shows pages 1-2 of the document.
Unlock all 5 pages and 3 million more documents.

Already have an account? Log in

Get OneClass Notes+

Unlimited access to class notes and textbook notes.

YearlyBest Value
75% OFF
$8 USD/m
Monthly
$30 USD/m
You will be charged $96 USD upfront and auto renewed at the end of each cycle. You may cancel anytime under Payment Settings. For more information, see our Terms and Privacy.
Payments are encrypted using 256-bit SSL. Powered by Stripe.