Scribd
Upload
150 views

CSS Coding PDF

Uploaded by

Anonymous xpDOBar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
150 views

CSS Coding PDF

Uploaded by

Anonymous xpDOBar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

CSS CODING

66
CSS
CSS is an acronym which stands for Cascading Style Sheets.

A style may be applied to an existing HTML tag or can be used to create the equivalent of one.
This is called a style.

Why use CSS?

an alternative to programs which use templates


give a consistent look and feel to page elements
more control over layout
should decrease page load time
one file will change the look of your entire website

ASSIGNMENT

Create a subfolder called "css" in your "labs" folder on your personal (g:) drive and
copy & paste the following into notepad (you can access this from the course site in
ATutor). Save as practice.htm. Create a sub-folder in the "css" folder called images.
Scroll down past the HTML code below and right click on the image and save it in the
graphics folder (you can access this from the course site in ATutor).

---------------------------------------------------------------------------------

<html>
<head>

<title>Untitled Document</title>
</head>
<body>

<p>Elementary School</p>
<ul>

<li><a href="index.htm">Home</a></li>
<li><a href="schoolinfo/schoolinfo.htm">School Information</a></li>

67
<li><a href="schoolinfo/calendar.htm">Calendar</a></li>
<li><a href="academics/academics.htm">Academics</a></li>
<li><a href="extracurricular/extracurricularactivities.htm">Extracurricular
Activities</a></li>
<li><a href="students/students.htm">For Students</a></li>
<li><a href="parents/parents.htm">For Parents</a></li>
<li><a href="staff/staff.htm">For Staff</a></li>
<li><a href="staff/schooldevelopment.htm">School Development</a></li>
<li><a href="search/demosearch.htm">Search</a></li>
</ul>

<h1 align="left"> Welcome to our school </h1>


<p align="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
<img border="0" src="images/school.png" width="300" height="225">
</p>

<h1 align="left">School News</h1>


<p align="left">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.</p>

<h1>Upcoming Events</h1>
<ul>
<li>Dec 8 ~ Christmast Concert</li>
<li>Dec 19th ~ last day of classes for 2008</li>
<li>Jan 5th ~ first day of classes for 2009</li>
</ul>

<p align=center> Name of Elementary | Contact | Site Map |Last Updated:


12/12/2007 </p>

</body>

68
</html>

69
Applying CSS
There are three ways in which to apply css code to an HTML doc:

1. Inline
2. Internal
3. External

Inline

The style is used with a single instance of an HTML tag. In reality, it would make much more
sense to use HTML to change only one specific tag.

<html>
<head>
<title>Inline Style Page Example</title>
</head>

<body style="background-color:#99FFCC;">

<p>This is an example where the background colour of this particular webpage would
be light blue</p>

</body>

</html>

Internal

Styles are defined in the head section of an HTML document. These styles only affect the
instances included in the particular page. It is more common for people to use External style
sheets.

<html>
<head>
<title>Internal Style Page Example</title>

