Scribd
Upload
30 views23 pages

Web Design

Learn web design

Uploaded by

israelinioluwa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
30 views23 pages

Web Design

Learn web design

Uploaded by

israelinioluwa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 23

PART 1: Introduction to CSS

CSS is an acronym for Cascading Style Sheets. If HTML were the building block of websites,
then CSS would be the beautifier of the building blocks. CSS is used to modify the appearance of
an HTML document, which include colors,fonts,backgrounds,spacing,e.t.c

CSS was introduced to solve a big problem. In the early days of writing HTML codes, Web
developers had a problem of making multiple web pages look beautiful. Normally, to modify the
default appearance of a Web page, the developer had to include a new style in every page he
wants to modify. This brought a problem if a developer wanted to modify a website containing
1,000 pages.

CSS was introduced in 1994 and since then, it has undergone modifications from CSS1 to CSS2,
CSS 2.1 to get to its current status, which is CSS3.

In the subsequent posts we shall treat the basics of CSS but let us first begin by understanding
something called the inheritance rule, as without this we may not be able to appreciate and/or
utilize the power of CSS.

2-Inline Style Sheet:

This method is used to modify several elements in an HTML document making it easier than
using an inline style. Inline Style Sheets are placed within the <head> and </head> section of the
document and is defined with the opening and closing <style> tags.

E.g

<head>

<style>

body {

background: #eeeeee;

font-family:Verdana;

}
p{

color:yellow;

font:18px;

</style>

</head>

Definitely, this solves the problem of repeating styles for different elements in a document which
reduces stress and error in coding.

Inline Style Sheets are used mainly to style a single webpage. Adding stles to different webpages
is done with external style sheets.

3- External Style Sheets:

External Style Sheets is the main tool used in Css, This is because it solves the major problems
that lead to the creation of CSS. An external style sheet contains codes that style a
document(these codes are what we will definitely treat throughout these tutorials). It is then
saved as a CSS file with the extension .css

After this is done, the CSS document, which we shall now call a style sheet has to be attached to
the HTML document that has to be styled. This done with the HTML tag <link>. If you
remember, we talked about this tag briefly when talking about elements nested in the head
section opf an HTML document. Suitably, the <link> tag always lies in the <head>.

The appropriate syntax for linking a style sheet would be:

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

As you can see the <link> tag has two required attributes:

a)The type attribute- The value"text/css" specifies that the linked document contains text content.
b)The href attribute-The value specifies the address of the style sheet. You can use either an
absolute(full address e.g http://www.site.com/folder/sylesheet.css) or relative(stlesheet.css)
naming convention(This will ne explained fully in the HTML exclusive thread

The external style sheet is a jolly good fellow as it saves programmers the burden of styling
individual elements or pages. All you need to do is link a style sheet to every page in your
website and Voila! all pages on your site would be styled. It should also be noted that you can
add more than one style sheet to a page. You can even combine inline styles, inline sheets and
multiple external sheets on a single page. However, what happens if the same element is styled in
three different ways in the inline style, internal and external sheets? Confusion? Not necessarily
if you understand CSS Inheritance- the next part of our CSS tutorials.

The style that will be used when

there is more than one style

specified for an element is defined as the Cascading order

An inline style which is closest to the element has the highest priority. This is followed by the
internal sheet and then the external sheet. This means

1-An inline style will override an internal style and an external style sheet.

2-An internal style sheet will override an external sheet.

3-An external sheet will override the element's default properties.

Once more, remember the image.

NOTE: If an external

style sheet (its link) is placed after the

internal style sheet and thus closer to the element to be modified, the external sheet

will override the internal style sheet. Simple logic!

PART 3: CSS Syntax

When we began HTML we talked about HTML syntax-opening and closing tags, empty
elements, e.t.c- and now we are going to discuss its CSS equivalent.
A CSS statement-or more specifically, a rule- is made of two main parts.

1) Selector: This is the element that is to be styled. E.g <p>, <h2>,e.t.c. However, the angle
brackets are not compulsorily placed with the elemnt keyword. So it will just be p or h2 as the
selector.

2) Declaration: A declaration consists further of two parts

