weborafix

Advance rules to define External CSS, and CSS Inheritance

2011-06-10T10:14:00.001+05:00

Inheritance in HTML with respect to CSS:

As we know that a web page is composition of Markup tags. One tag contains many tags, and many tag can be defined in single tag. If you assume like Parent-Child relation, that will represents inheritance.

Example 1:

...

</div>

Here, div1 is parent of div2, and div2 is parent of div3 or you can say div3 is child of div2 and div2 is child of div1

Example 2:

</div>

div1 is parent of div2 & div3 And div2 & div3 are child of div1

In Example 1, if we define any css for div1, common properties will be automatically implemented on its all child contents. Suppose we define CSS

body{

font-family:arial;

color:green;

}

All the Markup tag that will be defined in body tag of an HTML document, will inherits font-family and color as defined. i.e because of body tag is parent of all other Markup tags that are defined in HTML document.

Advance rules:

Question is that, if you need to modify, or you need to apply any specific css rule on any child content, without effecting parent rules, is it possible to implement?

The answer is YES.

Solution to this problem is,

1. Inline Style for that child content can be defined in HTML.

<p>abcdefghijk.........</p>

</body>

2. Using CSS (Embedded or External), defined in HTML and CSS files

In HTML:

<body>

<p>abcdefghijk.........</p>

</body>

In CSS document:

body{

font-family:arial;

color:green;

}

body h1{

color:red;

}

The code represents that all the contents font-family will be arial, and color will be green except all h1 tags.

We'll discuss in next topic about advance External CSS tips.

Comparison of CSS techniques, External CSS (Style Sheet) use?

2011-06-05T11:34:00.001+05:00

In today's post, we'll discuss External Styles of web page. i.e How do we use External Style Sheets.

(3) External Styles

In this technique, we define all CSS rules in a style sheet file (extension .css) and then give reference to that css file in web page. The advantage of using this technique is, re-usability of CSS rules and making style consistent on all the pages. If we use this technique, we don't need to define Embedded Styles or Inline Styles.

Link tag is used in Head section, that refers to an external style sheet (reference to CSS file)

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

href: contains CSS path.

Example for 2 web pages: Suppose we define two web pages and one CSS

Comparison:

Inline Styles: are used to define rule within tag using its style properly, specifically for that tag within web page.
Embedded Style: are used to make presentation of the web page consistent for defined Selectors within web page, i.e consistency between same tags.
External Styles: are used to apply consistent look on more then one pages, and all the styling rules are defined in a separate file with extension (.css)

How to use CSS (CSS using techniques)?

2011-06-04T10:55:00.000+05:00

We have already discussed in the last post about one technique using CSS i.e Inline Styles.
Today, We'll discuss some other CSS (Cascading Style Sheets) using techniques i.e Embedded Styles and External Style Sheets.

(2) Embedded Styles
In this technique, we define CSS within Head Tag of an HTML document (Web page). The block of CSS will look like this:

<head>
<style type="text/css">
.
.
.
</style>
</head>

Here Style Tag is new tag that is used to define CSS block within page. It describes all the rules and patterns related to presentation(look & feel) of the page. We define CSS using Selectors

<head>

h1{ color:red; font-size:18px; font-family:Arial }

h3{ color:green; font-size:14px; font-family:Arial }

p { color:blue; font-size:12px; font-family:Arial }

</style>

</head>

This technique is actually use to to make formatting of all Selector with same style. It mean, every h1 will follow same pattern as defined in Style tag. here h1, h3, p will be called as Selector.

Code Example and output is attached:

What is CSS? Why we use CSS in HTML?

2011-06-03T09:33:00.001+05:00

What is CSS?
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language.

Why we use CSS in HTML?
It works as cosmetics for an HTML document (a web page).

How to use CSS?
Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined structurally using HTML. In print and on the screen, choice of font , size, color and emphasis for these elements is presentational.

By default, the presentation that you look for any Webpage is known as User Agent style. i.e., the browser's default settings for element presentation.

Better approach to define css is Author styles (provided by the web page author), in the form of:

Inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute
Embedded style, blocks of CSS information inside the HTML itself
External style sheets, i.e., a separate CSS file referenced from the document

(1) Inline styles:

<h1 style="color:red; font-size:12px; font-family:Arial;">This is Heading (h1) Text</h1>
style attribute will be used within any tag h1, h2, span, div, a etc.

