html & css : a tutorial

54
HTML & CSS : HTML & CSS : A Tutorial A Tutorial Prepared By: Prepared By: Hany Rizk Hany Rizk Bernard Abdel Karim Bernard Abdel Karim

Upload: gabe

Post on 11-Jan-2016

70 views

Category:

Documents


1 download

DESCRIPTION

HTML & CSS : A Tutorial. Prepared By: Hany Rizk Bernard Abdel Karim. What is an HTML File?. HTML stands for H yper T ext M arkup L anguage An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: HTML & CSS : A Tutorial

HTML & CSS :HTML & CSS :A TutorialA Tutorial

Prepared By:Prepared By:

Hany RizkHany RizkBernard Abdel KarimBernard Abdel Karim

Page 2: HTML & CSS : A Tutorial

What is an HTML File?What is an HTML File?

HTML stands for HTML stands for HHyper yper TText ext MMarkup arkup LLanguage anguage

An HTML file is a text file containing small An HTML file is a text file containing small markup tagsmarkup tags

The markup tags tell the Web browser The markup tags tell the Web browser how to displayhow to display the page the page

An HTML file must have an An HTML file must have an htmhtm or or htmlhtml file extension file extension

An HTML file can be created using a An HTML file can be created using a simple text editorsimple text editor

Page 3: HTML & CSS : A Tutorial

Words to KnowWords to Know

ElementElement - A complete tag, having an opening <tag> and a closing - A complete tag, having an opening <tag> and a closing </tag>. </tag>.

TagTag - Used to specify ("mark-up") regions of HTML documents for - Used to specify ("mark-up") regions of HTML documents for the web browser to interpret. Tags look like this: <tag> the web browser to interpret. Tags look like this: <tag>

AttributeAttribute - Used to modify the value of the HTML element. - Used to modify the value of the HTML element. Elements will often have multiple attributes. Elements will often have multiple attributes.

For now just know that a For now just know that a tagtag is a command the web browser is a command the web browser interprets, an interprets, an elementelement is a complete tag, and an is a complete tag, and an attributeattribute customizes or modifies HTML elements.customizes or modifies HTML elements.

Page 4: HTML & CSS : A Tutorial

DivisionDivision

An HTML document is usually composed An HTML document is usually composed of 2 main parts:of 2 main parts: The Head: It includes data such as the title, The Head: It includes data such as the title,

which is the name of the website, and meta which is the name of the website, and meta data, which define the content of the website, data, which define the content of the website, and thus eases the job of search engines. and thus eases the job of search engines. Everything in the head will not be displayed.Everything in the head will not be displayed.

The Body: It includes all the text, images and The Body: It includes all the text, images and information to be displayed.information to be displayed.

Page 5: HTML & CSS : A Tutorial

Do You Want to Try It?Do You Want to Try It?

If you are running Windows, start If you are running Windows, start Notepad.Notepad.

Type in the following text:Type in the following text:

<html><html>

<head><head>

<title>Title of page</title><title>Title of page</title>

</head></head>

<body><body>

This is my first homepage. This is my first homepage.

<b>This text is bold</b><b>This text is bold</b>

</body></body></html></html>

Then open IE or whatever Then open IE or whatever browser you have. Click browser you have. Click on “File”, “open”. Browse on “File”, “open”. Browse the file you have just the file you have just created then open it. created then open it. There you go.There you go.

Page 6: HTML & CSS : A Tutorial

Example ExplainedExample Explained

The first tag in your HTML document is <html>. This tag tells your The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the your document is </html>. This tag tells your browser that this is the end of the HTML document.end of the HTML document.The text between the <head> tag and the </head> tag is header The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser information. Header information is not displayed in the browser window.window.The text between the <title> tags is the title of your document. The The text between the <title> tags is the title of your document. The title is displayed in your browser's caption.title is displayed in your browser's caption.The text between the <body> tags is the text that will be displayed in The text between the <body> tags is the text that will be displayed in your browser.your browser.The text between the <b> and </b> tags will be displayed in a bold The text between the <b> and </b> tags will be displayed in a bold font.font.