a)Property- This is the attribute of the element to be styled. The property of a selector "p" could
be "color".

b)Value- The value is the way the attribute has been changed, and thus the way the element has
been modified. The value of attribute "color" of selector "p" cold be "green".

A CSS's property and value are separated with a colon

property:value

E.g color:green

NOTE: Interestingly, when compared to an HTML's attribute and value syntax, the difference is
that HTML separates attribute and value with =, while in CSS they are separated with :To
combine a selector and a declaration, the syntax is:

Selector {Property:Value;}

NOTE: The declaration(property and value) are contained in curly brackets and end with a semi-
colon.

However, if the selector had more than one declaration, they will be seperated by semi-colons
and "a space".

Selector {Property:Value; Property:Value; Property:Value;}

E.g p (color:green; font:Verdana;}

PART 4: CSS Selectors

Apart from HTML elements, we can use other items as selectors. These other items are id and
class selectors.
1- Id Selectors: ID selectors are used to style just one element in an HTML document. A # sign
precedes the name of the id. E.g #nameofid. The name of the id can be anything (but should not
start with a number),that adequately describes the element being modified. We should remember
that in this case, the selector is not an HTML element (p, h2,e.t.c), so we need to specify a name
for it in the HTML document. This is done by typing an attribute id and making its value the
name of the id. In other words, type- id="nameofid"

Example:

A CSS style would be written like this in a CSS sheet:

#box

{color:green;}

In the .html file, it would be:

id="box"

TIP: Due to the reason that id's can be used only once in a page, use them in specific areas of a
page like headers, footers e.t.c

NOTE: When it is said that an id can be used only once in a page, it means an id="box1" can be
included only once in the HTML document. It does not mean that another id like id="box2" can't
be included. Different ids' can be used as long as they don't have the same name.2- Class
Selectors: In contrast to id selectors, class selectors are used to style elements that appear many
times in an HTML document.

THe major differences between id selectors and class selectors syntax is-

a)Instead of a # sign, class selector names are preceded with a dot .

b)In the HTML document, they are included by using an attribute class and the value will be the
na,e of the class. In other words, class="nameofclass"

c)A CSS rule defined with a class selector can appear many times in an HTML document.

A CSS rule defined in a sheet as:

.fontstyle
{color: green;

font-size:16px;

Would appear in an HTML document as:

class="fontstyle"I assume by now you should have known these:

1) A CSS rule can be defined in an inline style i.e embedded within the HTML element it
modifies.

2) A CSS rule can be defined in an internal sheet placed in the head section of an HTML
document with the <style> and </style> tags.

3) A CSS rule can be defined in an external sheet which contains CSS rules that are used to
modify an HTML document.

4) The CSS external sheet is saved with a .css extension and is linked to an HTML document in
the head section with the <link> tag.

5)How to write CSS rules with the 3 types of selectors.

We shall now delve into styling, focusing on how we can manipulate the declarations in a CSS
rule.I assume by now you should have known these:

1) A CSS rule can be defined in an inline style i.e embedded within the HTML element it
modifies.

2) A CSS rule can be defined in an internal sheet placed in the head section of an HTML
document with the <style> and </style> tags.

3) A CSS rule can be defined in an external sheet which contains CSS rules that are used to
modify an HTML document.

4) The CSS external sheet is saved with a .css extension and is linked to an HTML document in
the head section with the <link> tag.

5)How to write CSS rules with the 3 types of selectors.


We shall now delve into styling, focusing on how we can manipulate the declarations in a CSS
rule.Example of a Style Sheet

