A style
sheet is a list of codes that describe how webpages appear on screens.
Ex:
<head>
<title> Style Sheet
Example </title>
<style type=”text/css”>
<!--
Body {background: #ffffd8; margin-top: 20}
A:link {color: #400080; background: #ffffd8}
H1 {font-weight: bold; text-align: center;
color: #006000; background:
#ffffd8;
face-family: ‘Gill Sans, Arial,
sans-serif}
Cite {font-style: italic}
-->
</style>
</head>
|
You can place
these codes in 3 different places:
Inline
|
you
write codes within HTML tags < >. Their effects therefore apply very
locally within that single page’s contents
|
Embedded
|
you
write codes between the <head> </head> tags. The effect applies
throughout that single page
|
Linked/External
|
You write codes in a separate file and
then link sheets to it
|
If there
are linked style sheets that govern an entire website but a single page has an embedded style sheet, the application is
cascaded down to the embedded style sheet.
In other words, style sheets that are closest are those with greatest effect.
--
--
Key Advantages of using CSS
It allows a
consistent look throughout a website or webpage. For instance, if you
want certain characteristics to appear repeatedly, you need to create the
relevant codes only once when you use CSS.
Since you
could control the look of your entire website from a separate location (ie an
external style sheet), maintenance of an entire website with CSS is very easy.
Imagine your 500-page website that needs to get some formatting changed on each
page!
Syntax
Attributes
(ex: color, etc …) are called “properties” when talking about CSS.
After a property, use COLON and then 0 SPACES
Ex inline
style sheets: <p
style="color:olive;"> HELLO </p>
To separate
multiple attributes, use SEMICOLON then 1 SPACE
Ex: <p style="color:olive;font-size:24px;"> HELLO </p>
Remember
that regular HTML uses quotation marks when applying values. Only when using
styles within HTML should quotation marks be applied. Note however that STYLE
is the attribute. Same thing really, ie STYLE=”….”. For purer embedded and
linked versions, quotation marks are not used.
Note too
that selectors usually comprise of HTML tags.
Example
|
Application
|
Selector Property:
value
Property: value
<p style="color:olive;font-size:24px;"> Text goes here </p>
|
INLINE style sheets
|
H1 {color:
blue; text-align:center}
|
EMBEDDED style sheets
|
You can even spread out your style “declarations”
(ie coding) across multiple lines for readability.
h1
{
color:blue;
font-family:arial,helvetica,"sans
serif";
font-size:150%;
}
You could group selectors like this: H1, H2, H3, H4
{background:yellow}
GK:
Computer markup language considers the output as having 2 separate parts:
1. Foreground - text (the
default)
2. Background - background
against which text is displayed
So
when you are coding, you have always specify the part to which you are
referring in your coding. The default is the foreground. So the following does
NOT contain reference to it:
<p
style="color:olive;">
HELLO! </p>. The
contrast is the following: <h3 style="background-color:blue"> GOODBYE!</h3>
--
--
Inline Style Sheets
Inline style sheets are so called
because they are actually written within the HTML tag. You therefore need to
use regular html brackets < > in these cases.
It is
recommended that inline style sheets are used to a minimal extent. After all,
their stated benefit above is defeated by the fact that you are entering code
on single lines that apply only to that point within a document ... just like
basic HTML. So what’s the point?!
It is only
in this inline method (versus embedded or external methods) that you need to
apply the code “style”. See below.
HTML TAGS
|
CSS ATTRIBUTES PLACED
WITHIN HTML only within the html body
|
USE
|
<P>
</P>
<H1>
</H1>
<BODY></BODY>
<DIV></DIV>
|
||
STYLE=”…..”
|
STYLE lets HTML know that you are
incorporating CSS within HTML code
|
|
STYLE=”color: green;”
(same effect as
<font color=”green”>
|
sets text color
|
|
STYLE=”background-color: yellow;”
STYLE=”background: yellow;”
<body style="background-color:orange">
|
sets background color (note 2 different
ways of saying the same thing)
|
|
<div style=”background:
wheat; height:350;”>
|
Creates a background colour that extends
for 350
|
|
<SPAN>
</SPAN>
|
This is an inline element. So you could
apply it anywhere within HTML docs. It has no special purpose on its own. Put
it with something else to create style effects. (DIV is used in exactly the
same way but for block elements)
|
|
Abc
entered. <Span class=”Brandi”>
‘How are you?’ </span> She asked.
|
The class (see below) applies only to the
words “how are you?”
|
|
<DIV></DIV>
|
This is a block element. So you could
apply it anywhere within HTML docs. It has no special purpose on its own. Put
it with something else to create style effects. (SPAN is used in exactly the
same way but for inline elements)
|
Embedded Style Sheets
Embedded
styles are usually written between the opening and closing HTML head tags.
If you will
repeatedly have a specific aspect within your page (called “selectors” for CSS discussions) (ex H1, paragraphs, etc …), you may do
coding for their appearance with these style sheets only once.
So for the
following statement, you are essentially coding so that all H1 headings will automatically
have blue and centred text: H1 {color: blue; text-align:center}
HTML TAGS
|
ATTRIBUTES
|
USE
|
<HEAD>
<STYLE> … attributes here …
</STYLE></HEAD>
|
||
TYPE=”text/css”
This is NOT an option between text and CSS. Both are
written exactly as above
<STYLE TYPE=”text/css”>
|
Lets browser know that styles are being
used (within the HTML codes). Some newer browser don’t need it. Include it to
include older browsers.
|
|
<!-- all attributes below this row written
inside here -->
|
When browsers
read codes that they don’t understand, they sometimes try to do something
else – which might have disastrous results.
To prevent an
old browser from doing this, these codes hide the codes from older browsers.
|
|
BODY {background: #bedfed;}
|
||
BODY {margin-top: 20;}
|
||
H1 {font-weight:bold; text-align:center;
color:#006000; background:#bedfed; font-family’Gill Sans, Arial, sans-serif}
|
||
H1, H2, H3, H4 {background:yellow}
|
This group of selectors will all have a
yellow background
|
|
A:link {color:white; background:black}
|
Unvisited links will be white with black
backgrounds
|
|
STRONG
{background-color:yellow}
P strong
{background-color:yellow}
|
To make any contents within
<strong> tags to have a yellow background
<strong> tags specifically within
paragraphs must have that background
|
|
UL
{background-color:white}
|
To make any contents within <ul>
tags to have a yellow background
|
External Style Sheets
External
styles refer to creating a separate file that contains all style information.
This file is then linked to as many HTML pages as you wish - even the whole 500-page
site.
To link the
web pages with the external file, 2 different sets of coding must occur.
Each web page should have a code between the opening and
closing HEAD tags.
HTML TAGS
|
ATTRIBUTES
|
USE
|
<HEAD>
… attributes
here … not inside the other style codes <HEAD>
|
||
LINK
|
||
LINK REL=”stylesheet”
|
States relationship
|
|
LINK HREF=”abc.css”
|
Names the style sheet file
|
|
LINK TYPE=”text/css”
|
||
Ex.
<HEAD>
<LINK REL=”stylesheet”
HREF=”styles_folder/abcdef.css” TYPE=”text/css”>
|
The separate file should NOT have HTML codes at all. (not even
head, body or style tags).
Use the
basic text editor (ex Notepad) and
then save it with a .css extension.
USE
|
|
/*
write
text here */
|
Creates notes for the developer
|
BODY {background:#123456; margin-top:20}
|
|
A:link {color:#010203; background:
#f1f2f3}
|
|
H1 {font-weight:bold; text-align:center;
font-family:arial; font-style:italics
|
CLASSES
You could
create your own code name so that every time that you include your code name in
coding, the styles will apply. Example is a motto. You could name it “green_motto”. That is a good name since
it is self-explanatory re what it does.
Application:
Embedded style sheets: (1) between the HTML’s <head> tags, you describe
the name and its intended effect and; (2) in the HTML document’s body, state
the class name wherever you want the effect to occur.
Syntax:
(dot)class name
.make_up_a_class_name
When the class is attached to a usual HTML tag
(applies to embedded CSS)
Describe
the class like this in the head:
<HEAD>
<STYLE
TYPE=”text/css”> P.green_motto
{color:green}
</STYLE>
<HEAD>
|
Apply it
like this:
<BODY>
<P
CLASS=”green_motto”> Yes we can! </P>
President
Obama used this for his campaign.
</BODY>
|
NB. The dot that comes directly before the
class name is NOT
written into the code within the HTML doc.
When the class is NOT attached to a usual HTML
tag (embedded)
Describe
the class like this:
<HEAD>
<STYLE
TYPE=”text/css”>
.jello
{color:green}
</STYLE>
<HEAD>
|
Apply it
like this:
<BODY>
<SPAN
CLASS=”jello”> Yep! </SPAN>
</BODY>
|
NB. The dot that comes directly before the
class name is NOT
written into the code within the HTML doc.
When the class is attached to a usual HTML tag
(external file)
Describe
the class like this in CSS file:
h1.main { color:red }
|
Apply it
like this in the HTML doc:
<h1
class="h1 main">
Why
Barbados?
</h1>
|
NB. The dot that comes directly before the
class name is NOT
written into the code within the HTML doc.
LIST OF PROPERTIES & VALUES THAT CAN APPLY
WITHIN CSS
SELECTORS
|
PROPERTIES &
VALUES
|
USE
|
Background
|
||
BODY
|
{background-color:green}
{background-image:url(smile.jpg)}
{margin-top:20}
|
|
H1, p
|
{font-family:arial}
{font-family:”comic sans ms”}
{font-style:italics}
{font-weight:bold}
|
Nb. For multiple-word values, use
quotation marks. Think of this like ‘handwriting’
|
Text
|
||
H1
|
{text-align:center}
{text-align:justify}
{text-decoration:none}
{text-decoration:underline}
{text-decoration:overline}
{text-decoration:line-through}
{text-decoration:blink}
{text-transform:capitalize}
{text-transform:uppercase}
{text-transform:lowercase}
|
Justify means align to the left
|
Span, div
|
{font-size:24px}
|
|
Font
colour coding that applies within external and embedded css?
|
||
A:LINK
|
{color:#010203;
|
|
IMG
|
{width:50px; height:50px;
}
|
|
TABLE
|
||
FRAME
|
||
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.