Css

CSS

BY,NIRMAL FELIX.K

INTRODUCTION: Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did. HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>,<table>and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML, XML, XHTML ect . Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML(markup) document, including SVG and XUL. World Wide Web Consortium (W3C) maintain the CSS specifications.

What are style sheets?

A style sheet is a set of commands, each one of these instructions tells a browser how to draw a particular element on a page. When you are working with CSS, it is very important to grasp this idea of HTML elements. Well-formed HTML documents are a collection of elements arranged in a kind of suppression hierarchy.

We refer the instructions in a style sheet as statements. There are a few different types of statement, but the one you'll use most is referred to as a rule. Rules have two parts:selectordeclaration The selector informs a browser which elements in a page will be affected by the formatting rule. There are different types of selector. The declaration tells the browser which set of properties to apply or what we want to do or how something should look. There are many different properties.

Rules have a very simple form: the selector, followed by the set of properties, which are surrounded by curly braces that is { and }. span {font-size: 1em} selects any <span> elements, and makes their font 1em. You don't have to worry too much about the details of this syntax if you use a CSS Editor which makes sure it all comes out just right.

Basic CSS Syntax The basic CSS syntax is made up of following 3 parts: selector {property: value} The selector is typically an HTML tag or element such as <p>, <table>, <h1>,<div> etc . The following is a CSS code example of an internal style sheet. The selector (the <p> tag in this example) is made bold. Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely identify many of the codes.

CSS Comments We can insert comments in our CSS much like we can with HTML code. And just as in HTML, the comment will be ignored by the web browser. A CSS comment begins with "/*", and ends with "*/", like the following example.

/* This is a CSS comment */p{font-size: 120%;/* This is another CSS comment */color: black;}

CSS Identifier

CSS identifier also known as CSS selectors. Selectors are used to access the CSS styles. They can be very useful sometimes you want to apply a special style to a particular element or a particular group of elements. There are three kinds of selectors in CSS:

1. Element or Tag Selector 2. Class Selector 3. ID selector

Element SelectorThe general syntax for an HTML selector is:

HTMLSelector {Property:Value;}

CLASS SelectorsHTML selectors are used when you want to redefine the general look for an entire HTML tag. The general syntax for a Class selector is:.ClassSelector {Property:Value;}

ID selector

In addition to grouping elements, you might need to identify one unique element. This is done by using the attribute id.Each id has to be unique. There can not be two elements in the same document with the same id, which is special about the attribute id. In other cases, you should use the class attribute instead. Now, let us take a look at an example of a possible usage of id: The general syntax for an ID selector is:#IDSelector {Property:Value;}

Colors and Backgrounds CSS background properties allow you to specify things such as:

* The background color of a web page(s), table(s), paragraph(s), etc * The background image for a web page(s), table(s), paragraph(s), etc * The position of the background image. * It allows an image to scroll with a web page, or to fix the position on the screen. * It allows you to control whether the image repeats itself or not. * It allows you to control how image will repeat itself.

Cascading What is Cascading?Cascading is like a waterfall. You start at the top. As you go down, there are different levels. There are 3 "levels" of CSS commands:

1. On the same page within an HTML tag as a property. 2. On the same page in the <HEAD> ... </HEAD> area. 3. On a separate page.

External

Having written all CSS commands on a separate page is best suited for a multiple page site owner. Multiple pages are able to utilize the same commands in a single area. These pages are called "linked" or external CSS. For time, it saves from typing in all the commands on each individual page. For space, it takes less space since more than one page is using the same page reference. For editing, one change on the master CSS page will affect all pagesconnected to it, instantly. For maintenance, such sites are easy to modify and maintain since when we edit the master CSS, the effects are shown on all related pages.

CSS pages have a file extension of .css which is allowed on most, if not all, main homepage servers. Create and save the document in text-only format then give the document the .css extension.

Embedded The HEAD area, is also used to store CSS commands. These are called embedded CSS. Embedded commands are more specific to the page. Any embedded CSS command will over-ride an external CSS command of the same tag.

Inline Inline CSS are the most dominant type of CSS commands. They will over-ride any others before them. Style commands are actually placed within any regular HTML tag in the BODY area.<tag style=" CSS code ">... text or object ...</tag>