{color:purple;

h2 { background:red;

color: blue

.bodyblue {

font-family: Arial, Helvetica, sans-serif;

color: #0000FF;

.bodyred {

font-family: Arial, Helvetica, sans-serif;

color: #FF0000;

#container {

width:300px;

margin-top: 50px;

margin-left: auto;

margin-right: auto;
margin-bottom: 1em;

border: 1px solid #000;

padding: 20px;

background: #CCC;

#container2 {

width: 400px;

margin: 10px auto 10px auto;

padding: 20px;

border: 1px solid #000;

background: #CCC;

}PART 5: Styling Text with CSS

The first HTML element that we will style are texts. We shall start from text because, it is
logically the most basic and important element on a page.

We shall treat first treat how to change the color of text.

Editing Text Color:

To change the color of text, a method we can use is to modify the paragraph tag. Before we
proceed,it should be noted that the convention of writing colors in CSS is the same as that in
HTML i.e HEX values, color names,e.t.c

Syntax

p {

color:yellow;

}
NOTE: This syntax is used for internal and external sheets. Throughout these CSS tutorials we
will be using CSS syntax as if we were writing the CSS rules in an external sheet. We shall not
use inline styles as this will defy the real purpose of CSS.

However, if you want to style a paragraph directly in an HTML document-inline style- we will
just include the style attribute in the opening <p> tag.

<p style="color:green;"> This text will be written in green.</p>

So, any text written between the opening and closing <p> tags in the HTML document would
now be green in color.Editing Text Alignment: If you use Microsoft Word, you should be
familiar with text-align. With a value of center, yor text will be centralized, while justify will
make all the lines of text have equal width. There are two other values- left and right. If you use
one these, the text either aligns to the left or right of its container.

Syntax:

p{text-align:center;}

p.one{text-align:justify;}

p.two{text-align:left;}

p.three{text-align:right;}

NOTE: The p, p.one, p.two and p.three are examples only.

PART 6: Styling Backgrounds with CSS

We shall now learn how to style backgrounds. This is the first time we will be treating this, both
in our HTML and CSS courses, so let me give you a gist about it. When used in CSS,
background applies to the background of an element. Simple. Now, with CSS we can change the
color of a background and even include an image as background. It is noted that the background
attribute can be used with most HTML elements like p and h tags.

Syntax:

First, we treat how to change the background color.

body {background-color:aqua;}
NOTE: This syntax means that the body of the page in this case, would be aqua. We can
also,definitely,replace the selector-body with any other valid selector

PART 7: Styling Fonts of Text

Once again, we treat an untouched aspect-fonts. I am sure most of you know what fonts are. Just
for clarity, they define the way a text appears i.e its design, boldness, style, e.t.c. So while you
will use the color attribute to change the color of a text, you will use the font, for fonts.The terms
that most of us familiarize with the term 'fonts'- Times New Roman,Comic Sans, e.t.c are more
detailed. Fonts could be classified as a generic or font family.

1)Generic Family: This classifies fonts in a general way. It is the main classification of fonts.
You might have heard of the terms 'serif' and 'sans serif'. They are part of the generic family. The
generic family consists of, in full:

a)Serif:Fonts that fall under serif(e.g Times New Roman) have lines at the end of most of their
characters and thus, tend to be used for designed texts.

b)Sans Serif: These are the opposite of serif. They do not have these little lines and thus are used
in context with much words. E.g Arial

c)Mono Space: Mono means one. These fonts have significant 'one space' between each
character. E.g Lucida Console2)Font Family: These are more specific. E.g Times New Roman,
Verdana, e.t.cEditing Fonts:

To change the font of a text, the font name would be included as the value of the property-'font-
family'.

E.g

p{font-family:Arial;}

However, it is better to include more than one font-family name. This is important if a browser
does not support the included font.

p{font-family:Arial, Verdana, Sans-Serif;}

NOTE:

1) The font family names are separated by commas and not semi-colons. This is because the font
family names are not different values but options for a value.

2) The first font-family name is the first choice followed by the second one ...,e.t.c
3)At the end of the font-family name options, include the generic font name. The browser will
use this to select a font if none of the fonts you included are supported by the browser.

4) Contain font-family names that are in multiple words, in double quotation marks. E.g "Times
New Roman"The font-size property:

This is included to specify the size of a text in a particular unit e.g pixels. It can be used to
specify size for paragraphs, headings,e.t.c. However, do not increase the size of your paragraph
text or any element to make it appear as headings. The h1-h6 tags are used for this. If you ignore
this, it will affect the structure of your page when it is indexed by search engines.

E.g

p{font-size:17px;}

If the font-size is not set, the default size of the element is used.

PART 8:Styling Links with CSS

