2. 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.
3. Introduction to CSS: 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. CSS has various levels and profiles. There are multiple levels of CSS, denoted as CSS1, CSS2, and CSS3 is builds upon the last, typically adding new features to existing one. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types which were added in CSS2.
4. 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. Let us look at a example. Let's say we want a nice green color as the background of a webpage With CSS the same result can be achieved like this: body {background-color: #0000FF;}
5. 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; }
6. 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
7. Element Selector The general syntax for an HTML selector is: HTMLSelector {Property:Value;} For example: <HTML><HEAD> <style type="text/css"> B{ font-family:arial; font-size:14px; color:blue } </style></HEAD> <BODY> <b>This is a customized headline style bold</b> </BODY></HTML>
8. CLASS Selectors HTML 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;} For example: <HTML> <HEAD> <style type="text/css"> .headline {font-family:arial; font-size:14px; color:red} </style></HEAD> <BODY> <b class="headline">This is a bold tag carrying the headline class</b> <br> <i class="headline">This is an italics tag carrying the headline class</i> </BODY></HTML>
9. 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;}
10. For example: <HTML><HEAD><style type="text/css"> #layer1 { position:absolute; left:100; top:100; z-Index:1; background-color:cyan } #layer2 { position:absolute; left:140; top:130; z-Index:0; background-color:pink } </style></HEAD><BODY> <div ID="layer1"> THIS IS LAYER 1<br>POSITIONED AT 100,100</div> <div ID="layer2"> THIS IS LAYER 2<br>POSITIONED AT 140,130 </div></BODY>lt;/html>
11.
12. Setting Background Colors The background color property allows you to set the background color of an HTML element. The following CSS code example shows how to set the background property of a paragraph in an internal style sheet. <html> <head> <style type="text/css"> p { background-color: cyan } </style> </head> <body> <p> This paragraph will have a cyan background </p> </body> </html>
13. Setting an Image as a Background With the help of following CSS code, we will show you how to insert an image as a background. Scroll up and down the web page and notice how the image scrolls with the web page. By default, the page background image will scroll with the page. <html> <head> <style type="text/css"> { background-image: url('image.gif') } </style> </head> <body> <p> a CSS example of a background image </p> </body> </html>
14. 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.
15. 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 pages connected 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 .
16. An external page is usually used for a "general"or "common" style layout. Setting the background color or image, setting the text colors, etc. To link to the external style sheet, a LINK must be placed in the HEAD area of the page code. That is anywhere after the <HEAD> tag and before the </HEAD> tag. <link rel="stylesheet" type="text/css" href="FileName.css"> LINK There is a separate page of command tags linked to use on this page. REL The linked page is a STYLESHEET. TYPE The linked page is text format containing CSS commands. HREF The filename (and location or sub-directories if necessary) of the linked page.
17. 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. Embedded CSS codes are placed within the HEAD area of the page code. That is anywhere after the <HEAD> tag and before the </HEAD> tag. NOT in the HEAD tag itself. <style type="text/css"> <!-- ... style sheet codes here ... --> </style>
18. 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
19. Text decoration [text-decoration] With the help of property text-decoration it is possible to add different "effects" or "decorations" to text. For example, you can underline the text, have a line through or above the text, etc. In the following example, <h1> are underlined headlines, <h2> are headlines with a line above the text and <h3> are headlines with a line though the text. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <TITLE>CSS Text example</TITLE> <style> body { background-image: url('img.gif'); background-repeat: no-repeat background-position: bottom left } h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; } </style></HEAD><BODY> <P>a CSS Text example [text-decoration]</p> <h1>Text Decoration underline</h1> <h2>Text Decoration overline</h2> <h3>Text Decoration line-through </h3> </BODY></HTML>
20. CSS Font So, why should we specify font of pages using CSS? CSS saves time and makes your life easier. One of the major advantages of using CSS to specify fonts is that at anygiven 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
21. 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 link a:visited {color: #000000} defines a visited link a:hover {color: #000000} defines a mouse over link a:active {color: #000000} defines a selected link
22. 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;
23. Definition: The padding can be set using the tag "padding". It takes the following values: a)20px : This will set a padding of 20px on the four sides (top, right, bottom, left). b)10px 20px 30px 10px: This format will set the padding in the order of top,right,bottom,left. c)10px 20px : This format will set the padding for top and right. Bottom will take the top padding value (10px) and left will take right paddings value(20px). d)20px 10px 30px: This format will set the padding for top and right and bottom. left will take the right paddings value.The values can be in percentage or points or pixels.
24. 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. Note: Netscape and IE give the body tag a default margin of 8px. On the otherhand Opera does not give any such margin! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!
25. 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.
26. 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.
27. Border Color The CSS border properties allow us to specify the style and color of an element's border.With CSS we can create styled border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element. Usage: border-color: red; border-color: #454545; border-color: rgb(123,123,123); Definition: The border of any object can be set with any color using the tag/argument border-color. border-color will not take effect with out border style. Border style can be set using "border-style" .
28. Border Width The width of elements borders is defined by the property border-width, which can have the values thin, medium, and thick, or a numeric value, indicated in pixels. The border width of any object can be set with any width using the tag/argument border-width. border-width will not take effect with out border style. Border style can be set using "border-style". Border Width takes the following values: 5px : The border width can be set in pixels. 5pt : The border width can be set in points. 1% : The border width can be set in percentage.
29. Border Style here are different types of borders to choose from. Below are shown 8 different types of borders as Internet Explorer 5.5 and Firefox 2 interprets them. All examples are shown with the color "gold" and the thickness "thick" but can naturally be shown in other colors and thicknesses. Note: Some border style make not show properly on Firefox 2, because they are non-standard or supports IE only. The style of the border can be set using the tag border-style. Border Style takes the following values: dotted- This will create a border with dotted lines. dashed- This will create a border with dashed lines. solid- This will create a border with solid lines. double- This will create a border containing double lines. groove- This will create a border that will look like groove. ridge- This will create a border that will look like ridge. inset- This will create a border with the line looking inset. outset- This will create a border with the line looking outset.
30. 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.
31. 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. The idea of having standards is to agree upon a common denominator on how to use web technologies. A web developer has a certainty, by observing the standards, that what he or she does will work in a more appropriate manner across different platforms.
32. 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