Page 7: HTML & CSS : A Tutorial

But there are cases where tags don’t have to be closed, But there are cases where tags don’t have to be closed, for example when we insert an image, or when we want for example when we insert an image, or when we want a line break.a line break.

HTML Code: HTML Code: <img src="../mypic.jpg" /> -- Image Tag<img src="../mypic.jpg" /> -- Image Tag

<br /> -- Line Break Tag <br /> -- Line Break Tag <input type="text" size="12" /> -- Input Field <input type="text" size="12" /> -- Input Field

Display:Display:

Page 8: HTML & CSS : A Tutorial

Basic HTML TagsBasic HTML Tags

<html>Defines an HTML document<html>Defines an HTML document

<body>Defines the document's body<body>Defines the document's body

<h1> to <h6>Defines header 1 to header 6<h1> to <h6>Defines header 1 to header 6

<p>Defines a paragraph<p>Defines a paragraph

<br>Inserts a single line break<br>Inserts a single line break

<hr>Defines a horizontal rule<hr>Defines a horizontal rule

<!-->Defines a comment<!-->Defines a comment

Page 9: HTML & CSS : A Tutorial

Paragraph Tag <p>Paragraph Tag <p>

Publishing any kind of written works requires the use of a Publishing any kind of written works requires the use of a paragraph. The paragraph tag is very basic and a great paragraph. The paragraph tag is very basic and a great introductory tag for beginner's because of its simplicity.introductory tag for beginner's because of its simplicity.

HTML Code:HTML Code:

<p align="center">For instance, let's say you had a <p align="center">For instance, let's say you had a HUGE school or work...</p>HUGE school or work...</p>

Page 10: HTML & CSS : A Tutorial

HEADINGS IN HTMLHEADINGS IN HTML

A heading in HTML is a title or A heading in HTML is a title or subtitle. By placing text inside subtitle. By placing text inside heading tags, the text is displayed heading tags, the text is displayed in bold, and its size depends on in bold, and its size depends on the number of the heading (1-6), the number of the heading (1-6), with 1 being the largest heading with 1 being the largest heading and 6 being the smallest.and 6 being the smallest.

HTML Code:HTML Code:

<body><body>

<h1>Headings</h1><h1>Headings</h1>

<h2>are</h2><h2>are</h2>

<h3>great</h3><h3>great</h3><h4>for</h4><h4>for</h4><h5>titles</h5><h5>titles</h5><h6>and subtitles</h6><h6>and subtitles</h6></body></body>

Page 11: HTML & CSS : A Tutorial

Line BreakingLine Breaking

For skipping a line, using the tag <br>For skipping a line, using the tag <br>

HTML Code:HTML Code:

<p>Sincerely,<br /><p>Sincerely,<br /><br /><br /><br /><br />Kevin Sanders<br />Kevin Sanders<br />Vice President</p>Vice President</p>

Sincerely,Sincerely,

Kevin SandersKevin SandersVice PresidentVice President

Page 12: HTML & CSS : A Tutorial

HTML AttributesHTML Attributes

Attributes are used to amplify tags. When a web browser Attributes are used to amplify tags. When a web browser interprets a tag, it will also search for set attributes and interprets a tag, it will also search for set attributes and then display the element (tags+attributes) in its entirety. then display the element (tags+attributes) in its entirety. At some point you may want to give your body element a At some point you may want to give your body element a background color or perhaps change the width of a table. background color or perhaps change the width of a table. All of these things and more can be achieved using All of these things and more can be achieved using Attributes.Attributes.

Attributes are placed within the opening tag and they Attributes are placed within the opening tag and they

follow a precise syntax (formatfollow a precise syntax (format).).

Page 13: HTML & CSS : A Tutorial

The ID attributeThe ID attribute

