CSS JavaScript Lecture

CSS & JavaScript
=============================================================================================
LECTURE 9: CASCADING STYLE SHEETS (CSS)

Cascading
- Multiple styles can overlap in order to specify a range of style from a whole web site down to a unique
element. Which style gets applied pertains to the rules of CSS cascading logic.
Style
- CSS deals specifically with the presentation domain of designing a web page (color, font, layout, etc).
Sheet
- Normally, CSS is a file separate from the HTML file –linked to the HTML file through its <head>
(exceptions apply).
- is a simple design language intended to simplify the process of making web pages presentable.
- Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are
sized and laid out, what background images or colors are used, as well as a variety of other effects.
- Most commonly, CSS is combined with the markup languages HTML or XHTML.
Types of Style Sheets:

1. inline – add a style to an individual HTML tag (eg. heading, paragraph)
This way you are simply placing the CSS code within the <head></head> tags of each (X)HTML file you want to style
with the CSS. The format for this is shown in the example below.
<head>
<title><title>
<style type="text/css">
CSS Content Goes Here
</style>
</head>
<body>
With this method each (X)HTML file contains the CSS code needed to style the page. Meaning that any changes you
want to make to one page, will have to be made to all. This method can be good if you need to style only one page,
or if you want different pages to have varying styles.
2. embedded
- add the style sheet within the <head> tags of the HTML document to define the style for an entire Web
page.
- need <style> tags to start and end the style sheet.
3. external (or linked)

- create a text file within the file extension, .css and you then add a link to this external style sheet into a
Web page in the web site.
- does not need <style> tags to start and end the style sheet.
- For each web page to which you want to apply the styles in an external style sheet, a <link> tag should be
inserted within the <head> tags of the Web Page
An external CSS file can be created with any text or HTML editor such as "Notepad" or "Dreamweaver". A CSS file
contains no (X)HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by
placing one of the following links in the head section of every (X)HTML file you want to style with the CSS file.
<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" />
Or you can also use the @import method as shown below:
<style type="text/css">@import url(Path To stylesheet.css)</style>
Either of these methods are achieved by placing one or the other in the head section as shown in example below.
<head>
<title><title>
<link rel="stylesheet" type="text/css"href="style.css" />
=========================================================================================
1
- aebihis
CSS & JavaScript
=============================================================================================
</head>
<body>
or
<head>
<title><title>
<style type="text/css"> @import url(Path To stylesheet.css)
</style>
</head>
<body>
By using an external style sheet, all of your (X)HTML files link to one CSS file in order to style the pages. This means,
that if you need to alter the design of all your pages, you only need to edit one .css file to make
global changes to your entire website.
Here are a few reasons this is better.

 Easier Maintenance
 Reduced File Size
 Reduced Bandwidth
 Improved Flexibility
CSS Syntax
Reference CSS from HTML
 Selectors
- select elements to apply a declared style.
- selects elements on the HTML page
Selector Types:
o Element Selectors: selects all elements of a specific type (<body>, <h1>, <p>, etc.)
Example:
h1{
color: blue;
}
o Class Selectors: selects all elements that belong to a given class.
.legs{
font-weight: bold;
background: pink;
}
o ID Selectors: selects a single element that’s been given a unique id.

#snout{
border: solid red;
}
o Pseudo Selectors: combines a selector with a user activated state (:hover, :link, :visited)
=========================================================================================
2
- aebihis
CSS & JavaScript
=============================================================================================
General Purpose Pseudo-Selector:

:hover - element with mouse over
Specific to hyperlinks (and/or buttons):