By default, an unvisited link is blue, a visited link is purple and an active link is red. The just
concluded statement has been discussed in an HTML post. However, we might need to change
this f the color of links match with the color of the page text or just for aesthetic purposes. There
are many ways to go about this but the easiest way to this is what I shall discuss.

Syntax

a:link {color:color name;}

a:visited {color:color name;}

a:hover {color:color name;}

a:active {color:color name;}

NOTE:

1)a:link refers to an unvisited link

2)a:hover can appear only after a:link has been specified

3)a:active can appear only after a:hover has been specified

The property text-decoration, can be used to make a link underlined.


Syntax

a:link:{text-decoration:none}

NOTE: 'link' in 'a:link' can be replaced with visited, hover or active.

PART 9: Styling Lists with CSS

In our Introduction to HTML courses, we discussed about lists-unordered,ordered and definition.


Each type of list has its peculiar feature. Each list item <li> in an unordered list is preceded with
a bullet point and in an ordered list, numbers. However, this default preferences can be modified
with CSS.

1)Styling Unordered Lists:

The bullet point that appears in unordered lists by default is a type of list item marker. A new list
item marker can be set with the property- list-style-type. The possible values for this property are
none,disc,circle and square.

Syntax

selector{list-style-type:value}

2)Ordered Lists:

Instead of digits 1,2,3,4,e.t.c other list item markers can be used. The possible values for the
property list-style-type are alpha, roman, greek, latin, e.t.c

Syntax

selector{list-style-type:value}

It should also be noted that images can be used as list item markers.

Syntax:

ul {list-style-image: url;}

PART 10

Styling Tables with CSS

We treated tables in HTML. Certain. If you can recall, we discussed that tables-with the <table>-
are used to arrange tabular data. Most designers, in the past, used tables to design whole web
pages and in essence, whole websites. CSS put an end to that. With CSS, we can utilize an
element called div tags-which we will discus in full later-to style web pages. So, it will be
deemed archaic if you use tables to create your sites. However, tables are very powerful tools
that can be used for multi purposes, if properly utilized. In this part we shall discuss some basic
rules that can transform a traditional black and white table into something more interesting.

There are numerous CSS rules that can be used to modify an HTML table. We will consider the
most used of these.

1)Background color and color:

The property 'background-color' is used to set the color of the background of cells in a table. It
can be used for the table header<th>, table data<td> and the whole table. The color of the text
that appears in the cell is now altered with the property 'color'.

E.g

table{background-color:black;

color:white;

2)Border: When using tables to present tabular information, you may want to make the borders
visible. This is so by default. You can still specify it though, and add the thickness and color of
it.

E.g

table{border:1px black}

You can make the border invisible by setting the thickness to 0px.

NOTE:Make sure that you did not set the border thickness in the corresponding HTML file.

If you notice, the table by default, has a border for the table head<th>, table data<td> and the
table itself. Most times, you will want to avoid this. In this case, the 'border-collapse' property
comes to play.

Syntax:
table{border-collapse:collapse}

3)Dimensions:

You will never want to try setting up a table without specifying its dimensions. This is done
by...the 'width' and 'height' properties, you guessed right.

table{width:250px

height:100px}

NOTE:The unit of the table dimensions can also be specified in %. With this, a table's dimension
will be a certain percentage of another element. This will be discussed in full later in CSS
Styling.

4)Alignment:

The text in different cells of a table can have their alignment altered with the following
properties:

a)text-align: This is used to set the position of text in a cell, at the left, right or center.

b)v-align: This is used to specify the vertical postion of text. Top, bottom or center

E.g

th{

text-align:center;

v-align:bottom;

5)Padding:

When you pad something, you cushion its edges right? The same applies here. You can specify
the amount of space between content in a cell and its borders with the padding property.

E.g

td{
padding:5px}

The rule above, would add 5px of padding at the top, right, bottom and left.

The Box Model

The Box represents all HTML elements that can be styled with some certain properties. These
properties include but are not limited to margin, border, width, height and padding. Most times
the box model refers to div s.

