Web Design
advertisement
Web Design (2)
S.2 Computer Literacy
Why CSS?
Cascading Style Sheets (CSS) is a simple mechanism for adding style(s) to web documents.
Styles define how to display HTML elements.
With CSS, we can write a web page in this way:
HTML – Define the content structure in a meaningful way
CSS – Control the presentation of different elements in the web page
Take a look at CSS Zen Garden:
http://www.csszengarden.com/
Same content but different designs (themes) by CSS!
“Sakura”
“Under the Sea!”
Start Writing CSS
Syntax of a CSS rule:
“Kyoto Forrest”
“Orchid Beauty”
A CSS Rule
body { background-color: yellow; color: blue }
Selector
(Where to apply
the styles)
CSS Property
A style declaration
Value
Another
style declaration
Separated by semi-colon
CSS Selector:
Selector
Apply CSS styles to…
HTML
Element
ALL instances
of that element
ID
The element
with this ID
Class
ALL elements
of a class
Element
+ Class
Mixed
Example
Meaning
The background color of ALL
p { background-color: yellow }
paragraphs will be changed to yellow.
#abc { color: blue }
The text color of the element with ID
“abc” is changed to cyan.
.xyz { color: red }
The text color of ALL element of
class “xyz” is changed to red.
Specific elements
of a class
p.xyz { color: red }
The text color of paragraphs of class
“xyz” is changed to red.
Element in another
element
div#abc ul { color: red }
The unordered list (ul) in a div
element with ID “abc”.
ID is a unique identifier to an element. (no two elements can have the same ID)
To specify the ID of an element, we use the id attribute.
E.g. <ul id="menu"> ... </h1> ,
<div id="footer"> ... </div>
Class is used to group some elements for apply same sets of styles.
To specify the class of an element, we use the class attribute.
E.g. <p class="headline"> ... </p>,
<span class="highlight"> ... </span>
http://www.clsmss.edu.hk/~whlau/s2computer/
div are span are new
elements that will be
discussed later.
106757638
P.1/6
Web Design (2)
S.2 Computer Literacy
Adding Style Sheet to an HTML File
There are three ways to add CSS code to your HTML file.
1) Inline Styles: Add a style attribute to an HTML element:
<p style="color: red; font-size: 20px;"> ... </p>
-
The disadvantage is obvious: you have to add style attribute to every element!
-
This method is only useful when editing very simple web page.
2) Internal (Embedded) Style Sheet: Write all the styles in the same place in an HTML file by
adding a style element the head element.
CSS
Selector
<head>
<title>TEST!</title>
<style type="text/css">
body { background-color: yellow; color: blue }
</style>
</head>
-
It’s easier to manage and modify all styles as the codes are written in the same place.
CSS selectors have to be used to specify the elements to apply styles.
Disadvantage: The CSS codes cannot be re-used across different web pages.
3) External Style Sheet: The style sheet is stored in an external file.
Name of the
CSS file
<link rel="stylesheet" type="text/css" href="style.css" media="all">
Link to
another file.
-
Relation of
that file.
Advanced: It is possible to use different
style sheets for different media types.
Same CSS codes can be applied to different web pages.
CSS: Background Color and Text Color
body { background-color: yellow; color: blue }
The above rule sets the background color to yellow and text color to blue for the body element.
There are color names such as: red, green blue, cyan, magenta, yellow, black, white, etc.
We may also use HTML color codes, which consists of six hexadecimal digits, and every
two of them represent one of the three primary colors: red (R), green (G) and blue (B).
Must start with #
#ff00ff
R
G
B
Hexadecimal digits are:
0 1 2 3 4 5 6 7 8 9 a b c d e f
Smallest
Greatest
For each color:
00 represents no light for that color.
ff represents full intensity of that color
Examples:
#ff0000 – Red
#0000ff – Blue
#ff00ff – Magenta
#ffffff – White
#00ff00 – Green
#00ffff – Cyan
#ffff00 – Yellow
#000000 – Black
More information on web
HTML Color Codes:
http://html-color-codes.com/
Colormatch 10K:
http://www.nickherman.com/colormatch/
We may use simplified color codes (three-digit) in CSS. E.g. #fff is white, #000 is black.
http://www.clsmss.edu.hk/~whlau/s2computer/
106757638
P.2/6
Web Design (2)
S.2 Computer Literacy
CSS: Background Image
It is possible set background image for every element by CSS: (Note: Values in bold are default values.)
CSS Property
background-image
background-repeat
background-attachment
background-position
Possible Value(s)
Meaning
url("image.jpg")
Set path for the BG image (JPEG, GIF or PNG)
repeat
BG image repeats horizontally and vertically
repeat-x
BG image repeats horizontally only
repeat-y
BG image repeats vertically only
no-repeat
BG image does not repeat
scroll
BG image scrolls with the page
fixed
BG image is fixed (not affected by scrolling)
left
top
right
center
center
bottom
x%
y%
xpos
ypos
Set the position of BG image (x-position first, and
then y-position, separated by space).
Examples:
background-position: right top;
background-position: 20% 30%;
background-position: 50px 100px;
Example (To test scrolling, you may add <br> to lengthen the page):
body { background-color: #fff;
background-image: url("flower01.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top; }
Shorthand (set all the above in one line!):
body { background: #fff url("flower01.jpg") no-repeat fixed right top; }
CSS: Font and Text Styles
Font styles: (Note: Values in bold are default values.)
CSS Property
font-family
Possible Value(s)
n px
font-size
n pt
n em
n %
font-weight
font-style
Meaning
A list of font family names
separated by commas
To set font family for the text in the element.
(see below)
normal
bold
normal
italic
To set font size (default is 16px).
px – pixel
em: 1 em equal to the current font size.
pt – point (seldom use)
Set bold letters
Set italic letters
If a computer does not have the first font, it will use the second one, and so on. If all the
fonts in the list are not installed, default font is used (depending on the web browser).
Common font families: Arial, Courier New, Times New Roman, Verdana, Tahoma,
Georgia, Garamond.
Generic font families: serif, sans-serif, monospace.
http://www.clsmss.edu.hk/~whlau/s2computer/
106757638
P.3/6
Web Design (2)
S.2 Computer Literacy
The use of px in font-size allows Firefox, Chrome, and Safari to resize the text, but not
Internet Explorer. To avoid this problem, many developers use em instead of px.
Also, the em size unit is recommended by the W3C. (By default, 1em = 16px)
Text styles: (Note: Values in bold are default values.)
CSS Property
Possible Value(s)
Meaning
none
text-decoration
underline
overline
To add decoration such as underline, overline (line
over text), or a strike-through line.
line-through
left
text-align
center
right
To set text alignment in the element. (default is left)
justify
Example:
h1 { font-family: Arial, sans-serif;
text-decoration: underline;
text-align: center; }
p.warn { font-size: 1.1em;
font-weight: bold;
font-style: italic; }
for heading 1 <hr>
for paragraph of class “warn”
<p class="warn">
Google Web Font: More artistic fonts to use! No installation of fonts!
http://www.google.com/webfonts
Browse the font list, select a font that you like, and then click “Quick-use”.
Go to step 3, copy the code in the box, and paste it in your HTML file before the
<style> element.
Go to step 4, copy the CSS code, in put it in the CSS rule for the element.
Example here
http://www.clsmss.edu.hk/~whlau/s2computer/
106757638
P.4/6
Web Design (2)
S.2 Computer Literacy
Example:
HTML
<link href='http://fonts.googleapis.com/css?family=Gabriela'
rel='stylesheet' type='text/css' />
Add a slash (/) for XHTML standard.
CSS
h1 { font-family: 'Gabriela', serif; }
Use quotes if the
name has a space.
Add a generic font in case
the web font cannot be loaded.
Result
New Elements – div and span
div is a block-level element without any formatting features.
but div does not have space before and after it.
span is an inline element without any formatting features.
element (such as b, i) that mark up a part inside a block.
div is similar to paragraph (p)
span works like text formatting
Example:
HTML code:
<div id='footer'>
Designed by <span class='highlight'>CLSMSS</span> in 2012.
</div>
We may add CSS like this:
div#footer { text-align: center; color: #ccc; }
span.highlight { font-weight: bold; background-color: #cfc; }
More Example: How to center an image? Put an image in a div element (a block
container), and use suitable class name. And then in CSS, use text-align to center
all content in the div element. (Try!)
CSS: Styling Links – Rollover Effect
In CSS, we may use some pseudo-class for hyperlinks to create rollover effects.
Example:
a:link
{ color: blue; }
a:visited { color: red; }
a:hover
{ font-weight: bold; }
a:active
Set blue color for unvisited links
Set red color for visited links
Make the font bold when mouse cursor is over the link
{ text-decoration: none; }
http://www.clsmss.edu.hk/~whlau/s2computer/
Remove the underline when a link is active (selected)
106757638
P.5/6
Web Design (2)
S.2 Computer Literacy
CSS: Styling Lists
Recall: Ordered list (<ol>) and Unordered list (<ul>):
HTML Code
Default
Appearance
Ordered List
<ol>
<li>Keyboard</li>
<li>Mouse</li>
<li>Monitor</li>
</ol>
Unordered List
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
1. Keyboard
2. Mouse
3. Monitor
Apple
Banana
Orange
The default numbering for Ordered list (<ol>) is decimal: 1, 2, 3, …
The default bullets for Unordered list (<ul>) is disc.
Styles for lists: (Note: Values in bold are default values.)
CSS Property
Possible Value(s)
Meaning
decimal
lower-alpha
For ordered list (<ol>):
Change the numbering style
upper-alpha
list-style-type
lower-roman
upper-roman
disc
For unordered list (<ul>):
Change the bullet style
circle
square
list-style-image
url("image.jpg")
Set an image for the bullets of unordered list (<ul>)
Recommended image size: 10x10 to 12x12 pixels
Examples for list-style-type:
list-style-type
list-style-image
For ordered list (<ol>)
For unordered list (<ul>)
For unordered list (<ul>)
(lower-alpha) (upper-alpha)
(circle)
(lower-roman) (upper-roman)
(square)
Example CSS Codes:
ol.demo4 { list-style-type: upper-roman }
ul.demo6 { list-style-type: square }
ul.demo7 { list-style-image: url("bullet-1.gif") }
More Information
CSS Tutorial: http://w3schools.com/css/default.asp
http://www.clsmss.edu.hk/~whlau/s2computer/
106757638
P.6/6
![[#PFR-664] [ACCESS] Using em, percent, named for font sizes and](http://s3.studylib.net/store/data/008524257_1-e1b711369b412e0cc1e52963d3e370f9-300x300.png)