70
<style type="text/css">
body{background-color:#99FFCC;}
</style>
</head>

<body>

<p>This is an example where the background colour of this particular webpage would
be light blue</p>

</body>

</html>

External

Styles are defined in a separate document called a "style sheet". This sheet may be referenced
from many HTML documents. As such, each time the styles are changed within the sheet the
"look" is reflected in HTML pages referencing the sheet.

<html>
<head>
<title>External Style Page Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<p>This is an example where the background colour of this particular webpage would
be light blue</p>

</body>

</html>

71
The style.css sheet reads as follows:

body {background-color:#99FFCC;}

72
Cascading
Different style sheets will overwrite (cascade) similar styles:

inline overwrites internal


internal overwrites external
external overwrites browser default

ASSIGNMENT

Open the practice.htm document in notepad. Although it hasn't yet been created, you
need to create a link to an external style sheet called styles.css in the same directory
as the practice.htm document.

73
Coding Syntax

Examples:

p {text-align:center; color=green;}

- more than one delcaration may be referred to in a selector


- each declaration must be seaprated by a semi-colon (;)

h1, h2, h3 {color:red;}

- you can apply the same property and value to vaious selectors as in the example above

74
Selectors
There are three types of selectors:

tag selectors
ID selectors
Class selectors

Tag Selectors

Tag selectors are those which change already in existence HTML tags.

p{
background-color: red;
}

Class Selectors

Class selectors are essentially a way in which to style an element which you name. For
example, you might wish to create a type of text box for news stories on a webpage to be
reused many times, or a way in which to wrap text around an image. The point is that a class
selector can be used many times.

#leftcontainer{
background:url(images/template/shadow_left.gif) repeat-y right top;
width:419px;
float:left;
color:#585858;
font:11px Tahoma, serif;
height: 466px;
overflow: auto;
}

ID Selectors

An ID selector is exactly like a class selector except that it can only be used ONCE in a page.

75
Using Selectors
To use selectors which are different from the HTML Tags, you will need to add these in in a
similar way to HTML tags.

To do this you use SPAN and the term class or id depending on what kind of selector it is.

<span class="header">Elementary School</span>

<span id="specialparagraph">Upcoming Dates:</span>

If your selector is already an HTML tag, you would simply use it as you already have.

<p>Ipsum Lorem</p>

76
Properties
There are many different properties and values that can be applied to selectors. This section
will examine them in some detail. As always, this is not a final list but a good cross reference of
the variety that are available.

77
Text
There are many ways in which to change the value of properties that relate to text.

property: value; Notes:


font-family: Verdana, Arial,
Helvetica, sans-
serif;
font-size; 12px; There are a variety of measurements that can be
small; applied to fonts. The most common include pixels
(px), and the default browser sizes such as small,
medium, etc.
font-style:
italic;
normal;
oblique;

line-height:
30px;
normal;

text-decoration:
underline;
overline;
line-through;
blink;
none;

font-weight: bold; You may also choose 100, 200, 300, 400, 500,
bolder; 600, 700, 800, or 900
lighter;
normal;
text-variant: small-caps;
normal;
text-transform: capitalize;
uppercase;
lowercase;
none;
color: #99CCFF;
red;

78
ASSIGNMENT

Open notepad. Save the empty file as styles.css (in your css folder).

Open a webbrowser and navigate to and open the practice.htm file.

Return to notepad and type the following:

Notes
1. If you type in /**A Description**/ it will help you as you develop sections. In the
end, your styles.css file will have several sections and it makes sense to name them
what they are. In this case, we are starting off with changing a normal HTML code
(body), so you are going to call this section "HTML Styles".
2. Do not attempt to change the colour of the text (eg body is pink) this is just to help
you see the difference between the style, selector and properties.

Explanation
What you are doing is changing the HTML code body to result in the following: All text
(unless over-ridden by another style) will be 12px Arial (or Helvetica or sans-serif if the
computer does not have that font) and it will be a darker grey.

Save the styles.css file. Because you are referring to this file in your practice.htm
page, you do not have to do anything to that page. Refresh it in the browser and see
what happens to the text!

Continue by creating a new style for the <h1> Heading 1 code:

79
In this case, there is a PROPERTY which is redundant in the above example and
really not required. Remove it and only add the 3 properties required to change the
look of a header.

Save the .css file and refresh your practice.htm file to see what has happened to any
text which has the <h1></h1> tags around it.

80
Background
In the HTML section, backgrounds were applied to two items...the entire page or to a cell in a
table. The Background of any css selector can be changed in css.

property: value; Notes:


background- #99FFCC;
color: red;
backround- url(../images/leaves.jpg);
image:
background- repeat; tiles the image
repeat: repeat-y; tiles the image vertically
repeat-x; tiles the image horizontally
no-repeat; displays the image only once
background- scroll; selects whether the background image
attachment: fixed; scrolls on a webpage or not
background-
top left;
position:
top center;
top right;
center left;
center top;
center right;
bottom left;
bottom center;
bottom right;
Xpx Ypx;
X% Y%;

ASSIGNMENT

Open notepad and the styles.css file.

Open a web browser and navigate to and open the practice.htm file.

81
In the last variation of the styles.css file, the HTML code for <h1> had a style applied
to it where the font was a little bigger than the default font, bolded and a turned a
green colour.

Change the background of the h1 tag by using the "background-color" property. Make
the colour be: #bce27f.

Save the .css file and preview the practice.htm file in your web brower. Welcome to
our school should now be in darker green with a lime green background which
reaches across the page from left to right.

82
Block
property: value; Notes:
word-spacing 3px; - increases or decreases the whitespace
between words
letter-spacing 5px; - increases or decreases the whitespace
between characters
vertical-align - sets the vertical alignment of an element
baseline;
bottom;
inherit;
middle;
sub;
super;
text-bottom;
text-top;
top;

text-align - aligns the text within an element


left;
right;
center;
justify;

text-indent 15px; - indents the first line of text in an element


white-space normal; - how the white-space is handled within an
pre; element
nowrap;
display - determines how and if an element is
none;
displayed
inline;
block;
list-item;
run-in;
compact;
marker;
table;
inline-table;

83
table-row-group;
table-header-group;
table-footer-group;
table-row;
table-column-group;
table-column;
table-cell;
table-caption;

ASSIGNMENT

Open notepad and the styles.css file. Change the letter spacing of the h1 tag to -3px.
Save and preview the change to practice.htm in your web browser. Note that word
spacing is not observed...change the word spacing to 3px.

Next, create a new section header. Remember this is not code, but a note to
yourself. You can use /** ending with **/ to leave notes.

You are going to create your own selector called .newspara (short in this case for a
"news paragraph" style). This will indent the text 50px for any text you add this new
selector to.

Save style.css.

----------

Because this is a new style (a class selector) and not a tag (HTML) selector it will not

84
affect any item within your HTML file unless directly coded in. Note how it is coded in
below. Add this class to the paragraph following "Welcome to our school" and also
"School News".

Rather than using HTML code to align these paragraphs to the left...this information
can be incorporated into the stylesheet as well. That way, if in the future you wish to
differently align all news paragraphs you can quite easily.

85
Box
Box properties are extremely useful in css. This area is what allows you to specifically decide
how to parcel each item on the page. Later on, when we look at combining this with positioning
you will see how placing boxes precisely on a page will allow you to accomplish not only what
you were able to in HTML with tables, but you can go further with this in that you can layer
boxes amongst other things.

property: value; Notes:


width: 150px;
30%;
auto;
height: 150px;
30%;
auto;
10px; the spacing between the contents of the
padding:
auto; box and the outside perimeter of the box
padding-left:
padding-right:
padding-top:
padding-bottom:

determines the space around an element


margin: 10px;
margin-top: auto;
margin-bottom:
margin-left:
margin-right:

float: right; determines where content (image or text)


left; appears when included in a parent
none; element (these are called "floating
elements")
clear: right; sets the sides of an element where other
left; floating elements are not allowed
both;
none;

86
ASSIGNMENT

Open your styles.css file and insert the following in the /**Class Selectors**/ section:

Save the file.

Open your practice.htm file. Find the text where updates are listed and add the class
as highlighted below. Notice that you place the opening tag (in this case span class)
at the beginning and end of the section you wish to affect just like with HTML.

Save and preview in your web browser.

----- let's change it up a little bit more...add the background-colour to the .updates
style.

87
Div vs Span

ASSIGNMENT

Normally, creating the layout of a page should be done first; however, because you
are learning different aspects of .css which are related, this is where we will
accomplish the layout of the html page.

So...as we are working on creating a page which will look something like the below
page, the following "boxes" have been drawn to show you what we are working on.
Each box we are going to create is named and outlined as well as one big container
for the entire page is indicated by arrows.

88
So...with keeping organization in mind in your styles.css page create a new header for
the Class Selectors you are going to create to accomplish the layout. Creating a
container to hold everything will accomplish what you did in the HTML section with the
main table.

The .header style (which we will do more with in the future) basically replaces the top
cell of the table.

The following 2 classes -- sidebarup and sidebardown create the equivalent of two
cells which we will ensure make up the left hand isde of the page.

89
The .mainbox class creates a container which can mimic the main cell of the table
created in HTML. There are some interesting features here which we will further
exploit in a few lessons. The footer replaces the bottom cell of the table. Again...we
will be adding to this soon.

Save your styles.css file.

Obviously, these styles will not yet affect any content on your webpage as they have not been
coded in to the HTML document.

So...because you are inserting totally NEW codes this is an appropriate time to talk about the
"div" and "span" code. In order to insert these codes you will either use:

<div class="nameofstyle"></div>
OR
<span class="nameofstyle"></span>

90
So when do you use div and when do you use span?

In short, div is used for block elements and span is used for inline elements. Block elements
are items which stand on their own on a page and take up the horizontal space on either side of
it, where inline elements are included in the line or flow of the page. Think of a block element as
being similar to the paragraph in HTML (except it can contain more than just text) and the inline
element would be similar to a font or link element where simply some text is changed.

ASSIGNMENT

We have already used span to affect the .updates information; in the case of all of the
above, you should use div as they are blocks that you are delineating around the
page.

Open your practice.htm file and insert the styles around the appropriate content. It will
not yet look "perfect", but items will begin to fall into place.

It should look as below:

91
Placement in Code
Obviously, it still matters which order you place your styles in...especially when using block
elements. The following code is actually placed in your html document AFTER the "main"
section of code.

ASSIGNMENT

Copy and past the "sidebardown" section of the practice.htm document to above the
"main" section. Save and preview.

The sidebardown should now rest directly below sidebarup.

92
Next add the following to your HTML section. This will make the image move to the
right hand side of the element it is contained within. See how this can replace tables!

93
Border
property: value; Notes:
border: thin #000000;
none - combine the three values into one, for
border-right: medium
border-left: dotted thick example:
border-top: 5px
border-bottom: dashed border-right: thin dashed #FF0000;
solid
double
groove
ridge
inset
outset

ASSIGNMENT

Open your styles.css sheet. Go to your .footer style and give it a 1px top border which
is solid and the colour #668e39.

Save and preview the practice.htm file in your web browser.

94
List
property: value; Notes:
list-style-type: without specifying the type -- the default is
disc;
circles
circle;
square;
decimal;
lower-roman;
upper-roman;
lower-alpha;
upper-alpha;
none;

list-style- inside;
- outside creates a bullet which resides on
position: outside;
the left hand side of the list separately
- inside creates an indented bullet

list-style-image: url(direct or indirect link); - you can create your own graphical bullet
and link to it
In our practice page, there are two lists. One makes up the menu in sidebarup and the other
lists the upcoming events in the sidebardown. We are actually going to replace the list in
sidebarup in the near future; however, see how it affects BOTH lists.

ASSIGNMENT

In the appropriate section in your styles.css sheet, create a new definition for <ul>
which makes use of squares inside the list.

Save styles.css and preview your practice.htm page. You'll note that both the menu
and Upcoming Events lists now have squares which are indented. We are actually
going to treat the menu in a totally separate way next so that this "look" does not apply
to that list.

95
96
Positioning
The position property defines where an element will be placed on a page, either in relation to
the upper left hand corner of the screen or through it's placement within the code.

property: value; Notes:


type:
absolute; - absolute allows you to place a "layer"
relative; anywhere on the page (therefore it does
static; not matter where you place this in the flow
of the HTML)
- relative allows you to place a "layer"
relative to it's position within the HTML
- static is basically what occurs with simple
HTML (therefore do not use it)

visibility: visible; - visible - normally layers are visible by


hidden; default
inherit; - hidden - you can choose to hide layers
only to reveal them in concert with another
action (such as mousing over an image)
- inherit - this is more advanced than what
we will do in this course -- but feel free to
do some research!
z-index: auto;
- when using layers it is important to
3 px; (a value)
determine how they "stack" on the page if
they are overlapping
- the z-index determines the order

overflow: - if the content is larger than the height


visible;
and width of the layer, you can determine
hidden; whether you wish it to be visible (thus
overriding the height and width, hidden, or
scroll;
a scroll bar added
auto;

width: auto;
750px; (a value)
height:
auto;

97
500px; (a value)

This is the placement relative to the upper


top: auto;
left hand corner of the screen.
right: 20px; (a value) Remember...not everyone has the same
size screen!!
bottom:
left:

clip: rect
- eg. rect (1px,33px,1px,5px)
(top,right,bottom,left);
- this property is fairly useless and
reminds one of the discussion about
images -- resize or crop them to their
actual display size so that that is all the
user has to download
- clipping a layer allows you to determine
what portion of a layer is displayed

98
Cleaning Up
Now that you have a fairly good overview of what .css can do. Here are a couple more things
where you may wish to use non-HTML elements to create or layout content on your webpage.

ASSIGNMENT

Replace the menu list by removing the HTML list tags in your practice.htm page.

Next go to the styles.css page and create a new section called /**Menu**/

First download and save this green rectangle ( ) in your graphics folder and then
create the following:

What this is, is a style called menu links that you can apply to the entire menu. The

99
a:links, a:visited: and a:hover are the ways in which you wish all links specifically
found within the menulinks style to be treated. This makes a much more interesting
navigation effect than a simply list.

FURTHERMORE, imagine inserting background images to make the links look like
buttons...

ASSIGNMENT

Save the following image into your graphics folder and incorporate it as a background
in your header style. This can be attained from the Atutor Course site.

ASSIGNMENT

Finally...give the page a <title></title> such as "Elementary School"

AND

Center the page.

100
and the end result should be very similar to...

101
Major Assignment
Recreate your HTML project in a new folder using .css to replace/tweak HTML tags, to create
your own new styles, update your navigation menu, as well as to lay out the page.

Test your page in an online .css validator!

102
Assignment Listing
In the css folder you should have the following files:

practice.htm
styles.css
css major project

103
css Marking Scheme
Code Changes to Practice.htm

- add link to external style sheet


-
- removed alignment from main body content paragraph tags
- add .updates style to upcoming events text
- add layout styles around appropriate content (use div as they are BLOCK elements)
- move .sidebardown block to BEFORE the .mainbox section
- remove list from menu navigation
- add #menulinks to navigation
- add bg image to .header
- give page title
- center page on screen.

Code Changes to styles.css

- Create section /**HTML STYLES**/


- body
o as is
- h1
o remove font family property
o add background colour #bce27f
- ul
o square bullet
o inside
- img
o as is
- Create section /**Class Selectors**/
- .newspara
o As is
o Add text align left
- .updates
o As is
o Add bg colour
- Create section /**Layout**/
- .container
o As is
- .header
o As is
o Add bg image
- .sidebarup
o As is
- .sidebardown
o As is
- .mainbox
o As is
- .footer

104
o As is
o Add 1 px solid border colour 668e39
- Create section /**Menu**/
- #menulinks
o As is
- #menulinks a:link, a:visited
o As is
- #menulinks a:hover
o As is

105
WYSIWYG
What You See Is What You Get
This section can only be found on the Atutor Course site

106

You might also like