Scribd
Upload
67 views37 pages

Lec4 Web Programming

This document discusses CSS values and properties. It covers different types of CSS values including: - Length values that must include a unit of measurement like px, em, etc. - Color values that can be color names, hex codes, or RGB values. - URL values for background images. - Keyword values like text-align: center. - Percentage values that are relative to other defined values. It also discusses inheritance of CSS properties, and examples of using font properties.

Uploaded by

Menna Saed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
67 views37 pages

Lec4 Web Programming

This document discusses CSS values and properties. It covers different types of CSS values including: - Length values that must include a unit of measurement like px, em, etc. - Color values that can be color names, hex codes, or RGB values. - URL values for background images. - Keyword values like text-align: center. - Percentage values that are relative to other defined values. It also discusses inheritance of CSS properties, and examples of using font properties.

Uploaded by

Menna Saed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 37

Web Programming

CS433

Dr Walid M. Aly

Lecture 4

CSS Values &Properties

http://www.w3.org/TR/CSS2/propidx.html
2
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Values of CSS Properties
i-CSS Length Values
• Length values have a numerical value, and must be followed by a unit of
measurement. Eg: 14pt, The units can be:-
In(inch) , cm (centimeter), mm (millimeter) <head>
em :used to specify font sizes, 1em is equal to the <style type = "text/css">
current font size. The default text size in browsers p.double {font-size:2em; color:red;}
is 16px. So, the default size of 1em is 16px. 2em </style>
means 2 times the size of the current font
</head>
ex:height of x letter,pt (1/72 inch),
px(pixels) <body>
<h1>
<p>
this is the first line
ii-CSS Color Values </p>
<p class="double">
 Color name, e.g. white this line is in double size
 Hex form: #XXXXXX, e.g. #FFFFFF </p>
 rgb(n1, n2, n3), e.g. rgb(255, 255, 255)