This image is the Box Model. It illustrates the properties- width, height, padding, margin and
border. The black box is 'The Box'. The Box represents all block-level elements that can be
styled with the above listed properties.The width and height of the box is clearly visible. Thus
when we refer to width and height, we are referring to the dimension of that element. The border
is the line bounding the box/element. You will also notice a white box within our Box. It
represents the text,images,tables,forms and other boxes that are in The Box. All these things are
the content of The Box.

The space between the outer edges of the content and the inner edges of The Box is called
padding. The Box is always in another container. Even if it encompasses the whole webpage, it's
container would be the browser. The distance between the outer edges of The Box and its
container is the margin.

Divs (Divisions) are HTML block-level elements that are used to layout specific portions of an
HTML document. The div comes in the pair <div>Content</div>.

Divs have been generally accepted as a suitable alternative for tables, in regard to page layout.
Thus, it is essential that you master the div tag as it will be impossible to create a webpage
without it.

NOTE:Some may disagree with the statement above. Yes, you may use the <table> tag in layout,
but that defies it original purpose- layout of tabular data.

However, div tags always appear with attributes.

<div attribute="value">Content</div>

How is a div used?

1) The div is first specified in the style sheet.


Syntax:

Name of Div{property:value}

2) The div is specified in the .html document.

Syntax:

<div attribute="name of div">Content</div>

3) Whatever properties/rules declared in the .css file will appear in the HTML document at the
point where the div tag is inserted.

If the <div> is inserted in the .html document without any CSS modifications, nothing will
appear in the subsequent we

ok,make i try help:

first of all,before u understand how to link or as some call it "embed" a stylesheet on a html
doc,u need to first understand d different path systems used.

ABSOLUTE PATH:

an absolute path to a file in its simplest non-geeky terms is simply the FULL path to a file,it tell
exactly where a file is on a server,consists of three main compaonents
namely;protocol-domain/ip of server-file's location.

example

http://yourdomin.com/style.css

or

http://yourdomain.com/style/style.css
the first sends a query for a style.css file located in the ROOT of the server,the second does same
but this time not in the root but in a folder or directory called style,inside which the style.css file
is..

RELATivE PAtH

this in its simplest form is almost same as absolute,but this time without the protocol and
domain..

simply put;it is the location of a file on the server in RELATION to the document that file is
being called from..2much eng?,an example will clear the smoke..

lets rewrite the 2 previous examples:

1. /style.css

and

2. /style/style.css

it is presumed that u r trying to call a style.css file from your index.html file,located in the root
dir..

now,for the first xample the style file is also on the root dir,so you simply put "/" which most
reletive path links start with,it signifies the root of your server,and since the style file is located
there u simply add the name of the style file "style.css"...it becomes "/style.css",wat u hav just
done is tell the browser to call a file named style.css in the root dir

example 2 is basically the same,except that this time,it isnt in the root dir but rather a folder IN
the root dir named style,and the style.css is in it,so it becomes "style/style.css"
hopefully so far i havnt made u more confused...hopefully you actually learnt something...

now its time to do something with wat you'v learnt...LETS LINK A STYLE SHEET WITH
BOTH METHODS..

sinerio one:you are browsing around the web and come across this great site,and you like the
styling,or you uploaded your style in a different hosting site,or u just want to use a style sheet
that isnt on your server,what method do we use?,obviously...absolute path is the only
option...and this is how

<html><head>

<link rel="stylesheet" href="http://example.com/style.css" />

</head><body >blablabla</body></html>

that should work perfectly...obvioiusly what it does it include a style.css file located in the root
of example.com site...

next an example with relative,to save time(cuz am typing from a touch device,cumbersome to
say the least) am going to just write the link rel part and leave oda html stuff..

<link rel="stylesheet" href="/style.css" />

<link rel="stylesheet" href="../style.css" />


<link rel="stylesheet" href="../../style.css" />

if u'v understood the "jargons" i'v been saying you should understand the above three examples
perfectly..hopefully u do,if not,notify..

FAQS

Q. which saves time more?

A. relative..reason obvious

Q. do i need to end the link tag with a trailing slash?

A. not necessary,but advised

Q. cant i just write the style in the html document directly?

A. not advised,if a site should obey all rules of progressive enhancments,then u r required to use
external style sheets(dont ask me what P.E is,our teacher would lecture that)