The idea is that you can classify or id certain a tag and The idea is that you can classify or id certain a tag and later format the tag using Cascading Style Sheets. It later format the tag using Cascading Style Sheets. It becomes necessary when you have two or more of the becomes necessary when you have two or more of the same element on a page (like a <p> tag) but want them same element on a page (like a <p> tag) but want them to be different in appearance.to be different in appearance.

HTML Code:HTML Code:

<p id="italicsparagraph">Paragraph type 1 Italics</p><p id="italicsparagraph">Paragraph type 1 Italics</p><p id="boldparagraph">Paragraph type 2 Bold</p><p id="boldparagraph">Paragraph type 2 Bold</p>

Page 14: HTML & CSS : A Tutorial

The Name attributeThe Name attribute

Name is much different than id. By allotting a name to an Name is much different than id. By allotting a name to an element, that name becomes a scripting variable for element, that name becomes a scripting variable for scripting languages such as Javascript, ASP, and PHP. scripting languages such as Javascript, ASP, and PHP. The name attribute is seen most often with forms and The name attribute is seen most often with forms and other user-input elements.other user-input elements.

HTML Code:HTML Code:

<input type="text" name="TextField" /><input type="text" name="TextField" />

Page 15: HTML & CSS : A Tutorial

The Title AttributeThe Title Attribute

This attribute titles an element and adds a tiny text pop-This attribute titles an element and adds a tiny text pop-up to any HTML element. Much like the text pop-ups of up to any HTML element. Much like the text pop-ups of word processing programs, these attributes should not word processing programs, these attributes should not be forgotten. You may title an element anything you be forgotten. You may title an element anything you would like, the effects of this attribute are not seen until would like, the effects of this attribute are not seen until you hover your mouse over the element for a few you hover your mouse over the element for a few seconds.seconds.

HTML Code:HTML Code:<h2 title="Hello There!">Titled Heading Tag</h2><h2 title="Hello There!">Titled Heading Tag</h2>

Hover your mouse over the display heading to see the Hover your mouse over the display heading to see the magic of the title attribute! This provides your web site magic of the title attribute! This provides your web site with some user interaction which is priceless.with some user interaction which is priceless.

Page 16: HTML & CSS : A Tutorial

The Align AttributeThe Align Attribute

If you wish to change the horizontal location of your elements you If you wish to change the horizontal location of your elements you may do so using the align attribute. You may align things left, right, may do so using the align attribute. You may align things left, right, or center. By default most elements are automatically aligned left or center. By default most elements are automatically aligned left unless otherwise specified.unless otherwise specified.

HTML Code:HTML Code:

<h2 align="left">Left aligned heading</h2><h2 align="left">Left aligned heading</h2><h2 align="center">Centered Heading</h2><h2 align="center">Centered Heading</h2><h2 align="right">Right aligned heading</h2><h2 align="right">Right aligned heading</h2>

Page 17: HTML & CSS : A Tutorial

ListsLists

There are different types of lists. A <ol> tag starts an There are different types of lists. A <ol> tag starts an ordered list, and <ul> for unordered listsordered list, and <ul> for unordered lists Use the Use the typetype and and startstart attributes to fine tune your lists attributes to fine tune your lists accordingly.accordingly.

<ul> - unordered lists , <ul> - unordered lists , bulletsbullets

<ol> - ordered lists , <ol> - ordered lists , numbers and lettersnumbers and letters

Page 18: HTML & CSS : A Tutorial

Ordered ListsOrdered Lists

Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. between your opening <ol> and closing </ol> tags to create list items. Ordered simply means numbered.Ordered simply means numbered.

HTML Code:HTML Code:

<h4 >Goals</h4><h4 >Goals</h4> GoalsGoals

<ol><ol><li>Find a Job</li><li>Find a Job</li> 1. Find a Job 1. Find a Job

<li>Get Money</li><li>Get Money</li> 2. Get Money 2. Get Money <li>Move Out</li><li>Move Out</li> 3. Move out3. Move out</ol></ol>

