Creating Reset.css

Creating Reset.css

Too many CSS designers don’t realize the importance of creating a “reset.css” file. When you have an environment where each browser has its own “default” styling, you’ll often find yourself thumping your skull as you ask yourself, “Why is there a spacing here?” To save yourself some of the headaches that you’ll undoubtedly experience, you’ll need to create your own simple reset file. The problem with using one of the many currently existing frameworks is that they aren’t tailored specifically to you. For example, I never use the deprecated “center” element in my projects. Consequently, I don’t need to put it into my default styling. However, others may need to do so – though they would deserve a slap on the wrist…or the buttocks if you’re so inclined.

Step 1: Zero Out Your Margins And Padding

By default, the browsers will add margins to many elements. For example, typically there are about six pixels of margins on the body element. As the designer, you should be the one specifying these figures! (Except maybe when it comes to font size – which is a whole other topic to be debated at length.) So let’s zero out a bunch of these elements!

 

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, 

ol, li, dl, dt, dd, form, a, fieldset, input, th, td 

margin: 0; padding: 0; border: 0; outline: none; 

Step 2: Take Control Of Your Elements

You may have noticed that your elements vary in size from browser to browser. You can change this by setting the default font-size to 100%.

 

h1, h2, h3, h4, h5, h6 

font-size: 100%; 

}

Next, we’ll need to define the margins and padding for our heading elements. I’m also going to remove the list-style-type from my list elements. Lastly, I’ll set a base font-size for the body element.

body 

line-height: 1; 

font-size: 88%; 

 

h1, h2, h3, h4, h5, h6 

font-size: 100%; 

padding: .6em 0; 

margin: 0 15px; 

 

ul, ol 

list-style: none; 

 

img 

border: 0; 

Step 3: Expand

I typically like to include a few common classes that I use in all of my projects. You may or may not choose to use these yourself.

 

.floatLeft 

float: left; 

padding: .5em .5em .5em 0; 

 

.floatRight 

float: rightright; 

padding: .5em 0 .5em .5em; 

}

Here Is Our Final Simple Reset.css File.

 

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, 

li, dl, dt, dd, form, a, fieldset, input, th, td 

margin: 0; padding: 0; border: 0; outline: none; 

 

body 

line-height: 1; 

font-size: 88% /* Decide for yourself if you want to include this. */; 

 

h1, h2, h3, h4, h5, h6 

font-size: 100%; 

padding: .6em 0; 

margin: 0 15px; 

 

ul, ol 

list-style: none; 

 

color: black; 

text-decoration: none; 

 

a:hover 

text-decoration: underline; 

 

.floatLeft 

float: left; 

padding: .5em .5em .5em 0; 

 

.floatRight 

float: rightright; 

padding: .5em 0 .5em .5em; 

}

At least for me, this is all I need to get started with a new website. For your own projects, you should expand upon what I have here so that it best suits you. You should probably specify the margins on more of your commonly used elements, like the paragraph tag.

CSS3 Tutorials with all Tags

CSS3 Tutorials with all Tags

Cascading Style Sheets (CSS) is a style sheet language
and it was used for presentations  look and formatting of a document written in a Hyper Text Mark up Language.
It’s most common application is to style web pages written in HTML and XHTML.

Please download the attached PDF document for its tags and tutorials.

 

Difference between <DIV>, <SPAN>, <SECTION>

Difference between <DIV>, <SPAN>, <SECTION>

