All you need to know about CSS
CSS cascading Style sheet is a progressive breakthrough for the advancement of web Developer. Today, more than hundreds browsers are implementing style sheets, opening authors’ eyes to unique features that allow inspiration over presentation while preserving platform independence. The advantages of of CSS style sheets have become apparent and the disadvantage of continually creating more HTML tags galore for presentation effects with the gradual development of CSS.
Let’s understand CSS in the right perspective
Style sheets in retrospect
Cascading Style sheets have been around in one form or another since the beginnings of HTML in the early 1990s.
As the HTML hypertext makeup language grew, but, it came to cover a wider variety of stylistic capabilities to meet the demands of web developers. With such capabilities, CSS became less important, and an external language for the purposes of defining style attributes was not widely accepted until the development of CSS.
Teething problems with operation of CSS
Many operations of CSS are fraught with inconsistencies, bugs and other quirks. Web developers have commonly had to use hacks and workarounds in order to obtain consistent results across web browsers and platforms.
One of the most known CSS bugs is the Internet Explorer box model bug, box widths are display incorrectly in several versions of the browser, resulting in blocks which show as predictable in most browsers, but are too narrow when viewed in Internet Explorer. The bug can be sidestepped, but not without some cost in terms of functionality.
You may also like
This is just one of hundreds of CSS bugs that have been recorded in various versions of Internet Explorer, Netscape, Mozilla, and Opera many of which reduce the legibility of documents. The production of such bugs in CSS implementations has made it much difficult for web developer to achieve a consistent appearance across platforms.
There currently strong competition between Opera’s Presto layout engine, Mozilla’s Gecko layout engine, and the KHTML engine used in both Apple’s Safari and the Linux Konqueror browsers each of them is important in different aspects of CSS. Internet Explorer remains the worst at rendering CSS by standards set down by World Wide Web Consortium as of 2005.
Some advances of CSS
These problems have exactly led the W3C to study the CSS2 standard into CSS2.1, which may be regarded as something of a working snapshot of current CSS support. CSS2 properties which no browser had successfully implemented were dropped, and in a few cases, defined behaviors were changed to bring the standard into line with the predominant existing implementations.
What makes cascading style sheets important?
Represents cascading Style an enormous step forward for the Web. With the separation of content and presentation between HTML and CSS, the Web no longer needs to drift away from the big ideal of platform independence that provided the medium with its initial push of popularity. Web developers can finally influence the presentation of documents without leaving pages unreadable to users
What is CSS made of?
CSS is made up of style rules that tell a browser how to display a document. There are several ways of linking these style rules to your HTML documents, but the most use and simplest method for starting out is to use HTML’s STYLE element. This element is placed in the document HEAD tag, and it contains the style rules for the page.
What are Functionality and Usage of CSS
CSS is well designed to allow the separation of presentation and structure display. Previous to CSS, nearly all of the presentational attributes of an HTML document were contained within the HTML code all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, in the head attributer of the HTML code.
CSS allows web developer to move much of that information to a style sheet, resulting in considerably simpler HTML code. The HTML documents become much smaller and web browsers will usually cache sites’ CSS style sheets. This leads to a reduction in network traffic, strikingly quicker page downloads and fast loading page.
For example, the HTML element h3 specifies that the text contained within it is a level three heading. It has a lower level of importance than h1 headings, but a higher level of importance than h4 headings. This aspect of the h3 element is structural.
Customarily, headings are used in decreasing order of size, with heading 1 h1 as the largest, because larger headings are usually interpreted to have more importance than smaller ones. Headings are also typically reduced in a bold font in order to give them additional emphasis. The h2 element may be condensed in bold face, and in a font larger than h3 but smaller than h1 . This feature of the h2 element is presentational.
Previous to CSS, document web developer who wanted to assign a specific color, font, size, or other characteristic to all h2 headings had to use the HTML font element for each occurrence of that heading type.
Furthermore, CSS can be used with XML, to allow such structured documents to be rendered with full stylistic control over layout, typography, color, and so forth in any suitable user agent or web browser.
CSS may at times be miss used, particularly by the author of web documents. Some web developers who are accustomed to designing documents severely in HTML may overlook or ignore the enabling features of CSS. For instance, a document web developer who is comfortable with HTML markup that mixes presentation with structure may opt to use strictly embedded CSS styles in all documents. While this may be an upgrading over using deprecated HTML presentational markup, it suffers from some of the same problems that mixed markup HTML does, specifically, it entails a similar amount of document maintenance.
Discrepancies compared: CSS vs programming languages
CSS also shares some drawbacks common with programming languages. In particular, the problem of choosing proper names for CSS classes and identifiers may afflict CSS web developer. In the attempt to choose descriptive names for CSS classes, web developer might associate the class name with desired presentational attributes; for example, a CSS class to be applied to emphasized text might be named “mosred,” implying that it is rendered in a large red font.
While such a choice of naming may be intuitive to the document author, it can cause problems if the developer later decides that the emphasized text should instead be blue; the web developer is left with a CSS class called “mosred” that describes something that is blue. In this case, a more appropriate class name might have been “highlighted,” to better describe the purpose or intent of the class, rather than the appearance of elements of that class.
In a programming language, such a miss use might be analogous to using a variable name “two” for a variable which contains the value 2; however, if the value of the variable changes to 5, the name is no longer appropriate.
CSS in a nutshell
CSS is used by both the web developer and readers of web pages to define colors, fonts, layout and other features of document presentation. It is designed mainly to enable the separation of document structure code in HTML or a similar web markup language from document presentation written in CSS.
This leave-taking provides a number of benefits, including improved content accessibility, greater flexibility and control in the specification of presentational characteristics, and reduced complexity of the structural content. CSS is also capable of controlling the web site style separately in alternative rendering methods, such as on screen in print, by voice when read out by a speech reader based browser or screen reader and on braille based, tactile devices.
CSS allows complete and total control over the style of a hypertext web site. The only way this can be shown in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create good site looking from structure.
Why CSS Is Good For Your Web Site?
Cascading Style Sheets (CSS) are used inside the HTML code behind your Web site as a way of controlling how each page is layout and what elements on it display like. For example, you can use CSS to make headings in your copy a standard size across the whole of your web site or same color.
CSS has been around for several years and is supported by all the all browsers available today, including Internet Explorer for the PC and chrome, Mac, Firefox, Safari and Opera.
Using CSS to control your Web site will give you several assistances:
Makes your Web pages snappier
By using CSS and writing your HTML code to match standards like ‘XHTML Transitional’ or ‘XHTML Strict’ you can reduction the ‘loading time’ of your pages. This is the time it takes between downloading the page and actually showing it on screen to your Website visitor.
When using tables for layout the traditional alternative to using CSS and ‘font’ tags to control how the text on the page display, the browsers have a lot more work to do before they show the page. Using CSS and the proper DocType for the pages means the browser knows what to expect from the code and can display it much faster.
In rehearsal, converting to a standards based CSS layout on one client’s Website reduced the time it took the page to load and display by almost a quarter of a second. Although this is a very small amount of time, it is more than enough to make a Web site feel much more snappy and responsive faster, helping it give a good impression to your potential customers.
Makes your Web site quicker to update
As well as making your pages display faster, CSS makes it easier to make global updates to your Web site. Say you are having a minor change in corporate image and want all your page headings changed from yellow to green. With CSS controlling how your headings look, that means changing the color in one file and the whole web site shows the change a two minute job rather than having to edit every page on the web site.
This flexibility gives you the chance to do more with your Website. Want to display your support for Red Nose Day? Again, one CSS file change can put a little red nose next to all of your headers, turn the text red and even make them display in a silly typeface. Returning them back to normal for the next day is, once again, a single css file change.
Good for Search Engine Optimization
Because using CSS removes lots of HTML from your web pages as layout and the look of text is controlled through the CSS file, it makes your textual content much more prominent within your HTML. This means the search engine spiders can easily find your articles, and that your content is generally displayed in one block, rather than being split up into less readable hunks by HTML just to fit it in to your design.
Using ‘semantically correct XHTML i.e heading tags around the headings and sub headings in your copy, and strong or bold tags around content you wish to highlight tells the search engines those heading words are the most important on the web page. This helps give the page a more boost for searches which match the words which are marked as more important in this way.
Helps in passing the Disability Discrimination Act
Using good CSS and XHTML makes it easy for people with incapacities to change your pages the way they may need to for easy accessing, reading and navigation. This may be through decreasing or increasing the font size, or having it read to them through a screen reader. The clean web page coding that goes along with using CSS means screen readers can easily navigate through your web page and find the content, giving a good knowledge to visually impaired users.
Using CSS and XHTML also helps you observe with the UK Disability Discrimination Act rules for accessible Web sites. This is a valuable side effect of using this kind of coding and takes no extra development time to be acquiescent.
Helps browsing from different devices
As well as helping screen readers, using CSS means alternative devices like mobile phones and PDAs can show your content efficiently and more easily. Though the current market in the West for browsing the Web through mobiles phone is small, it is growing and by using CSS you can create a Web site which is easily viewable on these devices with little extra effort and to navigate,. So as many people use them it will be simple to convert your site to work with current or future devices.
Currently, Web browsers treat CSS slightly differently, so when your Web site is build you may need slightly more cross browser testing, and you will need to find a Web site designer who understands how to build a web site in CSS properly. Most professional web designers and developers are now seeing the benefits of creating standards based CSS web sites, but it is worth ensuring that anyone you hire to make your Web site does know CSS before starting building your web site.
But the downsides are small when associated to the immediate and ongoing benefits of a CSS-based Web site.
You may also like