Page 19: HTML & CSS : A Tutorial

If you need to start your ordered list on any number besides If you need to start your ordered list on any number besides 1, you use the 1, you use the startstart attribute. attribute.

<h4 align="center">Goals</h4><h4 align="center">Goals</h4><ol start="4" ><ol start="4" ><li>Buy Food</li><li>Buy Food</li><li>Enroll in College</li><li>Enroll in College</li><li>Get a Degree</li><li>Get a Degree</li></ol></ol>

GoalsGoals

4. Buy Food4. Buy Food5. Enroll in college5. Enroll in college6. Get a Degree6. Get a Degree

Page 20: HTML & CSS : A Tutorial

There are 4 other types of ordered lists. Instead of generic numbers you can There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numerals or letters, both capital and lower-case. Use replace them with Roman numerals or letters, both capital and lower-case. Use the the typetype attribute to change the numbering. attribute to change the numbering.

HTML Code:HTML Code:

<ol type="a"><ol type="a"><ol type="A"><ol type="A"><ol type="i"><ol type="i"><ol type="I"><ol type="I">

Page 21: HTML & CSS : A Tutorial

Unordered ListsUnordered Lists

<h4 align="center">Shopping List</h4><h4 align="center">Shopping List</h4><ul><ul><li>Milk</li><li>Milk</li><li>Toilet Paper</li><li>Toilet Paper</li><li>Cereal</li><li>Cereal</li><li>Bread</li><li>Bread</li></ul></ul>

Other types of bullets: Other types of bullets:

<ul type="square"><ul type="square"><ul type="disc"><ul type="disc"><ul type="circle"><ul type="circle">

Page 22: HTML & CSS : A Tutorial

Bold, Italic and MoreBold, Italic and More

HTML Code:HTML Code:

<p>An example of <b>Bold Text</b></p><p>An example of <b>Bold Text</b></p><p>An example of <strong>Strong Text</strong></p><p>An example of <strong>Strong Text</strong></p><p>An example of <i>Italic Text</i></p><p>An example of <i>Italic Text</i></p>

HTML Formatting:HTML Formatting:

An example of An example of Bold TextBold Text

An example of An example of StrongStrong Text TextAn example of An example of Italic TextItalic Text

Page 23: HTML & CSS : A Tutorial

Color CodingColor CodingThere are 3 different methods to set color. The simplest being the There are 3 different methods to set color. The simplest being the GenericGeneric terms of terms of colors. Examples: black, white, red, green, and blue.colors. Examples: black, white, red, green, and blue.

RGB Values: RGB Values: Each can have a value from 0 (none of that color) to 255 (fully that color). Each can have a value from 0 (none of that color) to 255 (fully that color). Below is an example of RGB in use.Below is an example of RGB in use.

bgcolor="rgb(255,255,255)“ ---- WHITEbgcolor="rgb(255,255,255)“ ---- WHITE

bgcolor="rgb(255,0,0)” --- bgcolor="rgb(255,0,0)” --- RedRed

bgcolor="rgb(0,255,0)“ --- Greenbgcolor="rgb(0,255,0)“ --- Green

bgcolor="rgb(0,0,255)“ --- Bluebgcolor="rgb(0,0,255)“ --- Blue

Hexadecimal: Hexadecimal: A hexadecimal is a 6 digit representation of a color. The first two A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).the blue value(BB).

Here's a sample hexadecimal : bgcolor="#RRGGBB"Here's a sample hexadecimal : bgcolor="#RRGGBB"

Page 24: HTML & CSS : A Tutorial

Hypertext Reference (href)Hypertext Reference (href)

The The hrefhref attribute defines reference that the link refers to. Basically attribute defines reference that the link refers to. Basically this is where the users will be taken if they wish to click this link.this is where the users will be taken if they wish to click this link.

