CSS Explained
What is CSS?
It stands for Cascading Style Sheets. CSS is a style sheet language which is used to enhance or describe how a document written using a markup language is presented on a web browser. Basically, HTML or any other markup language should contain the content for the web page or view and CSS would do all the formatting and layout control. So all the fonts, positioning and decorating of all the elements on a web page is done using Cascading Style Sheets.
Also, see HTML HyperText Markup Language, w3.org Page
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
Even though CSS is used more commonly with markup languages such as HTML and XHTML, it can be used with XML documents as well. CSS is also applied in the rendering of speech and certain other types of media.
CSS is mainly used to bring web pages, web applications and web user interfaces from the state of a basic content page to something visually engaging for the users by maintaining the look and feel of the page. In addition to the common use of CSS on the web, it’s used in designing mobile user interfaces as well.
History of CSS
The invention of CSS took place in the recent past. To be precise, it was proposed or invented on the 10th of October 1994 by Hakon Wium Lie who was working at CERN at the time. Although a number of other style sheet languages were also proposed during this time, the W3C (World Wide Web Consortium) recommended and released a recommendation for CSS as CSS1 in 1996.
Note: CSS is currently maintained by the W3C CSS Working Group. This group is responsible for releasing recommendations after agreeing on a specification.
Versions of CSS
The first version of CSS, CSS1 (Cascading Style Sheets Level 1)as mentioned earlier, was released in 1996. By 1998, the second CSS specification was released by W3C as CSS2 which was developed based on CSS and had improved features such as the support for media-specific style sheets. And now we are up to CSS3.
CSS3
The version of CSS in use at the present is CSS3 which was released in June 1999. CSS3 is also built on the previous versions of the language. The specialization in CSS3 was its division into documentations known as Modules.
CSS Modules
- Box Model
- Background and Borders
- Text Effects
- Selectors
- Image Values and Replaced Content
- 2D/3D Transformations
- User Interface
- Multiple Column Layout
- Animations
Syntax and Usage
HTML formatting can be controlled by other types of style sheets rather than CSS. But I know of none. This is unusual in the computer programming world to have only one language for something. Its been the same situation with Javascript which runs in the browser. Though I hear that may be changing and that is another story.
Applying CSS to your webpage can be done in several ways. CSS can be,
- located in a separate CSS file for the entire website.
- located in multiple CSS files for specific pages.
- located within a web page itself as a CSS section or within the HTML tags.
The 3 basic methods of CSS application is as follows.
- External
- Internal
- Inline
Note: It’s not the best practice to use inline CSS.
In this way, you will only need to edit one or two CSS files in order to change the format and layout for a website with hundreds of pages. You can see the efficiency in editing and maintenance of this vs using any formatting and layout control within the HTML. There are websites with tables to show each major browser vendors and the CSS features supported for various levels of CSS. For more info see w3c.org
Meaning of Cascading
Cascading in CSS means that it is defined in a parent-child type relationship. Inner portions of web pages inherit CSS styling from their containing parent portions. Html elements inherit from parent elements and so on. Children can add to or override parent formatting. ‘div’ tags ‘id’ and ‘class’ attributes play important roles in all of this.
There are varying ways to enhance your website with menu like features. I have found that using CSS for the menu is the best way to go. This website uses CSS for its menu. No Javascript is necessary. Using CSS you may also do other interesting things such as fancy tooltips on mouse hover. And the latest CSS allows you to do things with images and special effects that you would think might require serious coding. So look further into CSS.