a:active - a link or button that is currently being clickedon.
a:link - a link that has NOTbeen visited yet.
a:visited - a link that HASbeen visited.
CSS Anchors and Links
Below are the various ways you can use CSS to style links.:
a:link {color: #009900;} - sets the color of a link when no event is occuring
a:visited {color: #999999;} - sets the color a link changes to, when the user has
already visited that url
a:hover {color: #333333;} - sets the color a link changes to as the user places their
mouse pointer over the link
a:focus {color: #333333;} - is primarilly for the same purpose as the last one, but
this one is for users that are not using a mouse and are
tabbing through the links via there keyboards tab key, it
sets the color a link changes to as the user tabs through
the links
a:active {color: #009900;} - sets the color a link changes to as it is pressed
 The associated Style Block applies its style values to the selected element’s properties.
HTML Tree:
<body class=“pig”>
<p class=“pig-head”>
<h1 id=“snout”>
Snout SnoutSnout
</h1>
</p>
</body>
Examples:
No Style Sheet With Style Sheet (Style Information)
Color Properties:
 color:specifies the text color.
=========================================================================================
3
- aebihis
CSS & JavaScript
=============================================================================================
 background-color:specifies the background color.
You can set the color of text with the following:
color: value;
Possible values are:

o color name - example:(red, black...)
o hexadecimal number - example:(#ff0000, #000000)
o RGB color code - example:(rgb(255, 0, 0), rgb(0, 0, 0))
Background
You can style the background of an element in one declaration with thebackground property.
background: #ffffff url(path_to_image) top left no-repeat fixed;
Values:
 attachment
If you are using an image as a background. You can set whether the background scrolls with the page or is fixed when
the user scrolls down the page with the background-attachment property
background-attachment: value;
Values:
o fixed
o scroll
 color
You can specifically declare a color for the background of an element using the background-color property.
background-color: value;
Values:
o color name
o hexadecimal number
o RGB color code
o transparent
 image
You can set an image for the background of an element using the background-image property.
background-image: url(path_to_image);
Values:
o url
o none
 position
You can position an image used for the background of an element using the background-position property.
background-position: value;
Values:
o top left
o top center
o top right
=========================================================================================
4
- aebihis
CSS & JavaScript
=============================================================================================
o center left
o center center
o center right
o bottom left
o bottom center
o bottom right
o x-% y-%
o x-pos y-pos
 repeat
background-repeat:tile image in background
or you can set each property individually…
Font
The font property can set the style, weight, variant, size, line height and font:
font: italic bold normal small/1.4em Verdana, sans-serif;
The above would set the text of an element to an italic style a bold weight a normal variant a relative size a line height of
1.4em and the font to Verdana or another sans-serif typeface.
Font -Family
You can set what font will be displayed in an element with the fontfamily property.
There are 2 choices for values:

 family-name
 generic family
If you set a family name it is best to also add the generic family at the end. As this is a priortized list. So if the user does not
have the specified font name it will use the same generic family. (see below)
font-family: Verdana, sans-serif;
Font Size
You can set the size of the text used in an element by using the fontsize property.
font-size: value;
There are alot of choices for values:

o xx-large
o x-large
o larger
o large
o medium
o small
o smaller
o x-small
o xx-small
o length
o % (percent)
Font Style
You can set the style of text in a element with the font-style property:
=========================================================================================
5
- aebihis
CSS & JavaScript
=============================================================================================
font-style: value;

o normal
o small-caps
Font Weight
You can control the weight of text in an element with the font-weight property:
font-weight: value;

o lighter
o normal
o 100
o 200
o 300
o 400
o 500
o 600
o 700
o 800
o 900
o Bold
o Bolder
Letter Spacing
You can adjust the space between letters in the following manner. Setting the value to 0, prevents the text from justifying.
You can use negative values.
letter-spacing: value;

o normal
o length
Example:
T h e s e l e t t e r s a r e s p a c e d a t 5 p x .
Text Properties:
 Text Align
You can align text with the following:
text-align: value;

o left
o center
o right
o justify
=========================================================================================
6
- aebihis
CSS & JavaScript
=============================================================================================
Examples:
This text is aligned left.
This text is aligned in the center.
This text is aligned right.
This text is justified.
 Text Decoration
You can decorate text with the following:
text-decoration: value;

o none
o underline
o overline
o line through
o blink
 Text Indent
You can indent the first line of text in an (X)HTML element with the following:
text-indent: value;

o length
o percentage
Example:
This text is indented 10px pixels.
 Text Transform
You can control the size of letters in an (X)HTML element with the following:
text-transform: value;

o none
o capitalize
o lowercase
Examples:
This First Letter In Each Word Is Capitalized, Though It Is Not In My File.
THIS TEXT IS ALL UPPERCASE, THOUGH IT IS ALL LOWERCASE IN MY FILE.
this text is all lowercase. though it is all uppercase in my file.
First Letter
=========================================================================================
7
- aebihis
CSS & JavaScript
=============================================================================================
The first-letter pseudo element styles the first letter of text in a block level element.
p{font-size: small;}
p:first-letter {font-size: medium; color: #ff0000;}
As you can see in the above example paragraphs are set to be a small font size, but the p:first-letter is set to be a medium size
and a red color. The result is that the first letter of all paragraphs will be red in color and a bit larger than the rest of the
paragraph. Though lets say you only want to style a certain paragraph of text with the first-letter element. Thats where
declaring a class to the pseudo element comes into play.
First -Letter with Class
p.special_letter:first-letter {font-size: x-large; font-weight: bold; color: #ff0000;}
Example:
This is a special sentence to demonstrate the use and look of the first-letter pseudo element. As you can see the first letter of
this paragraph is styled differently than the rest of the characters within it. All of this was done by simply adding
class="special_letter" to the opening <p> tag for this paragraph.
<p class="special_letter">the content</p>
The following properties can be assigned to the first-letter pseudo element:

o background
o border
o clear
o color
o float
o font
o line-height
o margin
o padding
o text-decoration
o text-transform
o word-spacing
List Properties <ul>

 list-style-type:none, disc, circle, square,(other types available)
 list-style-position: inside oroutside
 list-style-image:url(../path/to/image.jpg)
…or shorthand
 list-style:type position image
List Style
You can control the appearance of ordered and unordered lists in one declaration with the list-style property
list-style: value value;
Values:
o image
o position
o type
or you can control them individually…
=========================================================================================
8
- aebihis
CSS & JavaScript
=============================================================================================
List Style Image
You can use an image for the bullet of unordered lists with the list-style property.
list-style-image: url(path_to_image.gif, jpg or png);
If you use an image, it is a good idea to declare the list-style-type also in case the user has images turned off.
List Style Position
You can control the position of ordered and unordered lists with the liststyle-position property.
list-style-position: value;
Values:
o inside
o outside
List Style Type
You can control the type of bullet ordered and unordered lists use with the list-style-type property.
list-style-type: value;
Values:
o disc
o circle
o square
o decimal
o lower-roman
o upper-roman
o lower-alpha
o upper-alpha
o none
Border
You can set the color, style and width of the borders around an element in one declaration by using the border property.
border: 1px solid #333333;
Values:
o color
o style
o width
or you can set each property individually…
Border Color
You can set the color of a border independently with the border-color property.
border-color: value;
Values:
o color name
o hexadecimal number
=========================================================================================
9
- aebihis
CSS & JavaScript
=============================================================================================
o RGB color code

o Transparent
Border Style
You can set the style of a border independently with the border-style property.
border-style: value;
Values:
o dashed
o dotted
o double
o groove
o hidden
o inset
o none
o outset
o ridge
o solid
Border Width
You can set the width of a border independently with the border-width property.
border-width: value;
Values:
o length
o thin
o medium
o thick
or you can set the elements for each borders side individually…
You can set the color, style and width of the bottom border around an element in one declaration with the border
property.
border(-top, -right, -left, -bottom):width style color
Border bottom:
border-bottom: 1px solid #333333;
border-bottom-color: value;
border-bottom-style: value;
border-bottom-width: value;
Border left:
border-left: 1px solid #333333;
border-left-color: value;
border-left-style: value;
border-left-width: value;
Border right:
border-right: 1px solid #333333;
border-right-color: value;
border-right-style: value;
border-right-width: value;
Border top:
border-top: 1px solid #333333;
border-top-color: value;
border-top-style: value;
=========================================================================================
10
- aebihis
CSS & JavaScript
=============================================================================================
border-top-width: value;
Comment Tags
Comments can be used to explain why you added certain selectors within your css file. So as to help others who may see your
file, or to help you remember what you we're thinking at a later date. You can add comments that will be ignored by browsers
in the following manner.
<!—type your comment/s here-->
<span> Element Tag
- Useful for applying style to text within another HTML element.

- Use SPARINGLY–unlike <h1> or <p>, <span> has no semantic meaning.
- Remember, HTML is for content and HTML tags are for describing that content to non-human or visually-impaired
readers. <span> is just used to make things “pretty”.
You can use the span tag to style certain areas of text, as shown in the following:
<span class="italic">This text is italic</span>
Then in my CSS file:
.italic{
font-style: italic;
}
The final result is:
This text is italic.
Divsions
Divisions are a block level (X)HTML element used to define sections of an (X)HTML file. A division can contain all the parts that
make up your website. Including additional divisions, spans, images, text and so on.
<div> Element Tag
 Useful for dividing parts of the page into sections.

 Creates a “box”with the following attributes:
o margin
o padding
o border
o height
o width
…and lots more
- primary element used for CSS Layouts
You define a division within an (X)HTML file by placing the following between the <body></body> tags:
<div>
Site contents go here
</div>
Though most likely you will want to add some style to it. You can do that in the following fashion:
<div id="container">
Site contents go here
=========================================================================================
11
- aebihis
CSS & JavaScript
=============================================================================================
</div>
The CSS file contains this:
#container{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
Now everything within that division will be styled by the "container" style rule, I defined within my CSS file. A division creates a
linebreak by default. You can use both classes and IDs with a division tag to style sections of your website.
Cursor
You can control the style of cursor to be used in an element with the cursor property.
cursor: value;
Values:
o auto
o crosshair
o default
o help
o move
o pointer
o text
o url
o wait
o e-resize
o ne-resize
o nw-resize
o n-resize
o se-resize
o sw-resize
o s-resize
o w-resize
If you choose to use a custom cursor, it is always a good idea to declare a generic one after the custom value.
cursor: url("image.cur"), default;
Float
The float property changes how text and or images within an element are displayed
float: value;
Values:
o Left - the image/text is displayed to the left of the parent element
o Right - the image/text is displayed to the right of the parent element
o None - there is no change in the way the image/text is displayed
Overflow
You can control what an elements contents will do if it overflows it boundaries with the overflow property.
=========================================================================================
12
- aebihis
CSS & JavaScript
=============================================================================================
overflow: value;
Values:
o auto
o hidden
o visible
o scroll
Example in CSS file.
#overflow_box {width:200px; height:200px; border-top: 1px solid

#eee; border-left: 1px solid #eee; border-bottom: 1px solid
#eee; padding: 10px; overflow: auto;}
Then in the (X)HTML file:
<div id="overflow_box">Contents</div>
Some CSS reference you might use
Background and Border

Property Description
A shorthand property for setting all the background properties in one
background
declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-blend-mode Specifies the blending mode of each background layer (color/image)
background-color Specifies the background color of an element
background-image Specifies one or more background images for an element
background-position Specifies the position of a background image
background-repeat Sets how a background image will be repeated
background-clip Specifies the painting area of the background
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-left-
Defines the shape of the border of the bottom-left corner
radius
border-bottom-right-
Defines the shape of the border of the bottom-right corner
radius
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-image A shorthand property for setting all the border-image-* properties
Specifies the amount by which the border image area extends beyond the
border-image-outset
border box
=========================================================================================
13
- aebihis
CSS & JavaScript
=============================================================================================
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched
border-image-slice Specifies how to slice the border image
border-image-source Specifies the path to the image to be used as a border
border-image-width Specifies the widths of the image-border
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius A shorthand property for setting all the four border-*-radius properties
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-left-radius Defines the shape of the border of the top-left corner
border-top-right-radius Defines the shape of the border of the top-right corner
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
Sets the behaviour of the background and border of an element at page-break,
box-decoration-break
or, for in-line elements, at line-break.
box-shadow Attaches one or more drop-shadows to the box
Font Properties
A rule that allows websites to download and use fonts other than the "web-
@font-face
safe" fonts
Allows authors to use a common name in font-variant-alternate for feature
@font-feature-values
activated differently in OpenType
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-feature-settings Allows control over advanced typographic features in OpenType fonts
font-kerning Controls the usage of the kerning information (how letters are spaced)
font-language-override Controls the usage of language-specific glyphs in a typeface
font-size Specifies the font size of text
font-size-adjust Preserves the readability of text when font fallback occurs
font-stretch Selects a normal, condensed, or expanded face from a font family
font-style Specifies the font style for text
Controls which missing typefaces (bold or italic) may be synthesized by the
font-synthesis
browser
font-variant Specifies whether or not a text should be displayed in a small-caps font
Controls the usage of alternate glyphs associated to alternative names defined
font-variant-alternates
in @font-feature-values
font-variant-caps Controls the usage of alternate glyphs for capital letters
=========================================================================================
14
- aebihis
CSS & JavaScript
=============================================================================================
Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and
font-variant-east-asian
Chinese)
Controls which ligatures and contextual forms are used in textual content of
font-variant-ligatures
the elements it applies to
Controls the usage of alternate glyphs for numbers, fractions, and ordinal
font-variant-numeric
markers
Controls the usage of alternate glyphs of smaller size positioned as superscript
font-variant-position
or subscript regarding the baseline of the font
font-weight Specifies the weight of a font
Text Decoration Properties
text-decoration Specifies the decoration added to text
text-decoration-color Specifies the color of the text-decoration
text-decoration-line Specifies the type of line in a text-decoration
text-decoration-style Specifies the style of the line in a text decoration
text-shadow Adds shadow to text
Specifies the position of the underline which is set using the text-decoration
text-underline-position
property
Text Properties
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box
hyphens Sets how to split words to improve the layout of paragraphs
letter-spacing Increases or decreases the space between characters in a text
line-break Specifies how/if to break lines
line-height Sets the line height
Specifies whether or not the browser may break lines within words in order to
overflow-wrap
prevent overflow (when a string is too long to fit its containing box)
tab-size Specifies the length of the tab-character
text-align Specifies the horizontal alignment of text
Describes how the last line of a block or a line right before a forced line break
text-align-last
is aligned when text-align is "justify"
Specifies the combination of multiple characters into the space of a single
text-combine-upright
character
text-indent Specifies the indentation of the first line in a text-block
text-justify Specifies the justification method used when text-align is "justify"
text-transform Controls the capitalization of text
white-space Specifies how white-space inside an element is handled
word-break Specifies line breaking rules for non-CJK scripts
word-spacing Increases or decreases the space between words in a text
word-wrap Allows long, unbreakable words to be broken and wrap to the next line
Basic Box Properties

bottom Specifies the bottom position of a positioned element
Specifies which sides of an element where other floating elements are not
clear
allowed
clip Clips an absolutely positioned element
display Specifies how a certain HTML element should be displayed
float Specifies whether or not a box should float
height Sets the height of an element
left Specifies the left position of a positioned element
=========================================================================================
15
- aebihis
CSS & JavaScript
=============================================================================================
margin Sets all the margin properties in one declaration

margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
overflow Specifies what happens if content overflows an element's box
Specifies whether or not to clip the left/right edges of the content, if it
overflow-x
overflows the element's content area
Specifies whether or not to clip the top/bottom edges of the content, if it
overflow-y
overflows the element's content area
padding Sets all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
Specifies the type of positioning method used for an element (static, relative,
position
absolute or fixed)
right Specifies the right position of a positioned element
top Specifies the top position of a positioned element
visibility Specifies whether or not an element is visible
width Sets the width of an element
vertical-align Sets the vertical alignment of an element
z-index Sets the stack order of a positioned element
Color Properties
color Sets the color of text
opacity Sets the opacity level for an element
Table Properties
border-collapse Specifies whether or not table borders should be collapsed
border-spacing Specifies the distance between the borders of adjacent cells
caption-side Specifies the placement of a table caption
Specifies whether or not to display borders and background on empty cells in a
empty-cells
table
table-layout Sets the layout algorithm to be used for a table
Image Values and Replaced Content

Specifies a rotation in the right or clockwise direction that a user agent
image-orientation applies to an image (This property is likely going to be deprecated and its
functionality moved to HTML)
Gives a hint to the browser about what aspects of an image are most
image-rendering
important to preserve when the image is scaled
image-resolution Specifies the intrinsic resolution of all raster images used in/on the element
Specifies how the contents of a replaced element should be fitted to the box
object-fit
established by its used height and width
=========================================================================================
16
- aebihis
CSS & JavaScript
=============================================================================================
object-position Specifies the alignment of the replaced element inside its box
Basics Cascading Style Sheets (CSS) in HTML
SAMPLE CODE: html_css.html
<html>
<head>
<title>Student</title>

body {color:white;
font-family:arial;
background-color:green}
h1{color:yellow;
text-align:center;
font-family:garamond;
font-size:70};
<br><br>
</style>
</head>
<body>
<h1>I’m Nobody</h1>
<h3>
Who is wise? He that learns from everyone. Who is powerful? He that governs his
passions. Who is rich? He that is content. Who is that? Nobody. ~Benjamin Franklin
<br><br>
To be nobody but yourself in a world which is doing its best, night and day, to make you
everybody else means to fight the hardest battle which any human being can fight; and
never stop fighting. ~E. E. Cummings
</h3>
</body>
</html>
=========================================================================================
17
- aebihis
CSS & JavaScript
=============================================================================================
SAMPLE OUTPUT:
Internal Style
<!DOCTYPE html>
<html>
<head>
<title>Lorum Ipsum</title>
<style>
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consecteteur adipiscing elif, sed diam nonummy nibh
<strong>eulsmod tincidunt</strong> ut laareet dolore magna aliquiam erat volufpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit labartis <em>nisi ut
aliuip ex ed comodo consequat.</em>
</p>
<h2>Nisi Ut</h2>
<ul>
<li>Wisi
<ul>
<li><a href="http://ipsum.com/nonummy">Nonummy</a></li>
<li><a href="http://www.ipsum.com/consecteteur">Consecteteur</a></li>
<li><a href="http://www.ipsum.com/adipiscing">Adipiscing</a></li>
<li><a href="http://www.ipsum.com/dolore-magna-aliquiam/">DMA</a></li>
</ul>
</li>
</ul>
<h2>Adipiscing Elif</h2>
<table border="1">
=========================================================================================
18
- aebihis
CSS & JavaScript
=============================================================================================
<thead>
<tr>
<th>Labartis</th>
<th>Veniam</th>
</tr>
</thead>
<tbody>
<tr>
<td class="labartis">Nonummy</td>
<td>sit & amet</td>
</tr>
<tr>
<td class="labartis">Consecteteur</td>
<td>quis & nostrud</td>
</tr>
</tbody>
</table>
<h2>Ipsum Up!</h2>
<form action="mailto:youraddress@gmail.com" enctype="text/plain" method="post">
<label>Nibh: <input class="required" name="name" type="text"></label>
<br>
<label>Enim: <input class="required" name="email" type="email"></label>
<br>
<label>Labartis:
<select name="location">
<option value="non">Nonummy</option>
<option value="con">Consecteteur</option>
</select></label>
<br>
<fieldset>
<legend>Tation:</legend>
<label for="female">Sed</label>
<input type="radio" name="gender" id="female" value="female">
<label for="male"> Diam</label>
<input type="radio" name="gender" id="male" value="male">
</fieldset>
<br>
<label>Exerci:
<br>
<textarea name="experience"></textarea>
</label>
<br>
<button type="submit">Ipsum Up</button>
</form>
<br><br>
<a id="twitter" href="http://twter.com/loremipsum">Twter</a> | <a
href="http://www.fcebok.com/loremipsum">Fcebok</a> | <a
href="http://www.flcker.com/photos/40453677@N00/sets/loremipsum/">Flcker</a>
</body>
</html>
Multiple Style Sheets
*Note:
*In your own folder, create a subfolder namely Multiple Style
*You will create one HTML page content displayed with three different style sheets. Namely “StyleSheet 1”, Stylesheet 2, and
“No Style”.
*You will have 3 HTML files and 1 CSS file
-defstyle.html
-exstyle.html
-style2.css
-nostyle.html
=========================================================================================
19
- aebihis
CSS & JavaScript
=============================================================================================
*You can use CSS Properties given to you for the description of each property used in this exercise.
Additional CSS Selectors
ID Selector
Example:
<head>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World</p>
<p>This is not affected by the style</p>
</body>
Output:
Class Selector
.center{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h3 class="center">Red and center-aligned heading</h3>
<p class="center">Red and center-aligned paragraph</p>
</body>
Output:
Try it yourself:
StyleSheet 1 (Internal Style Sheet)

Save as defstyle.html
=========================================================================================
20
- aebihis
CSS & JavaScript
=============================================================================================
<html>
<head>
<style>
body{
font:100% Lucida Console;
margin:20px;
line-height:26px;
}
#top{
background-color: #438292;
color: #ffffff;
padding: 15px;
}
#menubar{
width:100%;
float:left;
}
#main{
padding: 55px;
margn:0;
}
#bottom{
border: 1px solid #d4d4d4;
background-color: #999999;
text-align: center;
padding: 5px;
font-size: 50%;
line-height: 10px;
}
h1, h2{
color: #c60000;
}
.menuitem{
border-radius: 5px;
width: 165px;
float: left;
background-color: #eb7171;
color: #ffffff;
list-style-type: none;
margin: 4px;
padding: 5px;
text-align: center;
cursor: pointer;
}
.menuitem:hover{
background-color: #feffa5;
}
a:link, a:visited{
color: #000000;
text-decoration: none;
}
a:hover, a:active{
text-decoration: none;
}
</style>
<head>
<body>
<div id="top">
<h1>Welcome to My Homepage</h1>
<p>Use the menu to select different Stylesheets</p>
</div>
<div id="menubar">
<ul id="menulist">
<li class="menuitem"><a href="defstyle.html">Stylesheet 1</a>
=========================================================================================
21
- aebihis
CSS & JavaScript
=============================================================================================
<li class="menuitem"><a href="exstyle.html">Stylesheet 2</a>

<li class="menuitem"><a href="nostyle.html">No Stylesheet</a>
</ul>
</div>
<div id="main">
<h1>Same Page Content Different Stylesheet</h1>
<p>This is a demonstration of how different stylesheets can change the layout of your
HTML page. You can change the layout of this page by selecting different stylesheets in
the menu.</p>
<h2>No Style</h2>
<p>This page uses DIV elements to group different sections of the HTML page.</p>
</div>
<div id="bottom">
Lorem opsum dolor sit amet, consecteruer adipscing elit, seddiam nonummy nibh
eulsmod rincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam,quis nostrud exerci tation ullamcorper suscipit lobartis nisl ut aliquip ex ea
commodo consequat.</aiv>
</body>
</html>
Output:
It should be like this.
=========================================================================================
22
- aebihis
CSS & JavaScript
=============================================================================================
External Style Sheet
Each page must include a reference to the external style sheet file inside the <link> element goes inside the <head>
section:
Example
…
<head>
<link rel=”stylesheet” type=”text/css” href=”style2.css”>
</head>
…
An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must
be saved with a .css extension
Here is how the “style2.css” looks:
Example:
h1{
color: navy;
margin-left: 20px;
}
…
 Now you will create another layout but the same page content with External Style Sheet.
StyleSheet 2 (External Style Sheet)

Save the html file as exstyle.html
Save the css file as style2.css
It should be like this:
=========================================================================================
23
- aebihis
CSS & JavaScript
=============================================================================================
 Remove the style with the same page content
StyleSheet 3 (No Style)

Save as nostyle.html
It should be like this:
=========================================================================================
24
- aebihis
CSS & JavaScript
=============================================================================================
LECTURE 10: JavaScript
- is used to define a client-side script. Common uses for JavaScript are image manipulation, form validation, and
dynamic changes of content.
- The <script> </script> element either contains scripting statements, or it points to an external script file
through the src attribute.
Syntax:
<html>
<head>
<title>Testing</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>

</body>
</html>
Object - in JavaScript, it is a person or a thing.
Built-in object – is JavaScript objects that neither depends on nor belong to another object, such as the document or window.
Built-in JavaScript Objects:
OBJECT DESCRIPTION
Date Accesses the system time and date
Document Represents the content of a browser’s window
Form Represents forms created with the <form> tag
Image Represents images created with the <img> tag
Location Switches to a new Web Page
Math Performs Calculation
Navigator Obtains information about the current Web browser
Window and Frame Represents a browser window or every frame within a browser window;
every frame is a window and uses the same properties and methods as
the window object.
Number Supports special constants
Screen Gives Platform-specific information about the user’s screen
Boolean Converts objects to Boolean Values
Array Returns an ordered set of values
String Represents a set of characters
History Keeps track of Web Pages visited
Function Accesses information about specific functions
Properties - are attributes of objects and describe an object’s characteristics.
Object and Property:
General Form object.property

Comment The object is stated first, then a period, the the descriptive property. A
value can be assigned to the property or the property can return a value
Examples Document.bgColor=”lightblue”
Browser=navigator.appName
=========================================================================================
25
- aebihis
CSS & JavaScript
=============================================================================================
Methods - are actions that an object can perform.
Example: the methods associated with the car object might be drive, turn and stop. An object and one of the methods are
written as: car.drive()
Some methods require an argument, which is a value given to the method.
Argument – is the message used in a method that is passed to the object.
Example 1: given a car object the turn() method, a statement could be written as car.turn("left") where the
argument "left" is additional information describing which way the car should turn.
Example 2: document.write("this is an example")
where:
 the document is the object
 write() is the method
 "this is an example" is what is to be written to the document
Object and Method:
General Form objectname.method(parameters)

Comment Where objectname is the object, method is the action, and parameters
are optional items or instructions the method should use. A period
separates the object name from the property or method name.
Examples document.write(“Some text”)
window.alert(“This is a message”)
var toDayDate=Date.toString()
User-defined functions – is a javascript code written to perform certain tasks repeatedly.
Global functions – are really methods that belong to the global object and also are called top-level methods.
Event – is the result of an action, such as a mouse click or a document loading.
Event Handler – is a way to associate that action with a function.
Javascript Variables
 store values that can change depending on the results of an expression or data entered by a user from a form.
 case sensitive
Naming Conventions for Javascript Variables:
Rule Valid Name Examples Invalid Name Examples

Name must begin with a letter or Months 9Months
underscore
Rest of name must be letters, Last_Name Last-name
numerals, or undrscore
Name may not use spaces or ZipCode zip.code or zip code
punctuation
Name may not contain Javascript xNow Date
objects, properties and reserved
words
Global Variables – means that the variable value is available for use anywhere inside the Web Page. To define a variable as
global, it must be declared in the <script> section before any of the user-defined functions.
Local Variables – means that the variable’s value is available only in the function in which it is defined.
=========================================================================================
26
- aebihis
CSS & JavaScript
=============================================================================================
Data Type – type of data they store, such as text, numbers. Javascript data types are numeric, string, date or Boolean.
Keyword or reserved word – is a word with special meaning.
NOTE: Javascript variables are loosely typed, which means they do not have to be assigned a specific data type. Javascript
indicates the data type by declaring the variable with an initial value because this technique and features allows variables to
be flexible and store any data type.
Assigning Values to Variables:
General Form var variableName=value

Comment where var is an optional keyword to designate a
variable; variableName is a valid variable name; and
value is the string numeric, date or Boolean value
being assigned to the variable
Examples var NickName="Shane"
var lineCnt=1
var Continue=false
Creating a New Object Instance:
General Form var variableName=new Builtin_Object

Comment Where variableName is the name of the new object
instance; new is the required keyword; and
Builtin_object is the name of the object from which
new object instance is to be created.
Examples var sysDate=new Date()
var sysDate=new Date(“October 5, 2009”)
var quote=new String(“No man is an
island.”)
External JavaScript
 JavaScript files have the file extension .js.
Example (Define a small function using Javascript in script.js):

function Hello()
{
alert("Hello, World");
}
 External scripts are practical when the same code is used in many different web pages.
Example (External JS in HTML document)

<!DOCTYPE html>
<html>
<head>
<script src="/html/script.js" type="text/javascript"/></script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Click Me" />
</body>
</html>
Internal JavaScript
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Hello(){
}
=========================================================================================
27
- aebihis
CSS & JavaScript
=============================================================================================
</script>
</head>
<body>
</body>
</html>
or
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function Hello(){
}
</script>
</body>
</html>
JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(“id”) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Example:
<!DOCTYPE html>
<html>
<body>
<h1>innerHTML example</h1>
<p id="try"></p>
<script>
document.getElementById("try").innerHTML = 6 + 7;
</script>
</body>
</html>
Using document.write()
For testing purposes, it is convenient to use document.write():
=========================================================================================
28
- aebihis
CSS & JavaScript
=============================================================================================
Example:
<!DOCTYPE html>
<html>
<body>
<h1>document.write example</h1>
<script>
document.write(6 + 7);
</script>
</body>
</html>
or
<!DOCTYPE html>
<html>
<body>
<h1>document.write example</h1>
<button onclick="document.write(6 + 7)">Try it</button>
</body>
</html>
Using window.alert()
You can use an alert box to display data:
Example:
<!DOCTYPE html>
<html>
<body>
<script>
window.alert(“alert” + (6 + 7));
</script>
</body>
</html>
Using console.log()
For debugging purposes, you can use the console.log() method to display data.
You will learn more about debugging in a later chapter.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>console.log example</h1>
<p>Inpect the page. </p>
<script>
=========================================================================================
29
- aebihis
CSS & JavaScript
=============================================================================================
console.log(6 + 7);
</script>
</body>
</html>
Examples Output
Sample1.html
<html>
<head>
<title>SampleJavascript </title>
</head>
<body bgcolor=skyblue>
<script language=javascript>
alert("This is my first javascript")
</script>
</body>
</html>
Sample2.html
<html>
<head>
<title> SampleJavascript2 </title>
</head>
<body>
<input type=button value="button1" onclick="alert('mabuhay')"><br><br>
<input type=button value="button2" onclick="javascript:alert('hello')">
<br><br>
<a href="#" onclick="alert('kamusta')">greetings</a><br><br>

<a href="javascript:alert('are you sure?')">alert</a>
</body>
</html>
Sample3.html
<html>
<head>
<title> SampleJavascript3</title>
function hello()
{
alert("kamusta")
}
</script>
</head>
<body>
<input type=button value="greetings" onclick="hello()">
</body>
</html>
=========================================================================================
30
- aebihis
CSS & JavaScript
=============================================================================================
Sample4.html
<html>
<head>
<title> SampleJavascript4</title>
</head>
<body>
document.write("<html><head><title>SampleJavascript5
</title></head>")
document.write("<body bgcolor=#001428 topmargin=50>")
document.write("<center><img
src='Waterlilies2.jpg'><br><br>")
document.write("<font size=+2 color=#33CCFF>Waterlilies</font></center>")
document.write("</body></html>")
alert("Beautiful flowers")
</script>
</body>
</html>
Sample5.html
<html>
<head>
<title> eventhandler : onload, onfocus,
onblur, onsubmit, onreset,
onkeydown, onmouseover,
onmouseout</title>
</head>
<body onload="alert('If you open a document

onload!')" onunload="alert('If you close the
document, it is onunload!')">
<form onsubmit="alert('Submit Form')" onreset="alert('Initializes the input form')">
<input type="button" value="MouseOver"

onmouseover="alert('mouseover')">
<input type="button" value="Mouse out"

onmouseout="alert('mouseout')"><p>
TechRepublic: <input type="text" size=50 value="Click the textbox"
onfocus="alert('The input in the box is clicked, onfocus')"
onblur="alert('the input in focus leaves, onblur')"><p>
Password :<input type="text" size=50 value="Press the arrowdown key"

onkeydown="alert('You can press keydown')" ><p>
Entry Box: <input type=text size=50 value="The input in the box has been clicked"
onFocus="this.value=''"
onBlur="this.value='Hide value of the textbox'"> <p>
<input type="button" value="Confirm" onclick="alert('The button has been clicked')">
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>
=========================================================================================
31
- aebihis
CSS & JavaScript
=============================================================================================
Sample6.html
<html>
<head>
<title> SampleJavascript6 </title>
<script>
i=100
function test1()
{
var i=10
document.write(i)
}
function test2()
{
document.write("<br>" + i)
}
</script>
</head>
<body>
<script language="javascript">
test1()
test2()
</script>
</body>
</html>
Sample7.html
<html>
<head>
<title> Declare an Array Variable and find out the length of the
array </title>

</script>
</head>
<body>
<center><img src="cuba.jpg"></center>
=========================================================================================
32
- aebihis
CSS & JavaScript
=============================================================================================
</body>
</html>
Sample8.html
<html>
<head>
<title> Grades </title>
<script language="JavaScript">
function gradeSamp()
{
txtTotal=form1.total.value
if(txtTotal>=90)
result="Excellent"
else if(txtTotal>=80)
result="Good"
result="Average"
result="Poor"
else if(txtTotal=="")
result="Value Needed"
else
result="end"
form1.txtResult.value=result
}
</script>
</head>
<body>
<center>
<form name="form1">
Total Score : <input type="text" size=3 name="total">
<input type="button" class=button value="Rate" onclick="gradeSamp()">
Result : <input type="text" size=10 name="txtResult">
</form>
</center>
</body>
</html>
Sample9.html
<html><head>
<title> Months </title>
</head>
<body>
<center>
month=prompt("Please enter a number from 1-12!","");

=========================================================================================
33
- aebihis
CSS & JavaScript
=============================================================================================
switch(month)
{
case "1" :
case "3" :
case "5" :
case "7" :
case "8" :
case "10" :
case "12" : document.write(month," has 31 days.");break;
case "4" :
case "6" :
case "9" :
default : document.write("There is no equivalent month for that number. Thanks
anyway..");}
</script>
</center>
</body>
</html>
Sample10.html
<html>
<head><title>Sum Total
</title>
document.write("<h3>The initial value of sum is 0 </h3>")
var sum=0
for(a=1;a<11;a++)
{
sum=sum+a
document.write(a + " union with current value of sum is : " + sum + "<BR>" )
}
</script>
</head>
<body>
</body>
</html>
Sample11.html
<html>
<head>
<title>Multiplication Table using Nested for

statement </title>
=========================================================================================
34
- aebihis
CSS & JavaScript
=============================================================================================
</head>
<body>
document.write("<h3 align=left>Multiplication Table!</h3>");
for(i=1;i<=9;i++)
{
for(j=2;j<=9;j++)
{
document.write(j + " x " + i + " = " + (i*j) + " : ");
}
document.write("<br>");
}
</script>
</body>
</html>
Sample12.html
<html>
<head><title> The object properties </title></head>
<body>
<script language="javascript1.2">
document.fgColor="white"
document.bgColor="orange"
document.linkColor="blue"
document.vlinkColor="yellow"
document.alinkColor="pink"
document.write("<h3>document title :"+document.title+"<br><br>")
document.write("ForeColor :"+document.fgColor+"<br><br>")
document.write("Background :"+document.bgColor+"<br><br>")
document.write("link color :"+document.linkColor+"<br><br>")
document.write("Neighbor Last Updated 2006-05 :"+document.lastModified+"<br><br>")
document.write("URL address :"+document.URL+"<br></h3>")
</script>
</body>
</html>
=========================================================================================
35
- aebihis
CSS & JavaScript
=============================================================================================
Sample13.html
<html>
<head><title>Link object and anchor object properties</title>
function hanbitInfo() //Hanbit Media Links information
{
alert("\n Full Path : " +document.links[10].href
+"\n\n Protocol : " +hanbit.protocol
+"\n\n Host : " +hanbit.hostname
+"\n\n Route : " +document.links[10].pathname
+"\n\n Port : " + document.links[10].port)
}
</script></head><body>
<a name=top><h1 align=center>Link object and anchor object</h1></a>
<table width=600 align=center>
<tr valign=top>
<td>
<a href=#site1>April 14, 2006</a><br>
<a href=#site2>cinema information</a><br>
<a href=#site3>Cool Site</a><br>
</td>
<td>
<a name="site1">April 14, 2006 site</a><br>
<a href="http://www.yahoo.com"> yahoo </a><br>
<a href="http://www.naver.com"> naver </a><p>
</td>
<td>
<a name="site2">Cinema information Site</a>
<ul>
<li> <a href="http://www.hollywood.com/">Hollywood </a>
<li><a href="http://www.cine21.co.kr/"> Mr.21 </a>
<li> <a href="http://www.escreen.co.kr/">Screen</a>
<li> <a href="http://www.cineline.co.kr/">Line</a>
<li> <a href="http://films.hitel.net">At film</a>
</ul>
</td>
<td>
<a name=site3>Cool Site</a><br>
<a href="http://www.hanbitbook.co.kr/book/new/newbook.html"
name=hanbit>Hanbit
media</a>
</td>
</tr>
=========================================================================================
36
- aebihis
CSS & JavaScript
=============================================================================================
</table>
<br><br><br>
<hr>
document.write("link : " + document.links.length + "<br>")
document.write("anchor : " + document.anchors.length + "<br>")
for(i=0; i<document.links.length; i++)
{
document.write(i + " : " + document.links[i] + "<br>")
}
</script>
<input type="button" value="Hanbit Media Links information" onclick="hanbitInfo()">
<hr><a href=#top>Top</a>
</body>
</html>
=========================================================================================
37
- aebihis

CSS JavaScript Lecture

Uploaded by

Copyright:

Available Formats

You might also like

CSS JavaScript Lecture

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS JavaScript Lecture

Uploaded by

Copyright:

Available Formats

CSS & JavaScript

LECTURE 9: CASCADING STYLE SHEETS (CSS)

Types of Style Sheets:

3. external (or linked)

<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" />

Or you can also use the @import method as shown below:

<style type="text/css">@import url(Path To stylesheet.css)</style>

Here are a few reasons this is better.

Reference CSS from HTML

o Class Selectors: selects all elements that belong to a given class.

o ID Selectors: selects a single element that’s been given a unique id.

General Purpose Pseudo-Selector:

Specific to hyperlinks (and/or buttons):

CSS Anchors and Links

No Style Sheet With Style Sheet (Style Information)

 background-color:specifies the background color.

You can set the color of text with the following:

Possible values are:

background: #ffffff url(path_to_image) top left no-repeat fixed;

background-repeat:tile image in background

or you can set each property individually…

font: italic bold normal small/1.4em Verdana, sans-serif;

There are 2 choices for values:

font-family: Verdana, sans-serif;

There are alot of choices for values:

Possible values are:

Possible values are:

Possible values are:

You can align text with the following:

Possible values are:

This text is aligned left.

This text is aligned in the center.

This text is aligned right.

This text is justified.

You can decorate text with the following:

Possible values are:

Possible values are:

This text is indented 10px pixels.

Possible values are:

This First Letter In Each Word Is Capitalized, Though It Is Not In My File.

THIS TEXT IS ALL UPPERCASE, THOUGH IT IS ALL LOWERCASE IN MY FILE.

this text is all lowercase. though it is all uppercase in my file.

First -Letter with Class

p.special_letter:first-letter {font-size: x-large; font-weight: bold; color: #ff0000;}

<p class="special_letter">the content</p>

The following properties can be assigned to the first-letter pseudo element:

List Properties <ul>

 list-style:type position image

list-style: value value;

or you can control them individually…

List Style Image

list-style-image: url(path_to_image.gif, jpg or png);

List Style Position

List Style Type

border: 1px solid #333333;

or you can set each property individually…

o RGB color code

<!—type your comment/s here-->