color: is a key word, where red is user defined value, you can use any color by name, by hexacode like black (#000000) etc

Size: is a key word of CSS where you define the size of text in pixel (px) normally. other options related to this units can be used, but we will discuss it later.

Font Family: is a keyword to define what font style will be presented on screen when you'll open web page in browser. Just remember, you must those fonts, which are known to be Web Safe Fonts (that mean web supported font family).

Example is attached:

We'll discuss other techniques in next post.

Use of a tag in HTML, and some special tags

2011-06-02T09:14:00.000+05:00

Use full tags:

To Comment code section that you don't want to display when you load a Web page in a browser, or just for the code section related information.

<!--

..

..

..

-->

Any code written in the section will not be render on the browser.

Example:

<!-- 

Comment Section of the Code Start

<div> 

<span>Hello World</span>

</div>

Comment Section of the Code End 

-->

When you will load this code snippet into browser, web page will not display "Hello World". It will consider it as a comment.

<i>...</i> is use to make font in italic style
<b>...</b> and <strong>...</strong> tags are used to make font Bold
<br /> to insert a line break, to start new line

<a> tag is know as hyperlink, link tag is use to link with another document, or to bookmark within same Web page.

Most important attribute of this tag is "href", that is a reference of the linked page/document or section of the page.

Hyper-linking Code:
<a href="myfirstpage.html">Go to First Page</a>
<br />
<a href="mysecondpage.html">Go to Second Page</a>

Suppose we have 3 html pages in the same folder / directory.
i.e index.html, myfirstpage.html and mysecondpage.html

myfistpage.html and mysecondpage.html contains its own defined contents.
In page index.html we place code as defined above in hyper-linking code example. This code section will be defined within body section of this HTML document. When you done this, open this index page into browser, you'll see two links as mentioned. Here, when you click "Go to First Page", it looks for href that represents myfirstpage.html in the same folder. It will load href page into browser.

For Linking Bookmark, within page:

Within href ="#bookmark", # sign is used for the code section that will contain same id. Please look this image

Use of p tag , span tag and div tag in HTML

2011-06-01T11:44:00.002+05:00

In last post we discussed Heading Text and the use of Heading Tags. Today, we'll take a review of contents related tags for an HTML document (web page). As Heading in writing any article, it is used to make title for the contents of that section. Now here, to define the content section (text) or paragraph, we use <p>...</p> tag in HTML document. It manages properly paragraph formatting.

For example:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in urna sit amet felis consequat imperdiet nec eu lacus. Phasellus faucibus facilisis quam, at fermentum elit auctor sit amet. Pellentesque adipiscing tempus purus, vel ultrices lorem vestibulum et. Suspendisse quis nisi nisl. Mauris eget tortor justo, eu consequat odio. Etiam tellus felis, tincidunt eget ornare a, aliquam eu quam. Quisque sed urna vitae diam placerat hendrerit et vel neque. Suspendisse convallis ultricies rutrum. Sed porttitor tempus sagittis. Fusce ipsum leo, tempus nec imperdiet ut, ornare a magna. Quisque ac velit nec turpis suscipit interdum gravida at eros. Sed eget tempus metus. Pellentesque vel quam eu ipsum dapibus laoreet at a magna. Integer egestas purus et nisi sagittis convallis. Curabitur mollis, nisi ullamcorper lacinia tincidunt, enim arcu commodo lorem, vitae interdum metus erat ac arcu. Aenean eu libero odio.</p>

<p>Mauris egestas, nulla at sollicitudin ultrices, felis ante facilisis purus, et interdum elit diam et urna. Nullam gravida, nibh vitae blandit iaculis, nisl purus dapibus sem, ac rutrum nibh mi vitae nunc. Duis sed odio dui, eu pharetra nulla. Suspendisse lacinia vestibulum justo, vitae adipiscing mauris congue ac. Integer a eros a ipsum pharetra feugiat. Curabitur vestibulum elit eu libero commodo fringilla vestibulum diam ornare. Cras tristique vehicula lacus ullamcorper dictum. Donec eleifend egestas erat, at luctus enim scelerisque et. Pellentesque ac purus id tortor sagittis molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in massa dui, id tincidunt justo. Pellentesque vel nunc lacus. Nullam pharetra malesuada quam, adipiscing congue arcu luctus at. Nam convallis, arcu id adipiscing pretium, turpis urna sodales urna, eu tempor sem justo ut sapien. Proin placerat sapien sit amet risus semper sit amet euismod quam tempus. Curabitur quis volutpat neque.</p>

Content writing is an art, whether you are writing a word document, or you are creating an HTML document. Properly defined tag represent the standard of your document. And regarding HTML standards, that make your web page quality on top rank, should follow standard.

Now, Lets talk about <span>...</span> and <div>...</div>

Span and Div are layout related tags. You can also use it in formatting sections as well.

we consider our web page on the screen as a 2-D design, that has X,Y coordinates. Look at this picture

<div> is a layout section that reserves BLOCK level (a complete row by default) area. And a <span> is non-Block type (by default) area, that just reserve its space over the page depending on its contents.

Look at this code example:

we can change default layout behaviour of these tags, but will discuss it later in related layout topic soon.

We can use <span> tag within <div> tag.

Tip: Better practice is to use non-block level tag into block level, but try to avoid use block level into no-block section.

i.e

<span> into <div> is OK

<div> into <span>, Avoid in normal practice

Use of Heading Tags with Example

2011-05-31T13:39:00.003+05:00

Why we use large text when we write any document, any assignment, any article, or design any advertisement banner etc? Just because to gain the focus of user (viewer attention) on that particular section. To make those section more comprehensive for the user attention.

Same here in Web page, we use Heading Tags (h1, h2, h3, h4, h5, h6) to make formatting of contents in properly manner, and to gain proper attention of the website users.

One point to remember for further coming post for you all is:
Every content will be defined in <body>...</body> section of an HTML document (HTML Page, Web Page).

Example:

<html>
<head><title>First Web Page</title></head>
<body>
<h1>Heading Text using h1 tag</h1>
<h2>Heading Text using h2 tag</h2>
<h3>Heading Text using h3 tag</h3>
<h4>Heading Text using h4 tag</h4>
<h5>Heading Text using h5 tag</h5>
<h6>Heading Text using h6 tag</h6>
</body>
</html>

Output:

Markup tags and their use

2011-05-30T09:06:00.010+05:00

Markup Tags are normally known as HTML Tags. These are actually keywords surrounded by angle brackets like <html>.

Tag is used as pair like <html> and </html>, where <html> represents start and </html> represents end. Start tag is known as Opening tag and End tag is known as Closing Tag.

Markup tags are not case sensitive. There is a term used in HTML document, doctype. If no any doctype is defined when creating an HTML document, Markup tags defined in Upper or Lower. But It is recommended for all of you to practice it in small case like <span>, not like <SPAN>.

We'll focus on contents of HTML document related basic Markup tags commonly used:
All these tags will be used within <body>...</body> tag, so that it can be displayed on browser.

For Text Headings:
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

For Text Paragraphs:
<p>...</p>

For Page Division or Making Sections:
<span>...</span>
<div>...</div>

For representing contents in the form of rows & columns on HTML page:
<table>...</table>

For linking one Web page with another (Hyperlink):
<a>...</a>

For making Forms:
<input />
<form>...</form>

For placing photos:
<img />

For lists:

There are many other tags available but will learn when we need it.
In next coming posts, we'll learn deeply the use of each commonly used tags with examples.

Structure of an HTML page

2011-05-29T15:15:00.001+05:00

Markup Tags are used to construct an HTML page (a Web page). We divide an HTML document into following tags.

<html>...</html>

This tag represents the start and end of an HTML document. It has two sub parts.

1. Head
2. Body

Head can be defined using tag <head>...</head>. Head contains processing information and meta data for HTML document.

Body can be defined using tag <body>...</body> that contains displayable information on browser.

Head contains another important part Title
<title>...</title> this tag is use to display heading of the web page.

Simple structure of an HTML page will be

What is an HTML document or a Web Page

2011-05-28T09:43:00.000+05:00

HTML (Hyper Text Markup Language), where Markup language is a set of Markup tags. You'll learn soon the basics and the use of these Tags, that an HTML uses to describe Web Page.

Web page is a standard WWW (World Wide Web) document or information resource that can be accessed through web browser and can be displayed on a computer display or mobile etc.
In short, an HTML document is known as a Web page.

Create an HTML page

2011-05-27T11:22:00.001+05:00

There are many ways to create web pages. But I'll recommend new learners to use simply a notepad editor. It'll help you to learn all HTML basics more effectively...

Learn HTML quickly in 5 easy steps for creating your first web page, that will work on you browser.

Step1: Open notepad editor

Step2:
copy this code and paste into text editor

<html>
<head><title>First Web Page</title></head>
<body>Hello World! This is my first web page.</body>
</html>

Step3: Save file: set save as type to <all file types>, and <file name> to myfirstpage.html or my firstpage.htm

Step4: close notepad text editor

Step5: double click on the myfirstpage.html or myfirstpage.htm, it will be opened into browser.

It works :)