…..
white FFFFFF
black 000000
PropertiesValueDemo1.html
3
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
iii-URL values
URLs have a straightforward form:url(protocol://server/pathname)
body{background: url(http://www.htmlhelp.com/stripe.gif)}

body {background: url(stripe.gif)}

iv-Keyword values
Many different properties can take keyword values. A keyword value is usually a single word that is translated
into a numerical value by a browser.
The keywords available for a specific property will be appropriate to that particular property.

Text-align:center

v-Percentage values
Instead of using a unit of measurement many properties can also take percentage values.
Percentage values are relative to other values, as defined for each property.

color:rgb(0%,80%,0%)

PropertiesValueDemo.html4
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Example: Use a Combination of Percent and Em
<html>
<head>
<style type = "text/css">
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all
major browsers, and allows all browsers to resize the text!</p>
</body>
</html>
txtSizeDemo.html

5
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Inheritance
• Children of an element are element defined within it(parents).
• Some property values are inherited by the children of an element.
• Each property defines whether it is inherited or not.

Example
<h1 style="color:red;">
How <em>are</em> you ?
</h1>

The color property is inherited, If no color has been assigned to the em


element, the emphasized” are "will inherit the color of the parent element, so if
h1 has the color red ,the em element will likewise be in red.

The value of any property will be calculated by a browser in the following order:-
1. if there is a cascaded style value of the property use it else,
2. if the value is inherited is use it else,
3. use the default value of the browser
PropertiesValueDemo.html6
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
The inherit CSS Property Value
Even though certain characteristics are inherited automatically in CSS, there may be situations in
for inherit which you want to increase the weight of the inherited property. Specifying a value of
s computed ’s applied to an element will cause the element to gain its parent’any CSS property that
value for the property in question. By specifying in the author style sheet that a property should
inherit its value, you can increase its weigh

p{
color: #000;
}
in the case of anchor elements, the color property is commonly set to
p a:link {
blue in the user agent style sheet. If you wanted to reinforce the
importance of the inherited value, you could use the value inherit in an color: inherit;
author or user style }

When you’re using shorthand notation such as background’nac uoy ,t mix inherit with other values .

p{ X
background: #fff inherit left top;
}

7
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Font Properties
• font-family
– Value is a list of font names - browser uses the first in the list it has
– -ex : font-family: Arial, Helvetica, Futura
– If the font name has more than one word, the whole
name should be delimited by single quotes.
• font-size
– Possible values: a length number or a keyword, such as smaller, xx-large, etc.
– ex: font-size:10pt
• font-style
– italic, normal
– ex: font-style: italic
• font-weight - degrees of boldness
– bolder, lighter, bold, normal
– ex: font-weight:bold
• font-variant - In a small-caps font, all lowercase letters are converted to uppercase letters.
in a smaller font size than the original uppercase letters in the text.
– normal, small-caps
– ex: font-variant - : small-caps
• font - for specifying a list of font properties
– ex:font: bolder 14pt ‘Arial Helvetica’
– the last element should be the font family preceded by the font size and
these two values are mandatory .
– Order must be: style, variant , weight, size, font name(s) , the first 3 values
are optional with the preferred mentioned order

8
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Example on formatting font
/* styles.css - an external style sheet
for use with fonts2.html
*/
p.big {font-size: 14pt;
font-style: italic;
font-family: 'Times New Roman';
}
p.small {font: bold 10pt 'Courier New';}
h2 {font-family: 'Times New Roman';
font-size: 24pt; font-weight: bold}
h3 {font-family: 'Courier New';
font-size: 18pt}

9
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
………
<head> <title> External style sheets </title>
<link rel = "stylesheet" type = "text/css"
href = "styles.css" />
</head>
<body>
<p class = "big">
If a job is worth doing, it's worth doing right.
</p>
<p class = "small">
Two wrongs don't make a right, but they certainly
can get you in a lot of trouble.
</p>
<h2> Chapter 1 Introduction </h2>
<h3> 1.1 The Basics of Computer Networks </h3>
</body>
</html> Font2.html

10
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
CSS Cursor property
CSS cursor property is used to change the mouse cursor icon for a
few different HTML elements. Below is a list of the most commonly
accepted cursors:

• default - Display the normal mouse cursor icon


• wait - The mouse icon to represent the computer "thinking"
• crosshair - A cross hair reticle
• text - An "I" shaped icon that is displayed when selecting text
• pointer - A hand icon that you see when you hover over an HTML
link
• help - A question mark (usually)
• A url value : example :cursor:url(cursorPic.cur);

Web Programming CS433 08:58 lec4 Dr Walid M. Aly


CSS Cursor Icons
<!DOCTYPE html>
<html>
<title>CSS Cursor Code</title>
<link rel="stylesheet" type="text/css"
href="style1.css" />
</head>
<body>
<p>this is p element</p>
<h4>this is h4 element</h4>
<h5>this is h5 element</h5>
<h2> this is h2 element </h2>
</body>
cursorDemo.html
</html>

p { cursor: wait }
h4 { cursor: help }
h5 { cursor: crosshair } Style1.css
h2 {cursor:url(cursorPic.cur);}
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
CSS Text
Text Color
body {color:blue;}
The color property is used to set the color of the text. h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Text Alignment
The text-align property specifies the horizontal alignment of text in an element
Values of center/left/right can be used

< h1 style="text-align:center">
Center-aligned heading</h1>
< p>This is a paragraph.</p>
< /body>
< /html>

Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
13
Web Programming CS433 p {text-indent:50px;} lec4
08:58 Dr Walid M. Aly
Text-Decoration
• The text-decoration property is used to specify some special features of text.
• The available values are line-through, overline, underline,blink and none, which is
the default. Many browsers implicitly underline links. The none value can be used
to avoid this underlining.
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

vertical-align property
• The vertical-align property sets the vertical alignment of an
element. Eg: vertical-align:sub
• sub Aligns the element as it was subscript
• super Aligns the element as it was superscript
• baseline: Align the baseline of the element with the baseline
of the parent element. This is default
14
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Example: Formatting Text using CSS
<!DOCTYPE html>
<html>
<head> <title> Text decoration </title>
<style type = "text/css">
p.through {text-decoration: line-through}
p.over {text-decoration: overline}
p.under {text-decoration: underline}
</style>
</head>
<body>
<p class = "through">
This illustrates line-through
</p>
<p class= "over">
This illustrates overline
</p>
<p class = "under">
This illustrates underline
</p>
</body></html>
Decoration.html

15
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
CSS Background and Colors
A number of CSS properties can be used to set the color and background of a webpage

• color
h1{
specify the foreground color
color:red;
• background-color }

specify the back ground color


body {
• background-image background-color:#b0c4de;
. specify the back ground image }

. values : url , none


body {
•background-size background-image:url('paper.gif');
You can specify the size in pixels or in percentages }

16
The background-color
Web Programming CS433 property
08:58 lec4 attribute obsolete.
makes the "old" bgcolor Dr Walid M. Aly
• background-repeat
Possible values: repeat (default), no repeat, repeat-x, or repeat-y
no-repeat
repeat-x

repeat-y repeat

17
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Background - Shorthand property
background: #00ff00 url('smiley.gif') no-repeat fixed center;

When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment:Sets whether a background image is fixed or scrolls with the rest of
the page [scroll-fixed]
background-position:Sets the starting position of a background image
[left top-left center-left bottom-right top-right center-right bottom-center top-center center
center bottom]

It does not matter if one of the property values is missing, as long as the ones that are
present are in this order. Demo.html
18
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
CSS Example : Color & Background Color
<!DOCTYPE html>
<html>
<head><title>Color</title>
<META content=text/html;charset=utf-8 http-equiv=Content-Type>
<style type=text/css>
body {
background-color: grey
}
P.redback {
background-color: red;
color: blue
}
</STYLE>

<body>
<h3>Background Color </h3>
<P class=redback>Hello there! </P>
<p>some other text with default colour </p></body></html>
color.html

19
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
CSS Example : Background image
…
<html >
<head> <title> Background images </title>

<style type = "text/css">


body {
background-image: url(‘photo1.jpg’);
background-repeat: no-repeat;
background-size:100% 100%;
}
</style>
</head>
<body>
<h1>
A great holiday location
</h1>
</body>
</html>

Background images.html
20
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
The Box Model
 Each element in a document is considered to be a rectangular box consisting
of content area, padding, a border and margins

Content - The content of the box, where text and images appear
Padding - Clears area around the content. The padding is affected by
the background color of the box
Border - A border that goes around the padding and content. The
border is affected by the background color of the box
Margin - Clears area around the border. The margin does not have a
background color, it is completely transparent
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Content
• The main content property are width , height
• width and height properties of an element set the width and height of the
content area.
• if the setting of the 2 dimensions made the content exceed boundaries, the
element is made larger except if the overflow property is set to scroll /auto

overflow
The value of the overflow property can be :
• visible: The overflow is not clipped. It renders outside the element's box.
This is default
• hidden The overflow is clipped, and the rest of the content will be
invisible
• scroll :The overflow is clipped, but a scroll-bar is added to see the rest of
the content
• auto :If overflow is clipped, a scroll-bar should be added to see the rest
of the content
22
Web Programming CS433 Width.html
08:58 lec4 Dr Walid M. Aly
Borders
• border-style values: none, dotted, dashed, and double, groove, solid
• border-width values: thin, medium (default), thick, or a length value in
pixels
• border-color – any color
• border : short hand property for setting all
values the order should be width-style-color
ex: border:5px solid red;
Margins
• The space between the border of an element and its neighbor element
• The margins around an element can be set with margin-left, etc. -
just assign them a length value
<img src = "c210.jpg" style = “margin-bottom:
0.35in;" />
MarginDemo.html

boxModelDemo html
23
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Padding
 Controlled by: padding-left, padding-right, padding-top ,padding-bottom,padding
 default value is zero
 Ex padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
The padding property can have from one to four values.
• padding:25px 50px 75px 100px;
– top padding is 25px
– right padding is 50px
– bottom padding is 75px
– left padding is 100px
• padding:25px 50px 75px;
– top padding is 25px
– right and left paddings are 50px
– bottom padding is 75px
• padding:25px 50px;
– top and bottom paddings are 25px, right and left paddings are 50px
– padding:25px;
–all four paddings are 25px

boxModelDemo html
24
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
CSS Element Positioning
• The position of any element is dictated by a number of properties:
position, left, top, z-index
– position :The possible values of position are: static,
,absolute,relative, and fixed

if position is set to static


Elements renders in order, as they appear in the document flow. This is
default.
if position is set to absolute
-left, top : Sets the left, top margin edge for a positioned box, the top
and left property values are measured from the upper-left corner of the
ancestor element

<p style = "position: absolute; left:


50px; top: 100px;">
top
element
left

25
Web Programming CS433 absPos.html
08:58 absPos2.html lec4 Dr Walid M. Aly
CSS Element Positioning
if position is set to relative
-left, top,bottom,right : are offsets from its
normal position
-If no offsets properties are specified, the element is
placed exactly where it would have been placed if no
position property were given.
if position is set to fixed
-The element is positioned relative to the browser
window, it is not affected with scrolling the page

top
element
left Superscript effect
right
.super{ position: relative; top:-1ex}
bottom Suberscript effect
.sub{ position: relative; bottom:-1ex}
26
Web Programming CS433 FixedPositionDemo.html
08:58 lec4 Dr Walid M. Aly
CSS Element Positioning.......
• z-index :
Sets the stack order of an element thus providing layers. elements that have higher
z index values are displayed in front of elements with lower z-index, this allows
you to design your page in layers.

<div style="position:relative; font-size:50px; z-index:2;">LAYER 1</div>


<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">LAYER 2</div>

<div style="position:relative; font-size:50px; z-index:3;">LAYER 1</div>


<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">LAYER 2</div>

27
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100"
height="140" />
<p>Because the image has a z-index of -1, it
will be placed behind the text.</p>
</body>
</html>
28
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
the float property
- Sometimes we want text to flow around another element -
- The float property has the possible values, left, right, and none (the default)
- If we have an element we want on the right, with text flowing on its left, we use the
default text-align value (left) for the text and the right value for float on
the element we want on the right
<img src = "c210.jpg"
style = "float: right" />
-- Some text with the default alignment - left

Clear Property
No floating elements allowed on the left or the right side of a specified element
Values :left, right , both, none.
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
<html>
<head>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image
with style <b>float:right</b>. The result is that the
image will float to the right in the paragraph.</p>
<p>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. float:none;
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
30
</html> lec4 Dr Walid M. Aly
Web Programming CS433 08:58
CSS direction Property

The direction property specifies the text direction/writing direction.

Value Description
ltr The writing direction is left-to-right. This is default
rtl The writing direction is right-to-left

div
{
direction:rtl;
}
directionDemo.html

31
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
CSS display Property
• The display property can have values like: inline , block,none
• Changing How an Element is Displayed
• none:The element will not be displayed at all
• Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way.
li {display:inline;} span {display:block;} p {display:inline;}

<style type="text/css">
li{display:inline;}
</style>
</head>
<body>
<p>Display this link list as a horizontal menu:</p>
<ul>
<li><a href=“…….“> HTML</a></li>
<li><a href=“…..">CSS</a></li>
<li><a href=“………..>JavaScript</a></li>
<li><a href=“…………..”>XML</a></li>
</ul>
</body>
32
</html>
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
How to control the layout on your web pages?

The 3 ways to format a web page are :-


I. Using CSS (Cascading Style Sheets)
II. Using Tables
III. Using Frames

Web designers are increasingly using CSS as


standard to both format and position elements
on a web page however tables and frames are
still in use.

33
http://www.thewebseye.com/website-layout.htm
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
Using CSS to format layout

34
Web Programming CS433 08:58Page.html
Home lec4 Dr Walid M. Aly
header
nav

body
side

main

footer

35
Web Programming CS433 08:58Page.html
Home lec4 Dr Walid M. Aly
<div id="main">
<!DOCTYPE html> <h2>Introduction</h2>
<html> <p>
…..
</p>
</div>
<head> <title> Demo Page</title>
<link rel = "stylesheet" type = "text/css"
href = "styles.css" /> <div id="sidebar">
</head> <h2>Navigate</h2>
<body>
<ul>
<div id="header"><h1>Cloud <li><a href="#">Link 1</a></li>
computing</h1></div> <li><a href="#">Link 2</a></li>
</ul>
</div>

<div id="nav">
<ul>
<li><a href="http://en.wikipedia.org/wiki/Cloud_computing" <div id="footer">
>Cloud artilce on Wikipedia</a></li>&nbsp&nbsp&nbsp <p>……….</p>
<li><a href="http://www.ibm.com/cloud-computing">Cloud </div>
artilce on IBM</a></li> </body>
</ul> </html>
36
</div>
Web Programming CS433 08:58 lec4 Dr Walid M. Aly
html { #nav {
background:Aquamarine; padding:5px 10px;
} #sidebar { background:yellow;
float:right; }
width:250px;
padding:10px;
body { height:600px; #nav ul {
width:900px; background:red; margin:0;
margin: auto; } padding:0;
background:LawnGreen; }
}
#main { #nav li {
#header { display:inline;
width:600px;
padding:5px 10px; }
height:600px;
background:gray;
padding:10px;
color:red
background:YellowGreen ;
} #footer {
}
clear:both;
padding:5px 10px;
background:#cc9;
}
37
Web Programming CS433 08:58 Styles.css lec4 Dr Walid M. Aly
Web Usability

You Do not
Have to Think!

http://bavarianbrathaus.info/

http://www.libertyvan.com/ http://nwokillers.weebly.com/our-beliefs.html

http://dh.ncl.ac.uk/
http://himclothing.com/
http://www.siphawaii.com/ 38
Web Programming CS433 08:58 lec4 Dr Walid M. Aly

You might also like