The document discusses the basics of Cascading Style Sheets (CSS), including its syntax, selectors, properties for styling text, links, backgrounds, and positioning elements. CSS is a stylesheet language that allows styling and layout of web pages written in HTML and other markup languages to specify things like colors, fonts, spacing and positioning of elements.

1. CASCADING STYLE SHEETS(CSS) A.BALAKUMARAN B.E-CSE

2. 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. 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. 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 we are working with CSS,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.

3. 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 . 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 &quot;/*&quot;, and ends with &quot;*/&quot;

4. CSS IDENTIFIERS CSS identifiers are also known as CSS selectors. Selectors are used to access the CSS styles. They can be very useful sometimes if we want to apply a special style to a particular element or a particular group of elements. There are three kinds of selectors in CSS: * Element or Tag Selector * Class Selector * ID selector 1.Element Selector The general syntax for an HTML selector is: HTMLSelector {Property:Value;} 2.CLASS Selectors HTML selectors are used when you want to redefine the general look for an entire HTML tag.

5. The general syntax for a Class selector is: .ClassSelector {Property:Value;} Class selectors are used when you want to define a style that does not redefine an HTML tag entirely.When referring to a Class selector you simply add the class to an HTML tag Two tags are particularly useful in combination with class selectors: <SPAN> and <DIV>. Both are &quot;dummy&quot; tags that don't do anything in themselves. Therefore, they are excellent for carrying CSS styles. <SPAN> is an &quot;inline-tag&quot; in HTML, meaning that no line breaks are inserted before or after the use of it. <DIV> is a &quot;block tag&quot;, meaning that line breaks are automatically inserted to distance the block from the surrounding content (like <P> or <TABLE> tags).

6. 3.ID SELECTOR In addition to grouping elements, we 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. ID selectors are used when you want to define a style relating to an object with a unique ID. This selector is most widely used with laye since layers are always defined with a unique ID. COLOURS AND BACKGROUNDS CSS background properties allow you to specify things such as:

7. * 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. Setting Background Colors The background color property allows you to set the background color of an HTML element. The example is given by

8. <html> <head> <style type=&quot;text/css&quot;> body { background-color: cyan } </style> </head> <body> <p> This web page will have a cyan background </p> </body> </html>

9. CASCADING Cascading is like a waterfall. You start at the top. As you go down, there are different levels. There are 3 &quot;levels&quot; 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. The CASCADING part of CSS determines the importance of a command tag. If you have a tag for the same property on all 3 levels, but each one has a different value assigned to it, the CSS will take and use the most important out of them. Level 1 will over-ride Level 2 which will over-ride Level 3.

10. CSS STYLLING CSS Text Key issue for any web designers are: formatting and adding style to text . The Css consists of the following properties namely 1. text-indent 2. text-align 3. text-decoration 4. letter-spacing 5. text-transform Text indention [text-indent] The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 110px is applied to all text paragraphs marked with <p>:

11. Text alignment [text-align] The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can be aligned either to the left, to the right or centred. In addition to this, the value justify will stretch each line so that both the right and left margins are straight. Text decoration [text-decoration] With the help of property text-decoration it is possible to add different &quot;effects&quot; or &quot;decorations&quot; to text. For example, you can underline the text, have a line through or above the text, etc. Letter space [letter-spacing] The property letter-spacing can be used to specifiy spacing between text characters . The value of the property is simply the desired width. For example, if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used.

12. CSS Font CSS saves time and makes our 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. It consists of the following properties namely: * font-family * font-style * font-variant * font-weight * font-size * font

13. CSS Links With CSS we can add effects to hyperlinks. If we 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 a:hover has to come after a:link and a:visited in the CSS definition in order to work as it should a:active has to come after a:hover in the CSS definition in order to work as it should.

14. CSS PADDING Padding can also be understood as &quot;filling&quot;. 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; Definition: The padding can be set using the tag &quot;padding&quot;. It takes the following values: a)20px : This will set a padding of 20px on the four sides (top, right, bottom, left).

15. 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. 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.

16. LAYOUTS 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

17. 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. MARGINS Top Margin The CSS margin properties define the space around elements. CSS padding properties refer to the white space within the border or we can say that it's internal spacing. Setting the value of a margin is NOT the same as setting the padding value, and you should always remember that padding & margin are two different properties. Left Margin Many times we would need to set margin for our objects. This will set the left margin of the object.

18. Bottom Margin Many a times we would need to set margin for our objects. margin-bottom property can be used to set the bottom margin of the object. Right Margin Many times we would need to set margin for our objects. margin-right will set the right margin of the object. Cursor The cursor for any element can be set by using the css property &quot;cursor&quot;. 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 &quot;I&quot; icon that appears when selecting text, and an hourglass.