final note:use absolute for only files that r not on your server,otherwise,relative path sytem is
adviesd...remember,for each step out/back of a directory/folder u add a "../"

thank you...if i made any errata anywhere,please notify me @gurus in d house

What is the specific naming syntax of divs?

The answer lies with its attribute. This attribute has different forms but we shall concern
ourselves with two vital forms- id and class.
1) Attribute 'id'- An id is an attribute of a div. An id occurs only once in an HTML document. It
is preceded with a # sign.

Example

A div named #maindiv is used in a style sheet.

#maindiv:{background-color: orange;

width:56px;

height:45px;}

To insert it in the HTML document:

<div id="maindiv">I am an orange box</div>

When viewed in a browser, you will see an orange box 56px wide and 45px high with the text, "I
am an orange box", within it.

#maindiv can appear only once in the html document. This does not cancel the existence of
another id div named #subdiv in the same HTML document.

2)Attribute 'class'-

The class attribute is used to specify divs that can appear multiple times in an HTML document.
It is preceded with a dot '.'.

These two characteristics of a class div make it different from the id div. The syntax of both are
the same.

Example

To create a class div in the style sheet

.contentbox{background-color:

green;

width:48px;

height:48px;}

To insert it in the HTML

document:
<div class="contentbox">I am a box for anything</div>

When viewed in a browser, you

will see a green box 48px

wide and 48px high with the

text, "I am a box for anything",

within it.

This div can be repeated, as many times as you may wish, in an HTML document.

BORDER

The border is used to specify certain rules about the border of The Box Model. This includes if
there will be a border or not, the style of the border or its color. The border attributes are very
useful, hence it is vital you understand it. It isn't hard however.

1)Border-Style

The first and the most important attribute is the border-style attribute. It can take many values
which include none, solid, double, dotted, dashed, ridge, groove, e.t.c Groove and Ridge values
produce 3D effects.

Syntax

border-style:value

NOTE: Even if you don't want any border around your box, specify this with the value- none.
Why you may ask? If you do not specify a value for the border-style, no other value will work.
Period

In some cases you may not want to make the style apply to all sides of the box. This could be
especially useful when the box is at the far-most right, left, top or bottom of a layout.

To specify a style for a left, right, bottom or top respectively, use the following syntax-

border-left-style:value

border-right-style:value

border-top-style:value
border-bottom-style:value

NOTE: The value is the same as that of the border-style attribute.

2)Border-Color

This attribute is used to specify the color of a border. The possible values for this property could
be specified by the name of the colors, their RGB values or their HEX values.

Syntax

border-color:value

NOTE: When choosing the color of a border, make sure it serves its purpose. If the box signifies
a different area in an area, let the border-color contrast. IF not, the color could be neutral.

3)Border-Width

As the name implies it specifies the width of the border. The value could be thin, medium or
thick. To be specific and avoid undesirable results, specify the value in px.

Syntax

border-width:value

PADDING

Padding is the distance between the content of a box and its inner border.

The syntax for padding is straight forward. There is no specification of background color, width,
height, e.t.c. with padding. Its syntax is

padding:value

This syntax would make the value apply to the padding to the top, right, left and bottom. So, if
the value is 5px, the distance between the content and the top, right, left and bottom innermost
border are all 5px.

However, to be specific, you could state values for the padding at the top, right, bottom and left.
This is done with the syntax-

padding-top:value;

padding-bottom:value;

padding-right:value;
padding-left:value;

The possible values for the properties above could be px, em or pt. These are definite values. In
addition to this, you could specify the value in %. This means that the padding would be x% the
width and height of your box.

Example

Suppose the width and height of your content are both 100px. If you specify the padding as 20%,
the padding would be 20px on top, 20px at the right, left and bottom.

1 Like 3 Shares

MARGIN

The margin is the distance between the outermost border of a box and its parent container.

The syntax for margin is very similar to that of 'padding'.

The syntax for a margin is-

margin:value

To specify the value for specific margins use:

margin-top:value;

margin-bottom:value;

margin-right:value;

margin-left:value;

The possible values for margin are the same as that of padding.

In fact, the only difference between padding and margin is that padding is inside the box while
margin is outside it.

You might also like