Hypertext references can be:Hypertext references can be: InternalInternal (Links to anchors on the current page) (Links to anchors on the current page) LocalLocal (Links to other pages within your domain )(Links to other pages within your domain ) GlobalGlobal (Links to other domains outside of your site)(Links to other domains outside of your site)

Internal - href="#anchorname“Internal - href="#anchorname“

Local - href="../pics/picturefile.jpg“Local - href="../pics/picturefile.jpg“

Global - href="http://www.tizag.com/"Global - href="http://www.tizag.com/"

Page 25: HTML & CSS : A Tutorial

Text LinksText Links

You must use the <a></a> tags to define the start and ending of an You must use the <a></a> tags to define the start and ending of an anchor. Decide what type of anchor. Decide what type of hrefhref attribute you need and place this attribute you need and place this attribute into the opening tag. The text you place between the attribute into the opening tag. The text you place between the opening and closing tags will be shown as the link on a page. opening and closing tags will be shown as the link on a page.

<a href="http://www.tizag.com/" target="_blank" >Tizag Home</a><a href="http://www.tizag.com/" target="_blank" >Tizag Home</a><a href="http://www.espn.com/" target="_blank" >ESPN Home</a><a href="http://www.espn.com/" target="_blank" >ESPN Home</a><a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a><a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>

Tizag HomeTizag Home ESPN HomeESPN Home Yahoo HomeYahoo Home

Page 26: HTML & CSS : A Tutorial

AnchorsAnchors

To link two sections of your existing page a name must be given to the To link two sections of your existing page a name must be given to the anchor.anchor.

Anchors:Anchors:

<h2>HTML Links and Anchors<h2>HTML Links and Anchors<a name="top"></a><a name="top"></a></h2></h2>

<h2>HTML Text Links<h2>HTML Text Links<a name="text"></a><a name="text"></a></h2> </h2>

Anchor Code:Anchor Code:

<a href="#top">Go to the Top</a><a href="#top">Go to the Top</a>

<a href="#text">Learn about Text Links</a> <a href="#text">Learn about Text Links</a>

Page 27: HTML & CSS : A Tutorial

Character EntitiesCharacter Entities

Some characters have a special meaning in HTML, like the less Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert browser to actually display these characters we must insert character entities in the HTML source.character entities in the HTML source.

A character entity has three parts: an ampersand (&), an entity A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). name or a # and an entity number, and finally a semicolon (;).

The most common character entity in HTML is the non-breaking The most common character entity in HTML is the non-breaking space.space.

Normally HTML will truncate spaces in your text. If you write 10 Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.your text, use the &nbsp; character entity.

Page 28: HTML & CSS : A Tutorial

The Most Common Character The Most Common Character EntitiesEntities

Page 29: HTML & CSS : A Tutorial

ImagesImages

<img src="sunset.gif" /><img src="sunset.gif" />

Alternative AttributeAlternative Attribute

The The altalt attribute specifies alternate text to be displayed if for some attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures.since they cannot display pictures.

HTML Code:HTML Code:

<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful <img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />Sunset" />

Page 30: HTML & CSS : A Tutorial

Image sizes and dimensions:Image sizes and dimensions: <img src="sunset.gif" height="50" width="100"><img src="sunset.gif" height="50" width="100"> Used to personally specify the image dimensions, rather than relying on the browserUsed to personally specify the image dimensions, rather than relying on the browser

Vertically and Horizontally Align Images:Vertically and Horizontally Align Images:

align (Horizontal) align (Horizontal) right right

left left

center center valign (Vertical) valign (Vertical)

top top

bottom bottom

center center

Page 31: HTML & CSS : A Tutorial

<p>This is paragraph 1, yes it is...</p><p>This is paragraph 1, yes it is...</p>

<p><p>

<img src="sunset.gif" align="right"><img src="sunset.gif" align="right">

The image will appear along the...isn't it?The image will appear along the...isn't it?

</p></p>

<p>This is the third paragraph that appears...</p><p>This is the third paragraph that appears...</p>