CSS Text Key issue for any web designers are: formatting and adding style to text .Now you will be introduced to the amazing opportunities CSS gives you to add layout to text. The following properties will be described in this section:

1. text-indent 2. text-align 3. text-decoration 4. letter-spacing 5. text-transform

CSS Font

CSS saves time and makes your life easier. One of the major advantages of using CSS to specify fonts is that at any given time, you can change font on an entire website in just a few minutes. Just change the master css and changes will be reflected in all linked pages instantly. We will also look at how to work around the issue that specific fonts chosen for a website Can only be seen if the font is installed on the PC used to access the website.

The following CSS properties will be described:

* font-family * font-style * font-variant * font-weight * font-size * font

CSS Links With CSS you can add effects to hyperlinks. If you do not use CSS, the only alternative way to add effects to hyperlinks would be to use JavaScript.A hyperlink has four states that it can be in. CSS allows you to customize each state that it is in. It is also necessary to write the code in the order in which they appear for the link(s) to work properly. a:link {color: #000000}defines an unvisited linka:visited {color: #000000}defines a visited linka:hover {color: #000000}defines a mouse over linka:active {color: #000000}defines a selected link

CSS Padding Padding can also be understood as "filling". It's like internal spacing. This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. All the padding (left, right, bottom, left) can be combined using this single tag.Usage:padding: 20px;padding: 10px 20px 30px 10px;padding: 10px 20px;padding: 20px 10px 30px;

Margins The CSS margin properties define the space around elements. It’s opposite to padding. Negative values can also be used to overlap content. A shorthand margin property can be used to change all of the margins at once. The top, right, bottom, and left margin can be changed independently using separate properties.

Layout Line Spacing CSS allows you to control the widthand height of an element, as well as increase the space between two lines, with the use of dimension properties. CSS Positioning The CSS positioning properties allow you to specify the position of an element (element's left, right, top, and bottom position). It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.

CSS Layers CSS allows you to position HTML elements on top of one another, giving control over which item will appear on top.CSS layers are more flexible and more convenient than other layout management schemas. Layers can be used for effective layout management. In the beginning, you may find it difficult , but as you get more use-to with layers, you will feel that they are more easy then their alternative.

Advance CSS Cursor The cursor for any element can be set by using the css property "cursor".CSS allows you to specify custom cursor that should appear when hovering over an element.The normal default cursor icons are usually a skewed arrow, an "I" icon that appears when selecting text, and an hourglass.

Dimension The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines.

onMouseover Effect Using onMouseover property, we can define how a link (or image or any other element) should act when the mouse is moved over the element. It is very simple to do this. Just follow the steps and you can do it.

Media One major advantage of CSS2 over CSS1 over is that CSS2 allows you to specify how a web page is to be presented on different media: on a computer screen, on paper, on handheld devices, on television based screens, with speech synthesizers, etc.

Style Object The Style object represents an individual style statement. The Style object can be accessed from the document or from the elements to which that style is applied. Syntax for using the Style object properties:document.getElementById("id").style.property="value" The Style object property categories:

* Background * Border and Margin * Layout * List * Misc * Positioning * Printing * Scrollbar * Table * Text * Standard

Web standards and Validation W3C is the World Wide Web Consortium, which is an independent organization that manages code standards on the web (e.g. HTML, CSS, XML and others such web technologies). Microsoft, The Mozilla Foundation and many others are a part of W3C and agree upon the future developments of the standards. If you have been working just a bit with web design, you probably know how a webpage is presented across different browsers and that there can be a big differences on different browsers. It can be very frustrating and time-consuming to create a webpage which can be viewed in Mozilla, Internet Explorer, Opera and all the rest of the existing browsers.

CSS validator W3C has made a so-called validator which reads your stylesheet and returns a status listing errors and warnings, if your CSS does not validat; to make it easier to observe the CSS standard. To make it easier for you to validate your stylesheet, you can do it directly from this webpage. Simply replace the URL with the URL of your stylesheet below and click to validate. You will then be informed by the W3C site if there are any errors found.

Thank you

Css

Technology

Transcript of Css