You are on page 1of 29
Cascading Style Sheets Introduction to CSS CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document. It is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects. Most commonly, CSS is combined with the markup languages HTML or XHTML. Advantages of CSS CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times. Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers. Platform Independence − The Script offer consistent platform independence and can support latest browsers as well. Creating style sheets There are two ways to create style sheets. We can use either use a normal text editor and write the style sheets or we can use a dedicated tool- for example, a Web page design application- which supports CSS. The dedicated tools allow us to create style sheets without learning the syntax of CSS. A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A CSS rule set consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes two parts separated by a colon: Property - A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. Value - Values are assigned to properties. We can put CSS Style Rule Syntax as follows − selector { property: value } In our example, h1 is a selector; and color and font-size are the properties; and blue and 12px are the values of these properties respectively. Grouping Selectors and Rules Short style sheets load faster than longer ones. CSS therefore includes several mechanisms to style sheets by way of grouping selectors and definitions. Example: If you have elements with the same style definitions, like this: h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p{ text-align: center; color: red; } Here, since all three declarations are identical, we can group the selectors into a comma-separated list and have only one declaration as follows: h1, h2, p { text-align: center; color: red; } This will minimize the code. Putting Style Sheets to the document For any style sheet to affect the HTML document, it must be linked to the document. That is, the style sheet and the HTML document must be combined so that they can work together to present the document. This can be done in any of the following four ways:  Apply the basic, document-wide style sheet for the document by using the STYLE element (embedded style).  Apply a style sheet to an individual element using the STYLE attribute (inline style).  Link an external style sheet to the document using the LINK element (linked style).  Import a style sheet using the CSS @import notation (imported style). Linking by using the STYLE element The style sheet and the HTML document can be linked together by putting the style sheet inside a STYLE element at the top of our document. The STYLE element was introduced in HTML specifically to allow style sheets to be inserted inside HTML documents. The example below shows a style sheet linked to a document by using the STYLE element. My page CONTENT Header Text

This text has been styled with CSS. The style sheet has been embedded inside the document itself.

Tree structure and inheritance Inheritance is about how properties trickle down from an element to its children. For example, if you give the body of the page certain properties (for example font and color) then every element within the page will inherit these properties- there is no need to set the font and color again for each element contained within the body tag. Overriding inheritance If you define a style property, and later define an alternative style property for the same thing, the later definition over-rules the earlier one. Example

Some text here, inherits properties of the body.

However, the div’s rules over-ride the body’s rules, as the div’s rules apply later (i.e. nearer to this text in the document).

This also applies when you have a combination of external stylesheets, on-page styles, and inline styles. All other things being equal, the styles that are defined latest, i.e. written nearest to the actual HTML elements and read by the browser last, will over-rule earlier definitions. Properties that don’t Inherit As a general rule, properties in CSS inherit from parent to child elements as described in the previous examples. Some properties, however, don’t inherit. We will use the background property as an example of a property that doesn’t inherit. Let’s say you want to set a background image for a page. In CSS, you can write: My home page My home page

I have been writing books on computers. The background property has a URL (‘ijexture.gif’’) that points to a background image as value. There are a few noteworthy things in the above example:  The background image covers the surface like a wallpaper also the backgrounds of the HI and P element have been covered. This is not due to inheritance, but to the fact that unless otherwise set, all backgrounds are transparent. So, since we haven’t set the backgrounds of the HI or P element to something else, the parent element, BODY, will shine through.  In addition to the URL of the image, a color (white) has also been specified as the background. In case the image can’t be found, you will see the color instead.  The color of the BODY element has been set to black. To ensure contrast between the text and the background, it is a good habit to always set a color when the Background property is set. So, exactly why doesn’t the background property inherit? Visually, the effect of transparency is similar to inheritance: it looks like all elements have the same backgrounds. There are two reasons: first, transparent backgrounds are faster to display (there is nothing to display!) than other backgrounds. Second, since background images are aligned relative to the element they belong to you would otherwise not always end up with a smooth background surface. Common tasks with CSS Setting colors and backgrounds are among the most common tasks performed by CSS. Other common tasks include setting fonts and white space around elements. Common tasks: Fonts CSS font properties define the font family, boldness, size, and the style of a text.  The font-family property is used to change the face of a font.  The font-style property is used to make a font italic or oblique.  The font-variant property is used to create a small-caps effect.  The font-weight property is used to increase or decrease how bold or light a font appears.  The font-size property is used to increase or decrease the size of a font.  The font property is used as shorthand to specify a number of other font properties. The following code segment illustrates the usage of these properties: Font properties

This text has been styled with all font properties.

Common tasks: Margins and Padding The margin property is used to declare the margin between an HTML element and those elements outside it. Margin values are not inherited from their parent elements. Margin can be specified as length (px), %, em, or auto. Padding is the distance between the edges/borders of an HTML element and the content within it. Padding is specified in length (px), em, or %. It accepts no auto value or negative values. (em in the typical typography means the width of the character which has the maximum width and it is usually the width of character W.) Both margin and padding can be set for top, left, right, bottom of the given element. The following code segment illustrates the usage of all the margin and padding properties: Font properties { #margin_container{ width:300px; margin-top:20px; margin-right:auto; margin-bottom:1em; margin-left:auto; padding-top:20px; padding-right:1em; padding-bottom:20px; padding-left:1em; } - ->

This div container has margins and padding.

Just as font is a shorthand property to set several font related properties at once, margin is property which sets all margins properties and padding sets all padding properties. The above example can therefore be written like: #margin_container{ width:300px; margin:20px auto 1em auto; padding:20px 1em 20px 1em; } The first part of the value- 20px is assigned to margin-top. From there it is clockwise: auto is assigned to margin-right, 1em to margin-bottom, and auto to margin-left. Similar is the case for padding. If the same margin or padding is to be applied to all the sides, we can set them as: margin:20px; padding:1em; Common tasks: Links To make it easier for users to browse in hypertext documents, the links should have a style that distinguishes them from normal text. So, we may use underlined hyperlink text and various color schemes to indicate if the user has previously visited the link or not. Since hyperlinks are a fundamental part of the web, Css has a special support for styling them. Here is a simple example: A:link{ text-decoration:underline } The above example specifies that unvisited links should be underlined and by default would appear in blue. In the selector part A:link , A is an HTML element and :link is a pseudo class. Pseudo classes are used to give style to elements based on information outside of the document itself. For ex, the author of the document can’t know if a certain link will be visited or not. A:visited{ text-decoration:none } This rule gives style to visited links just like A:link style to unvisited links. Here is a slightly more complex example: A:link, A:visited{ text-decoration:none } A:hover{ background:cyan } The last rule introduces a new pseudo class :hover. Assuming the user is moving a pointing device (like a mouse) the specified style will be applied to the element when the user moves the pointer over (“hovers” over) the link.