INTRODUCTION TO CSS

TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet  Advantages and Disadvantages of CSSAdvantages and Disadvantages of CSS

Introduction  CSS is an acronym for Cascading Style Sheets. CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colors, margins, lines, height, width, background images, advanced positions and many other things.  HTML can be used to add layout to websites. But CSS gives more options and is more accurate and sophisticated. CSS is supported by all browsers today.

Features of CSS Flexibility: Style sheets provide flexibility within web document. we can associate a style sheet that controls the entire site and we can also set up an individual style sheet to control a single page. The individual style sheet override the global one. Moreover we can also associate style sheet to control a single tag element. Multiple pages use the same style: CSS makes it easier to make multiple pages. Very small size: the most useful feature of CSS is that all of the style and layout is removed from the HTML, so the HTML page size is very smaller.

Cascading: The cascading means that many style sheets can be used and will be merged by the browser to provide a computed style for each element. If styles defined for one element oppose ach other, the later on will be used. Apply CSS without consideration of browser: If the browser does not understand something, it will ignore it and move on to the next attribute. It will not display warnings. This can make things easier in some circumstances, since you can apply styles without having to worry that a browser might ignore the entire style sheet or ignore the parts that it does not understand.

Reduces download time: the CSS file is downloaded just once by visitor’s browser and reused for different pages on a website. This reduces the bandwidth requirements for your server and also ensures a faster download for your visitors. Easy to make changes to the layout: CSS is a means of separating the content of an HTML document from the style and layout of that document. Therefore, CSS makes it very easy to change the style of the document. Accessibility: Separating style from contents makes easy for visitors who prefer to view only the content of a web page, or to modify the content.

Creating Style Sheet A style sheet is a set of instructions that tells a browse how to display a particular type of HTML element. Each instruction has syntax. The basic syntax is as follows: Selector{ property name: value;} The syntax has two parts, the selector and the declaration.

Selector Almost all HTML tags or elements are selectors. Selectors tells a browser which element in a page are governed by a particular rule. Declaration It specifies property and value. Declaration is contained between “{“ …..”}”. Declaration end with a semicolon. The declaration has two parts: Property (e.g. ‘color’) and Value (e.g ‘red’)

Properties tell a browser how to display elements that are selected by rule. Example : P{color : red;} P (i.e.) paragraph) is the selector in this example. There is one declaration that the color property of the paragraph will be red. The combination of a declaration and a selector is known as a rule. Example : Declaration can have one or more declarations. P { color : red; font-size:10px;}

When the declarative part has a lot of declarations, then we can describes it as follows: P{ color : red; Font-size:10px; }

Advantages of CSS CSS saves time :When most of us first learn HTML, we get taught to set the font face, size, color, style etc every time it occurs on a page. This means we find ourselves typing (or copying & pasting) the same thing over and over again. With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs. Pages load faster : Less code means faster download times.

Easy Maintenance : To change the style of an element, you only have to make an edit in one place. Superior styles to HTML : CSS has a much wider array of attributes than HTML. Disadvantages of CSS Browser compatibility: Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.

THANKS