5/28/2008
UMICITY.COM
THE BEGINNERS GUIDE TO E-BUSINESS
Video Tutorials Available in Umicity www.umicity.com
Learning CSS |Ahmed Sammy Hegab| © 2008 Umicom Group Plc
Introduction This course is part of the beginners guide to e-business, a comprehensive step by step course with accompanying video tutorials for anyone interested in Web Development, Internet Sales/Marketing, Computerised Accounting, and finally for anyone who aspires to Setting up and run a successful online business. 1.
Starting with web development topics Learning HTML Learning XML Learning CSS Learning JavaScript Learning PHP & MYSQL Learning Smarty Template Engine Learning CodeIgniter Framework: Learning Facebook Application Development Learning UmiCity Application Development
We will also explore the world of Open Source, looking at all the common script like shopping carts, blogs, Forums, Content Management Systems (CMS) and much more .. 2.
Business Application topics • Learning MS Office • Learning Sage Line 50 Financial Controller 2008
3.
Online Sales & Marketing topics • Learning Search Engine Marketing • Learning Online Revenue Channels • Learning Social Networking • Learning Multi Level Marketing (MLM)
4.
Business Start-up topics • Learning Business Start-up Foundation o Registering a company o Inland Revenue, Taxation and National Insurance o Setting up a business bank account o Setting up PayPal accounts and Merchant Accounts o Office leasing, virtual office and hot desking o Telecommunication and internet service providers o Registering Domain name and hosting • Learning Business Planning o Market Research o Cash Flow Forecast o Break even Analysis & pricing o Business plan write up • Learning Business Funding o Share issue and allocation o Bartering
Cascaded Style Sheet (CSS) Course Lesson 1 - Video lessons on www.umicity.com Understanding Style Sheets You can use cascading style sheets, or CSS, to exercise precise control over the appearance of your HTML documents. style sheets can help you maintain a consistent look and feel throughout your web site. By regulating formatting controls to another sheet, you can free up your HTML documents of repetitive coding to concentrate on the main elements that make up your pages. Defining Style Sheets A style sheet is simply a separate text file with the .css file extension. Style sheets can also be internal within the HTML document or external as a separate file. Style Sheets can control Multiple pages You can link every page in your website to a single style sheet. Any changes you make to the style sheet formatting are reflected in every HTML document, this is useful if you have a site with lots of pages and it would be time saving as you only need to update one file to change the theme of the entire site. Example 1: mystylesheet.css Below we will create our first external style sheet
/* this is a comment in CSS it will be ignored by the browser this is our first external stylesheet example */ h1 { color:red; font-family: arial; font-style: bold } h2 { color: teal; font-family: arial; font-style: italic } h3 { color: #006666; /* This is a shade of teal */ font-family: arial } P{ color: #000099; font-style: bold }
To create a style rule, you type the element tag for which you want to define formatting properties. In this case we start with h1 we open the element with a curly brace { and once we finish with the rule we close with the opposite } Type the properties and value for the rule within the { } be sure to separate declaration with a semicolon In the above example, the rules we applying to h1,h2,h3, p is colour, font and font style. /* is a start of a comment statement in CSS, also note this is same in PHP and */ is the close tag
Example 1: mywebpage.html Here we will create a basic webpage and include the CSS file we created above. <html> <head> <title>Sammy’s HTML & CSS Tutorials </title> <link rel=”stylesheet” type=”text/css” href=”mystylesheet.css”> </head> <body bgcolor=”silver”> <h1>Learning HTML</h1> <HR noshade> <br> <br> <p> Welcome to my website I’ll show you how to use HTML and CSS to create web pages </p> <p>But first let’s start with a little background and history</p> <h2> Internet basics</h2> <p> The internet has grown from a military research project in the late 1960’s to a global network of computers today. ....</p> <br> <h3> What is HTML </h3> <p> HTML stands for Hyper Text mark up language .... </p> </body> </html>
Within the <head> tag before the close </head> we insert the include style sheet statement as follow <link rel=”stylesheet” type=”text/css” href=”mystylesheet.css”> This way the style sheet is now linked with the page. You can test your page by uploading both files to the server and loading the html file which we called in this example mywebpage.html As we will mostly be using Style Sheet in an external file I won’t spend much time explaining internal style sheets, however if you wanted to do style sheets internally simple add the tag <style> to start and add the rules as in the external file and once finished close the style tag </style> Create a class in CSS You can create a class to apply a style rule to certain tags throughout your webpage. For example, if you want all the introductory paragraphs formatted differently than all the regular paragraphs, you can create a class specifically for the introductory paragraphs. You can setup a class in your external or internal style sheet, and then use the CLASS attribute in your document to assign the properties and values. We will do an example to illustrate this lesson.
Example 2: mystylesheet2.css
h1 { color:red; font-family: arial; font-style: bold } h2 { color: teal; font-family: arial; font-style: italic } h3 { color: #006666; /* This is a shade of teal */ font-family: arial } p.intro { font-family: arial; font-weight: bold; color: navy } p.content { font-family: arial; font-style: italic; color: red }
You notice we declared a class by simply adding the full stop character and followed by the class name, we have p.intro and p.content , and both paragraphs would have a different format. Let us type up the html file now and learn how to call the class using the class attribute
Example 2: mywebpage2.html
<html> <head> <title>Sammy’s HTML & CSS Tutorials </title> <link rel=”stylesheet” type=”text/css” href=”mystylesheet.css”> </head> <body bgcolor=”silver”> <h1>Learning HTML</h1> <HR noshade> <br> <br> <p> Welcome to my website I’ll show you how to use HTML and CSS to create web pages </p> <p>But first let’s start with a little background and history</p> <h2> Internet basics</h2> <p class=”intro”> The internet has grown from a military research project in the late 1960’s to a global network of computers today. ....</p> <br> <h3> What is HTML </h3> <p class=”content”> HTML stands for Hyper Text mark up language .... </p> </body></html>
So we notice we call the class from the style sheet by using the attribute class to refer to the p.intro format we simple add in the paragraph tag <p class=”into”> and to refer to the content format <p class=”content”> Applying a style with the DIV tag You can apply styles to different areas, or sections, of your web page using the <div> tag. You can setup the <div> tag in your internal or external style sheet, and then apply it in the HTML document. We will also illustrate this by expanding on the previous example. Example 3: mystylesheet3.css h2 { Color: teal; Font-family: arial; Font-style: italic } div.intro { Color: #006666; Font-family: arial } div.content { Color: navy; Font-family: arial } In the external style sheet we assigned to classes one intro and the other content we did this in a similar way again as before using the concatenation symbol also known as the full stop character or dot div.intro div.content Now below we will do the same as before and apply those styles within the html document.
Example3: mywebpage3.html In the HTML document, in front of the section we want to assign a DIV style we add the div tag as <div class=”intro”> or <DIV class=”content”> and we close the div tag with </div>
<html><head><title>Sammy’s HTML & CSS Tutorials </title><link rel=”stylesheet” type=”text/css” href=”mystylesheet.css”> </head> <body bgcolor=”silver”> <h1>Learning HTML</h1> <HR noshade> <br> <br> <p> Welcome to my website I’ll show you how to use HTML and CSS to create web pages </p> <p>But first let’s start with a little background and history</p> <div class=”intro”> <h2> Internet basics</h2> <p> The internet has grown from a military research project in the late 1960’s to a global network of computers today. ....</p> </div><br> <div class=”content”> <h3> What is HTML </h3> <p> HTML stands for Hyper Text mark up language .... </p> </div></body></html>
You can watch the video lessons and comment on this lesson on www.umicity.com
Cascaded Style Sheet ( CSS ) Course Lesson 2 â&#x20AC;&#x201C; Video lessons on www.umicity.com Formatting with style sheets In this lesson we will go more in depth with CSS by going over all the formatting rule statements which we briefly introduced in the previous lesson. Adding Bold to a text You can make text bold using font-weight property in a style rule like we seen in previous examples, the only new point we should mention here is we can set a boldness range between lighter value to a darker value 100 â&#x20AC;&#x201C; 900 P { font-weight: bold 800 } Adding Italics to Text You use font-style property to italicize Web pages, the three values we can use in a style sheet: italic, oblique, and normal. p { font-weight: bold 800 } ul { font-style: italic } Indent text You can indent the first line in a paragraph using the text-indent property in a style rule. p { font-weight: bold 800; text-indent: 30px } ul { font-style: italic } In the above we used the measurement px. We however have the option to use different measurements, we can set the indent in points, pixels, millimetres, centimetres, inches, picas, x-hight(the height of the lowercase x), or em(the height of the current font). Here are the different acronyms Pixels (px) Points (pt) Millimetres (mm) Centimetres (cm) Inches (in) Picas (pc) x-height (ex)
Change the font size To change the font size we use the font-size property to change the document text size p { font-weight: bold 800; text-indent: 30px } ul { font-style: italic } Table { Font-size:14pt } In the above we used the measurement pt. We however have the option to use different measurements, we can set the size in points, pixels, millimetres, centimetres, inches, picas, x-hight(the height of the lowercase x), or em(the height of the current font).
Here is the different acronym Pixels (px) Points (pt) Millimetres (mm) Centimetres (cm) Inches (in) Picas (pc) x-height (ex) The other thing to mention here is we could also use descriptive words for the value of the size such as: xx-small, x-small, small, medium, large, x-large or xx-large Changing the font type To change the font of the text we use the font-family property. Note here because not all fonts are available on all computers, you can designate a second or third font choice. Table { Font-size:14pt; } P { Font-family: “Arial”, “Verdana” } Change the text case We can use the text-transform property to change the text case for a tag. If we wanted the h1 tag to all appear in uppercase H1 { Text-transform: uppercase }
Change text alignment We can control the horizontal positioning of the text using the text-align property, by default browsers align text to the left. We have four options as a value: left,center, right or justify H3 { Text-align: center /* we make all h3 text align to center */ } Table { Font-size:14pt; } Table { Font-size:14pt; } P { Font-family: “Arial”, “Verdana” } Control line spacing We can use the line-height to control the spacing between text lines. We can set the value 2 to create a space of twice the size height or we can use a percentage or absolute value Table { Font-size:14pt } P { Font-family: “Arial”, “Verdana”; Line-height: 2.0 } Control Letter spacing We can control the spacing between each character in the text by using the letter-spacing property. Called kerning, letter spacing changes the appearance of your text by spacing it out; Just like in font size we can specify the spacing in points (pt), pixels (px), millimetres (mm), centimetres (cm), inches (in), picas (pc), x-height (ex), or em p.tag { Letter-spacing: 5 } To refer to the above style in the html document we would write <p class=tag> Hello World </p>
Set Margins We can control the margins of the web page elements using the margin properties We have four values we can use: top, bottom, left and right and then we follow it by the margin size. Just like in font size we can specify the margin sizing using points (pt), pixels (px), millimetres (mm), centimetres (cm), inches (in), picas (pc), x-height (ex), or em p.insider { Margin-left: 20px; Margin-top: 50px } Adding Padding We can use the padding property to add space around an element of text or object. Just like in font size we can specify the spacing sizing of the padding using points (pt), pixels (px), millimetres (mm), centimetres (cm), inches (in), picas (pc), x-height (ex), or em p.insider { Margin-left: 20px; Margin-top: 50px } p.spaces { Padding: 25px } Adding colour to text We can use the color property to change the color of text. For value we can use the name from the 16 predefined colours or specify a colour from hexadecimal colour palette. H1 { Color: #6c000a } Change the text background color We can use the background property to change the color that appears behind the text H1 { Color: #6c000a; Background: #facd8a }
Adding a Border We can add a border using the border property. We can specify a thickness value or we can use a descriptive value: thin, medium or thick We can apply a border style from: solid, double, groove, ridge, inset, outset, dotted, or dashed p.opening_paragraph { Border: medium solid } To add a colour to the border we simple add it and we also need to add some padding to the text within the border so we do it in the example below p.opening_paragraph { Border: medium solid teal; Padding: 10px } You can also use border-left, border-right, border-top, border-bottom properties to designate which sides you want to add a border to the code might look something like this p.opening_paragraph { Border-left: double 5px; Border-right: double 5px; border-top medium solid teal; Padding: 10px } To refresh your memory again to refer to this in an html document we type the tag as follows: <p class=opening_paragraph> Blah Blah Blah we type anything as an opening paragraph to illustrate to you the effect </p> Removing border In the event we wanted to remove a border for example the default border that might appear around an image we use border: none The code would look like this Img { Border: none } Control Element position We can position an element on the page absolutely or relatively Absolute position, control the distance from the other elements, but may cause other elements to shift on the page and overlap. When we set relative position, you can move the element without moving surrounding elements. The code could look something like this Img { Position: relative; bottom: 10px }
Wrap text around elements We can use the float property to control how text wraps around the elements. The left value controls the left side of an element, and the right value controls the right side of an element. To ensure proper text wrapping, the floating element should appear directly before the text we want to wrap. The code would look like this Img { Float: right } Change Vertical Alignment We can control the vertical positioning of elements on the page using the vertical-align property. There are six different vertical alignments: Baseline, text-top, text-bottom, middle, top, or bottom. Img { Vertical-align: baseline } Set Width and Height for an Element We can use the width and height properties in your style sheet to set with and height sizes for the page elements. We can use measurements just the same as font size, we can specify the width and height values in points (pt), pixels (px), millimetres (mm), centimetres (cm), inches (in), picas (pc), x-height (ex), or em. We can also specify a size based on a percentage. The code could look like this Img { Width: 175px; Height: 125px } Add a background colour or image to an Element We can use the background property to change the color that appears behind an element without changing the entire page We covered this when making a background colour of the text. H1 { Color:#6c000a; Background: #facd8a } Table { Font-weight: bold; Font-size: 16pt; Background: #facd8a } We can add a background image to an element using a style sheet rule. We can also use a repeat option one of the four: Repeat: repeats the image to fill the background(default) Repeat-x: tiles the image horizontally Repeat-y: tiles the image vertically No-repeat: prevents a background image from repeating The code could look like this H1 { Color: white; Background: url(“leaves2.jpg”) repeat /* we could have set a colour incase the image was unavailable background: yellow url(“leaves2.jpg”) */ }
Change Link Colours We can control the appearance of links throughout the page using a style rule. We can change the color of unvisited, visited, and active links. We can also remove the default underlining that normally appears beneath a link. To remove the underline we use text-decoration: none Here is the code A:link { Color: #e3007b; Text-decoration: none } A:visited { Color: blue; Text-decoration: none } A:active { Color: red; Text-decoration: none } We can also have a hover effect colour change, when the user hover over the link it will change colour A:hover { Color: fuchsia } Change Bullet or Number Styles We can use the list-style property to change the bullet or number style for your unordered or ordered lists. We can choose from three bullet styles and five number styles. Bullets come in three flavours: circle, disc or square. Numbers include decimal(1,2,3), lower-alpha(a,b,c), upper-alpha(A,B,C), lower-roman(i,ii,iii), or upper-roman(I,II,III). Decimal is the default number style. UL { List-style: square } OL { List-style: lower-roman } We can also use images for list-style For example UL { List-style: url(â&#x20AC;&#x153;images/flower1.gifâ&#x20AC;?) circle }