Page 32: HTML & CSS : A Tutorial

Images as LinksImages as Links

<a href=http://www.tizag.com/> <img src="sunset.gif“> </a><a href=http://www.tizag.com/> <img src="sunset.gif“> </a>

Now the image will take you to a certain home page when you click it. Now the image will take you to a certain home page when you click it.

Page 33: HTML & CSS : A Tutorial

What is CSS?What is CSS?

CSSCSS stands for stands for CCascading ascading SStyle tyle SSheetsheets

Styles define Styles define how to displayhow to display HTML elements HTML elements

Styles are normally stored in Styles are normally stored in Style SheetsStyle Sheets

Styles were added to HTML 4.0 Styles were added to HTML 4.0 to solve a problemto solve a problem

External Style SheetsExternal Style Sheets can save you a lot of work can save you a lot of work

External Style Sheets are stored in External Style Sheets are stored in CSS filesCSS files

Multiple style definitions will Multiple style definitions will cascadecascade into one into one

Page 34: HTML & CSS : A Tutorial

Style SheetsStyle Sheets

A CSS sheet may be linked either A CSS sheet may be linked either internally or externally:internally or externally: Internally, meaning within the html file.This is Internally, meaning within the html file.This is

used for customizing a certain element used for customizing a certain element particularly, and for one page only.particularly, and for one page only.

Externally, which is the more efficient way, Externally, which is the more efficient way, provides the ability to customize the whole provides the ability to customize the whole page including many elements, and also page including many elements, and also permits the user to use the same style for permits the user to use the same style for many different pages.many different pages.

Page 35: HTML & CSS : A Tutorial

Internal Style SheetInternal Style Sheet

An internal style sheet should be used when a single document has An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by a unique style. You define internal styles in the head section by using the <style> tag, like this:using the <style> tag, like this:

<head> <head> <style type="text/css"> <style type="text/css"> hr {color: sienna}hr {color: sienna} p {margin-left: 20px} p {margin-left: 20px} body {background-image: url("images/back40.gif")} body {background-image: url("images/back40.gif")} </style> </style> </head></head>

Page 36: HTML & CSS : A Tutorial

External Style SheetExternal Style Sheet

An external style sheet is ideal when the style is applied to many pages. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:tag. The <link> tag goes inside the head section:

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

The browser will read the style definitions from the file mystyle.css, and The browser will read the style definitions from the file mystyle.css, and format the document according to it. format the document according to it.

An external style sheet can be written in any text editor. The file should not An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below: extension. An example of a style sheet file is shown below:

hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

Page 37: HTML & CSS : A Tutorial

CommentsComments

HTML:HTML: <!---This is an HTML comment ---><!---This is an HTML comment --->

CSS:CSS: /* This is a comment *//* This is a comment */

Page 38: HTML & CSS : A Tutorial

CSS SelectorCSS Selector

CSS selectors are the heart and soul of CSS. They CSS selectors are the heart and soul of CSS. They define which HTML elements you are going to be define which HTML elements you are going to be manipulating with CSS code.manipulating with CSS code.

In a typical CSS statement you have the following: In a typical CSS statement you have the following: SELECTOR { PROPERTY: VALUE }SELECTOR { PROPERTY: VALUE }

"Property" is the CSS element you wish to manipulate and"Property" is the CSS element you wish to manipulate and

"VALUE" represents the value of the specified property. "VALUE" represents the value of the specified property.

Page 39: HTML & CSS : A Tutorial

CSS Selector NameCSS Selector Name

The selector name creates a direct relationship with the The selector name creates a direct relationship with the HTML tag you want to edit. If you wanted to change the HTML tag you want to edit. If you wanted to change the way a paragraph tag behaved, the CSS code would look way a paragraph tag behaved, the CSS code would look like:like:p { PROPERTY: VALUE }p { PROPERTY: VALUE }

example:example: body {color: black} body {color: black}

