here is some paper patterns for photoshop design
Button Style for a tag using CSS
Wednesday, 7 November 2012
Now we are creating some buttons using CSS. Here I used CSS to anchor tag to make a button effect. Just copy and paste the script into a notepad and save as webtuter.html.
<style type="text/css">
.button {
font-family: Arial, Helvetica, sans-serif;
padding: 10px 75px;
margin: 0 20px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
}
.green {
border: solid 1px #3b7200;
background-color: #88c72a;
}
.violet {
border: solid 1px #720000;
background-color: #6633CC;
}
</style>
<a href="#" class="button green">Green Button</a>
<a href="#" class="button violet">VioletButton</a>
Result
Green Button VioletButtonUnderstanding DOCTYPES and Effects on Browser Layout
Monday, 5 November 2012
HTML 4.01 has three document types: strict, transitional, and frameset. XHTML 1.1 has one document type, but XHTML 1.0 has three document types, like HTML 4.01. Only one document type definition (DTD) appears in the HTML document
DOCTYPE, short for DTD, defines an HTML or XHTML document's building blocks and tells the browsers and validators which version of HTML or XHTML your document is using.
The DOCTYPE declaration must appear at the beginning of every web page document before the html element to ensure your markup and CSS are standards compliant, and that browsers handle the pages based on the appropriate DTDs.
HTML 4.01 Strict DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
HTML 4.01 Frameset DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
" http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">
XHTML 1.0 Strict DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Here's a basic page with the XHTML 1.1 DTD and the required head, body, and html tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>XHTML Document Type Definition (DTD) </title>
</head>
<body>
<p> XHTML requires DOCTYPE, otherwise the pages won't validate and the browsers fall back on quirks mode.</p>
</body>
</html>
Comments Within CSS
/* This is a comment */
a {
text-decoration: underline;
}
/* This is also a comment */
h1, h2 {
font-size: 120%;
color: #ffffff;
}
CSS Rules
CSS rules are made up of a selector and at least one declaration. A selector is the code that selects the HTML to which you want to apply the style rule. A declaration is made up of at least one CSS property and related property value. CSS properties define the style:
h1 {color: red;}
- Browser style This is the default style sheet within a browser. If you declare no style rules, these defaults are applied.
- User style A user can write a style sheet and make it override any styles you create by changing a setting in the browser.
- Inline style This is style that is used right in the individual element and applied via the style attribute.
- Embedded style This is style that controls one document and is placed inside the style element within the HTML document.
- Linked style This is a style sheet that is linked to an HTML document using the link element in the head of the document.
- Imported style This is similar to linked styles, but it enables you to import styles into a linked style sheet as well as directly into a document.
Inheritance
Inheritance means that styles are inherited from their parent elements. Consider the following:<body>
<h1>My header</h1>
<p>Subsequent Text</p>
</body>
What is CSS Properties
Properties fall between the brackets and their values immediately after the colon, as shown here in a generic example:
selector {
property: value;
}
li {
list-style-type: square;
}
What is CSS Selectors ?
Selectors define which part(s) of your (X)HTML document will be affected by the declarations
you’ve specified. Several types of selectors are available in CSS.
Element Selectors
The most basic of all selectors is the element selector (you may have heard them called tag
selectors). It is simply the name of an (X)HTML element, and not surprisingly it selects all
of those elements in the document. Let’s look an example:
h1 {
color: blue;
}
h2 {
color: green;
}
color: blue;
}
h2 {
color: green;
}
We’ve used h1 and h2 as selectors. These are element selectors that select h1 and h2 elements within the (X)HTML document, respectively. Each rule indicates that the declarations in the declaration block should be applied to the selected element. So, in the previous example, all h1 elements in the page would be blue and all h2 elements would be green.
Class Selectors
So far we’ve been assigning styles exclusively to (X)HTML elements, using element selectors. Modern markup often involves the assigning of classes and IDs to elements. Consider the following example:
<h1 class="warning">Be careful!</h1>
<p class="warning">I like to work half a day. I don’t care
if it is the first 12 hours or the second 12 hours.</p>
<p class="warning">I like to work half a day. I don’t care
if it is the first 12 hours or the second 12 hours.</p>
Here, we’ve specified a class of warning to both the h1 element and the p element.
This gives us a hook on which we can hang styles that is independent of the element type. In
CSS, class selectors are indicated by a class name preceded by a period (.). for example:
.warning {
color: red;
font-weight: bold;
}
color: red;
font-weight: bold;
}
We can also join an element selector with a class selector like this
p.warning {
color: red;
font-weight: bold;
}
color: red;
font-weight: bold;
}
This rule will assign the red color and bold weight only to paragraph elements that have been
assigned the class warning. It will not apply to other type elements, even if they have the warning class assigned.
Class selectors can also be chained together to target elements that have multiple class
names. For example,
<h1 class="warning">Header warning!</h1>
<p class="warning help"> If people knew how hard I had to work to gain my mystery,
it wouldn’t seem wonderful at all.</p>
<p class="help">Michealangelo</p>
A .warning selector will target both the h1 and first p elements, since both have the class
value warning. A .help selector will target both p elements (both have a class value of help).
A chained selector such as .warning.help will select only the first paragraph, since it is the
only element that has both classes (warning and help) assigned to it.
ID Selectors
ID selectors are similar to class selectors, but they are prefaced by a pound sign (#) instead of
a period. ID selectors cannot be chained together, since it is invalid to have more than one ID on a given element in (X)HTML. However, it is possible to chain class selectors and ID selectors,
such as div#main-content.error.So, to select this div element:
<div id="main-content">
<p>This is the main content of the page.</p>
</div>
<p>This is the main content of the page.</p>
</div>
we would need a selector like this:
#main-content {
width: 400px;
}
width: 400px;
}
or this:
div#main-content {
width: 400px;
}
width: 400px;
}
Descendant Selectors
Descendant selectors, sometimes called contextual selectors, allow you to create style rules that
are effective only when an element is the descendant of another one. Descendant selectors are
indicated by a space between two elements.
ul li {
color: blue;
}
color: blue;
}
<ul>
<li>Item one</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 <li>
</li>
</ul>
Pseudo-classes
You may want to add style to items that aren't based on elements' name, attributes, or content. This example of pseudo-classes creates rollover effects:a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: gray;
}
Pseudo-elements
S a developer can style an item within a web document that's not marked up by elements through the use of pseudo-elements. Pseudo-elements consist of :first-letter, :first-line, :before, and :after.Look into the example for pseudo-element in:first-letter
p:first-letter {
font-size: 200%;
font-weight: bold;
}
Using selectors and properties in CSS
Saturday, 3 November 2012
selector identifies what portion of your web page gets styled. Within a selector are one or more properties and their values. Read more on selecters next post , read more about CSS Selectors
property tells the browser what to change and the value lets the browser know what that change should be.
For example, in the following declaration block example, the selector tells the browser to style the content marked up with the h1 element in the web page to 150% of the default size: read more about CSS Properties
Declarations are always formatted as the property name, followed by a colon, followed by a value, and then a semicolon. It is common convention to put a space after the colon, but this is not necessary. The semicolon is an indication that the declaration is concluded. Declarations are grouped within curly brackets, and the wrapped group is called a declaration block.
h1 {
font-size: 150%;
}
selector {
property: value;}
Property is a font-size, text-decoration, font-color, font-size etc.
Value is a 150%, underline, blue, 90% etc.
Try this Example for selectors and properties
If you do want to embed a style sheet, use code like this in the head element of your (X)HTML document:
<html>
<head>
<title>CSS webaegis.in</title>
// This is how we use CSS inbound
<style type="text/css">
<!--
body {
font-family: verdana, arial, sans-serif;
}
h1 {
font-size: 120%;
}
a {
text-decoration: none;
}
p {
font-size: 90%;
}
-->
</style>
</head>
<body>
<h1>Title of Page</h1>
<p>This is a sample paragraph with a
<a href="http://webaegis.in">link</a>.</p>
</body>
</html>
Basics of CSS
Here's an exercise with the traditional "Hello, world!" example. First, open a text editor or a favorite web page editing tool and enter the following:
<html>
<head>
<title>CSS webaegis.in</title>
<head>
<body>
<p>Hello, world!</p>
</body>
</html>
Now let’s ready use CSS in your HTML, To change the style of the HTML text from to sans serif, add a bit of the following CSS in line <p>Hello, world!</p> that look like
<p style="font-family: sans-serif;">Hello, world!</p>
What is CSS ?
Cascading style sheets (CSS) provides a simple way to style the content on your web pages. Basics of CSS
The Advantages of Using CSS for Style
There are numerous real-world advantages to separating content and style, and most of youare probably already aware of them.
By separating the two layers of your document, you make it simple to add, remove, or
update content without having to worry about botching up your layout. You also make it easy
to change the font used for the entire site without having to dig through your content in search of every single <font> tag. Separating the two layers allows a web team to work efficiently.
Your visual designers can focus on design while your content producers focus on content—and
neither has to worry about the other getting in their way. If you’re a solo developer, you’ll find
that the separation of content and presentation allows you to keep your “frames of mind” separate and also when you need to make a change to content, you won’t have to dig through
a bunch of style code to find what you’re looking for.
We will cover the basics of modern (X)HTML markup. Because CSS expects
you to have written clean, valid, and semantic markup for your documents, it’s essential to
have this piece of the equation in great shape before moving on to the presentation layer of
your page or site.
What is XHTML ?
XHTML is a reformulation of HTML in XML. Because of this, XHTMLdocuments are both hypertext documents and XML documents.
XHTML, because of its XML roots, has far more rigorous syntax rules than HTML. Although
this may seem like a bad thing at first glance, it actually forces authors to be more precise, which
in turn makes XHTML documents easier to maintain than their HTML counterparts. The most
relevant examples of XHTML’s more particular syntax requirements include insisting that all element
and attribute names be lowercase, requiring that all attribute values be quoted, and
demanding that all elements—even empty ones—be properly closed.
DOCTYPE: The Most Underappreciated Tag of All
All modern, valid (X)HTML documents must open with a DOCTYPE declaration. DOCTYPE is an(X)HTML string created primarily as a validation mechanism. It indicates to the browser, validator,
or other reading device what sort of document you are writing, as well as which specification,
or set of rules, you are writing it against. Most modern browsers actually display the page differently
based on what DOCTYPE is declared
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The Three Layers of a Modern Web Document
well-constructed web documents have three distinct layers of .structure layer: which is a text document marked up in HTML or XHTML. It contains the content of your document, along with the semantic information that indicates what each bit of text is (headers, paragraphs, lists, and so forth).
HTML
|
Structure Layer
|
CSS
|
Presentation Layer
|
Java Script
|
Behavior Layer
|
behavior layer:scripting (usually JavaScript for manipulating the Document Object Model, or DOM) to update, add, or remove items from the document based on the user’s behavior.
Subscribe to:
Comments (Atom)