The SPAN and DIV HTML Elements
How to Use SPAN and DIV with CSS on Web Pages
The SPAN and DIV elements are very useful when dealing with CSS(Cascading Style Sheets).
These two elements in a similar fashion, but they serve different purposes.
The DIV Element :The DIV elements define logical divisions in your web page. It acts a lot like a <P> element, by placing newlines before and after the division. A division can have multiple paragraphs in it.
Using the DIV Tag
To use the DIV element, simply surround the area of your page that you want as a separate division with the <div> and </div> tags:
<div id=”mydiv”>
<p>contents of div</p>
</div>
The DIV element gives you the chance to define the style of whole sections of the HTML. You can define a division of your page as a call out and give that area a different style from the surrounding text. That area could have images, paragraphs and headlines, anything you wanted. The DIV element also gives you the ability to ID areas of your documents so that you can change them with Ajax and dynamic HTML.
The DIV element is different in new HTML5 SECTION element because it does not give the enclosed content any semantic meaning. If you aren’t sure whether the block of content should be a DIV or a SECTION, think about what that content’s purpose is and why you need the DIV or SECTTION element.
1.    If you need the element simply to add styles to that area of the page, you should use the DIV element.
2.    If that area of the page has a specific meaning, for example it holds all your social media elements or it contains your blogroll, then you should use the SECTION element.
One thing to keep in mind when using the DIV element is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a DIV you can’t have a DIV inside a paragraph.
The primary attributes of the DIV element are:
1.    style
2.    class
3.    id
Even if you don’t use style sheets or DHTML, you should get into the habit of using the DIV element. This will give you more flexibility and future proof your HTML. Also, you can use the id to identify your divisions so that your web pages are well formed.
Because the CENTER element has been deprecated in HTML 4.0 and is obsolete in HTML5, it is a good idea to start using <div style=”text-align: center;”> to center the content inside your DIV.
Learn More About the DIV Element
The SPAN Element
The SPAN element has very similar properties to the DIV element, in that it changes the style of the text it encloses. But without any style attributes, the SPAN element won’t change the enclosed items at all.
The primary difference between the SPAN and DIV elements is that SPAN doesn’t do any formatting of it’s own. The DIV element includes a paragraph break. The SPAN element simply tells the browser to apply the style rules to whatever is within the SPAN.
To use the SPAN element, simply surround the text that you want to add styles to with the<span> and </span> tags:
<div id=”mydiv”>
<p><span class=”highlight”>Highlighted text</span> and non-highlighted text.</p>
</div>
The SPAN element has no required attributes, but the three that are the most useful are the same as for the DIV element:
·    style
·    class
·    id
Use SPAN when you want to change the style of elements without placing them in a new block-level element in the document. For example, if you had a Level 3 Heading (H3) that you wanted the second word to be red, you could surround that word with <span style=”color : #f00;”>2ndWord</span> and it would still be a part of the H3 tag, just red. For example:
<h3>This is My <span style=”color: red;”>Awesome</span> Headline</h3>

Interview Questions and answers for web designers – HTML & CSS

Interview Questions and answers for web designers – HTML & CSS

  1. How can we submit a form without a submit buttom?
  2. How do I center a table?
  3. Can I include comments in my Style Sheet?
  4. In DHTML what is the difference between “FontSize” and “Font Size”
  5. HTML is a Programming Language or Scripting Language?
  6. How do I quote font names in quoted values of the style attribute?
  7. What are META tags?
  8. How can I check for errors om html?
  9. How do I make my div 100% height?
  10. what can be done with style sheets that can nit be accomplished with regular HTML ?
  11. Is there anything that can’t be replaced by style sheets ?
  12. What browsers support style sheets? To what extent?
  13. Do any WYSIWYG editors support the creation of Style Sheets? Any text-based HTML editors?
  14. Can you use someone else’s Style Sheet without permission?
  15. What does the “Cascading” in “Cascading Style Sheets” mean?
  16. Which style specification method should be used? Why?
  17. What are the advantages/disadvantages of the various style methods?
  18. How do you override the underlining of hyperlinks?
  19. What is the difference between ID and CLASS?
  20. Which characters can CSS-names contain?

 

Download the answers file here

[like_to_read]Download[/like_to_read]

HTML, CSS, JS, Interview Question and answers