The above example is a template that you can use The above example is a template that you can use whenever you are manipulating the paragraph HTML whenever you are manipulating the paragraph HTML element.element.

Page 40: HTML & CSS : A Tutorial

To make the style definitions more readable, you can describe one To make the style definitions more readable, you can describe one property on each line, like this:property on each line, like this:

p { text-align: center; color: black; font-family: arial }p { text-align: center; color: black; font-family: arial }

You can group selectors. Separate each selector with a comma. In the You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header example below we have grouped all the header elements. All header elements will be displayed in green text color:elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6 { color: green }h1,h2,h3,h4,h5,h6 { color: green }

Page 41: HTML & CSS : A Tutorial

The Class SelectorThe Class Selector

With the class selector you can define different styles for the same type of With the class selector you can define different styles for the same type of HTML element.HTML element.

Say that you would like to have two types of paragraphs in your document: Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles: you can do it with styles:

<p class="right"> This paragraph will be right-aligned. </p><p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p><p class="center"> This paragraph will be center-aligned. </p>

p.right {text-align: right} p.right {text-align: right} p.center {text-align: center}p.center {text-align: center}

You can also omit the tag name in the selector to define a style that will be You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:all HTML elements with class="center" will be center-aligned:

.center {text-align: center}.center {text-align: center}

Page 42: HTML & CSS : A Tutorial

You can also apply styles to HTML elements with particular You can also apply styles to HTML elements with particular attributes.attributes.The style rule below will match all input elements that have a type The style rule below will match all input elements that have a type attribute with a value of "text":attribute with a value of "text":

input[type="text"] {background-color: blue}input[type="text"] {background-color: blue}

Page 43: HTML & CSS : A Tutorial

The id SelectorThe id Selector

You can also define styles for HTML elements with the id selector. You can also define styles for HTML elements with the id selector. The id selector is defined as a #.The id selector is defined as a #.The style rule below will match the element that has an id attribute The style rule below will match the element that has an id attribute with a value of "green":with a value of "green":

#green {color: green}#green {color: green}

The style rule below will match the p element that has an id with a The style rule below will match the p element that has an id with a value of "para1":value of "para1":

p#para1 { text-align: center; color: red }p#para1 { text-align: center; color: red }

Page 44: HTML & CSS : A Tutorial

CSS Background ColorCSS Background Color

CSS Code:CSS Code:h4 { background-color: white; } h4 { background-color: white; }

p { background-color: #1078E1; } p { background-color: #1078E1; }

ul { background-color: rgb( 149, 206, 145); } ul { background-color: rgb( 149, 206, 145); }

Page 45: HTML & CSS : A Tutorial

CSS Background ImageCSS Background Image

CSS allows you to control:CSS allows you to control: choosing if a background will repeat and which directions to choosing if a background will repeat and which directions to

repeat in.repeat in. precision positioningprecision positioning scrolling/static imagesscrolling/static images

Sample CSS Code:Sample CSS Code:

p { background-image: url(smallPic.jpg); }p { background-image: url(smallPic.jpg); }

Page 46: HTML & CSS : A Tutorial

Background Image RepeatBackground Image Repeat

You can have a background image repeat vertically (y-axis), horizontally (x-You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction. axis), in both directions, or in neither direction.

CSS Code:CSS Code: p { background-image: url(smallPic.jpg); background-repeat: repeat; } p { background-image: url(smallPic.jpg); background-repeat: repeat; } h4 { background-image: url(smallPic.jpg); background-repeat: repeat-y;} h4 { background-image: url(smallPic.jpg); background-repeat: repeat-y;} ol { background-image: url(smallPic.jpg); background-repeat: repeat-x;} ol { background-image: url(smallPic.jpg); background-repeat: repeat-x;} ul { background-image: url(smallPic.jpg); background-repeat: no-repeat;} ul { background-image: url(smallPic.jpg); background-repeat: no-repeat;}

Page 47: HTML & CSS : A Tutorial

CSS Background Image CSS Background Image PositioningPositioning

p { background-image: url(smallPic.jpg); background-position: 20px 10px; } p { background-image: url(smallPic.jpg); background-position: 20px 10px; } h4 { background-image: url(smallPic.jpg); background-position: 30% 30%; } h4 { background-image: url(smallPic.jpg); background-position: 30% 30%; } ol { background-image: url(smallPic.jpg); background-position: top center; }ol { background-image: url(smallPic.jpg); background-position: top center; }

When using pixels, the location of the image will be (A)px from the left of the screen and (B)px When using pixels, the location of the image will be (A)px from the left of the screen and (B)px from the top of the screen, where A and B are integers.from the top of the screen, where A and B are integers. When using percentages, the location of the image will be (A)% from the left of the screen and When using percentages, the location of the image will be (A)% from the left of the screen and (B)% from the top of the screen, where A and B are integers. (B)% from the top of the screen, where A and B are integers. Available positioning keywords are: top, right, bottom, left, and center.Available positioning keywords are: top, right, bottom, left, and center.

Page 48: HTML & CSS : A Tutorial

CSS Font ColorCSS Font Color

h4 { color: red; }h4 { color: red; }h5 { color: #9000A1; } h5 { color: #9000A1; } h6 { color: rgb(0, 220, 98); }h6 { color: rgb(0, 220, 98); }

Page 49: HTML & CSS : A Tutorial

CSS Font FamilyCSS Font Family

h4 { font-family: sans-serif; }h4 { font-family: sans-serif; }h5 ( font-family: serif; } h5 ( font-family: serif; } h6 { font-family: arial; } h6 { font-family: arial; }

Page 50: HTML & CSS : A Tutorial

CSS Font Size:CSS Font Size: p { font-size: 120%; } p { font-size: 120%; } ol{ font-size: 10px; } ol{ font-size: 10px; } ul{ font-size: x-large; }ul{ font-size: x-large; }

CSS Font StyleCSS Font Style p { font-style: italic; }p { font-style: italic; } h4{ font-style: oblique; }h4{ font-style: oblique; }

Page 51: HTML & CSS : A Tutorial

Text DecorationText Decoration

Have you ever wondered how a website removed the underline that Have you ever wondered how a website removed the underline that usually accompanies a link's text? This is done by removing text-usually accompanies a link's text? This is done by removing text-decoration from the link.decoration from the link.

h4{ text-decoration: line-through; } h4{ text-decoration: line-through; }

h5{ text-decoration: overline; } h5{ text-decoration: overline; }

h6{ text-decoration: underline; } a { text-decoration: none; }h6{ text-decoration: underline; } a { text-decoration: none; }

Page 52: HTML & CSS : A Tutorial

Text TransformText Transform

Text-transform is a quick way to modify the capitalization of your Text-transform is a quick way to modify the capitalization of your text. text.

p { text-transform: capitalize; } p { text-transform: capitalize; } h5{ text-transform: uppercase; } h5{ text-transform: uppercase; } h6{ text-transform: lowercase; } h6{ text-transform: lowercase; }

Page 53: HTML & CSS : A Tutorial

CSS Lists With ImagesCSS Lists With Images

ul { list-style-image: url("listArrow.gif"); }ul { list-style-image: url("listArrow.gif"); }

ol { list-style-image: url("listArrow2.gif"); } ol { list-style-image: url("listArrow2.gif"); }

Page 54: HTML & CSS : A Tutorial

To Sum Things UpTo Sum Things Up

What was covered today, was just an What was covered today, was just an introduction to markup language, using introduction to markup language, using HTML & CSS, by listing and discussing HTML & CSS, by listing and discussing some of their infinite aspects and some of their infinite aspects and attributes.attributes.

What matters most is the understanding of What matters most is the understanding of the concept of both, and the differentiation the concept of both, and the differentiation of the usage of each.of the usage of each.