HTML, CSS, JS, Interview Question and answers

  1. What is HTTP ?
    1. HTTP is standards for Hyper Text Transfer Protocol.
  2. What does it mean Small lock on the status bar?
    1. It was a secured connection.
  3. Which is better, gif or jpg format, justify?
    1. Generally JPG is used for High resolution Images, such as artistic images but this takes lot of size in document.  The people who uses slow connections they may face the problems like slow loading but in GIF format it takes low size in 128depth and 256 depth colors and we can also use small animations in GIF format.
  4. Explain HTML Frames (Frames, iFrame, NoFrame, Target controls, Frame Attributes) ?
    1. Frames concept is used to load multiple pages in a single page. We can create frame page by horizontally and vertically if we want to use horizontal frames we use Where Iframe is used.
  5. What is the purpose of an HTML forms?
    1. To get few details from the user.
  6. How Many maximum colors does GIF has ?
    1. 256
  7. Write HTML code to create a INLINE Frame ?
    1. <iframe src=”demo_iframe.htm” width=”200″ height=”200″></iframe>
  8. Why is JavaScript not a programming language but script language? Justify
    1. Write JavaScript code to call multiple function with a single events ?
  9. Write HTML code to control the margins of page?
    1. <body  topmargin=”50”, leftmargin=”50”>
  1.                                                                i.      The above script makes 50px left and top margin
  2. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
  3. The <meta> tag always goes inside the <head> element.
  4. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
  5. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable
  1. Write JavaScript code to call multiple functions with a single event ?
    1. onclick = “f1(); f2”
      or onclick = “funct()”
      function funct() {
      f1()
      f2();

      }
  2. Write JavaScript code to change an image when the users mouse points
    1. document.getElementById(“id”).src = “url Value”;
  3. What is META Tags ?
  1. How can i control the tab order in HTML Form elements?
    1.  <form>
      Field 1 (first tab selection):
      <input type=”text” name=”field1″ tabindex=1 /><br />
      Field 2 (third tab selection):
      <input type=”text” name=”field2″ tabindex=3 /><br />
      Field 3 (second tab selection):
      <input type=”text” name=”field3″ tabindex=2 /><br />
      </form>
  2. How do i get a pop up window to always stay on top using JavaScript ?
    1. <SCRIPT LANGAUGE=”JavaScript”><!–
      function newWindow(file,window) { msgWindow=open(file,window,’resizable=no,width=200,height=400′);
  3. Difference between the DIV and Tables ?
    1. Div generally separates a block of code. It can contain any number of elements, and is controlled by CSS. Think of a table as a block of cells cut into squares. Each cell in the table can be customized and shaped as needed. While both are acceptable for building websites, web developers will tell you that using CSS and divs is the way to go.
  4. Difference between the DIV and SPAN  and  Why Can’t I use only SPAN tag in Document ?
    1. The main difference between the DIV and Span tag is
  5. What is RIA (Rich Internet Application) ?
    1. A rich Internet application (RIA) is a Web application designed to deliver the same features and functions normally associated with deskop applications. RIAs generally split the processing across the Internet/network divide by locating the user interface and related activity and capability on the client side, and the data manipulation and operation on the application side.
  6. What is web 2.0 ?
    1. Web 2.0 is a concept that takes the network as a platform for information sharing, interoperability, user-centered design and collaboration on the World Wide Web. A Web 2.0 site allows users to interact and collaborate with each other in a social media dialogue as creators  of user-generated content in a virtual community, in contrast to websites where users are limited to the passive viewing of content that was created for them.
  7. What is Semantic Web?
    1. The Semantic Web is a collaborative movement lead by the World Wide Web Consortium (W3C). The standard promotes common data formats on the Web. By encouraging the inclusion of semantic content in web pages, the Semantic Web aims at converting the current web dominated by unstructured and semi-structured documents into a “web of data”. The Sematic Web stack builds on the W3C’s Resource Description Framework (RDF).
  8. What are the difference between DIV tag and SECTION element ?
    1. If you need the element simply to add styles to that area of the page, you should use theDIV element.
    2. If that area of the page has a specific meaning, for example it holds all your social media elements or it contains your blogroll, then you should use the SECTION element.