Log in

Sign in with your email address and password:

No account? Sign up here.
Forgot your password? Reset it here.
Didn't receive account confirmation email? Request a new one.


Cascading Style Sheets – Bringing the Vogue to your Website

CSS is an acronym that stands for Cascading Style Sheets and describes how HTML elements on a website are displayed. In simpler words, CSS is used to make the static site that is built with HTML much sexier! This nifty style sheet language not only dresses up an otherwise website skeleton, but it also makes it easier to change design across several web pages at once. For example, if a web developer wants to make the navigation colour of the full website red, he or she can easily do so using Cascading Style Sheets.

Cascading Style Sheets - Bringing the Vogue to your Website

Versions of CSS

W3C recommended the first version of Cascading Style Sheets (CSS1) in December 1996. This particular version describes the CSS language as well as a simple visual formatting model for all the HTML elements and tags. May of 1998 was a big month for CSS2, with W3C publicising their support for it. This particular version adds support for media-specific style sheets. Examples are printers and downloadable fonts.

Why Use Cascading Style Sheets?

Primarily used to style web pages to make them more aesthetically pleasing, Cascading Style Sheets goes hand in hand with HTML. In the first instance, a websites skeleton is built using HTML and then designed by CSS. Both of these development languages work hand in hand and one cannot offer much value without the other. With HTML offering functionality, CSS brings the design element. For example, fonts, colours and other design components are determined by CSS so would be web designers, its time to sit up and learn a fashionable new language!

In addition to the above benefits, CSS also has a status as a clean coding technique; web browsers easily read it. This is an advantage as your web pages will be processed and displayed with ease.

How Do I Write Cascading Style Sheets?

Write CSS within the HTML of the webpage like this:
A particular <style> tag can also be used to write all the CSS, but best practice is always to write CSS in a separate .css file. It keeps the CSS different from the HTML, and it is just easier to maintain.

What are the Advantages of CSS?

  • Less time − Write CSS just once, and you can then reuse the same file in multiple HTML pages
  • Easy maintenance − If you write all your CSS in a separate style sheet, it’s straightforward to maintain
  • Superior styles to HTML − Cascading Style Sheets has many more attributes than HTML so it looks cleaner
    Multiple Device Compatibility − Websites compatibility is quick and seamless on all devices including a mobile phone
  • Global Worldwide Standards − With HTML used less frequently, CSS is continuing to reign supreme. It has never been a better time to engage CSS in all your websites to ensure browser compatibility

Whitespace in CSS

Whitespace is ignored in CSS. Basically p{font-size:12px}; is equivalent to:

CSS 3: Latest Version
Wikipedia states that CSS 3 drafts were published for the first time in June 1999. CSS3 was divided into various modules, and the first module was released in June 2012. The most recent version was released in June 2018.

CSS 3: Media Queries
Media queries are one of the best modules in CSS 3. Media queries allow you to write different CSS for different screen sizes. Nowadays people use all types of devices starting from mobile right up to widescreen television. One of the best features a website can have is to look consistently flawless on all devices. As a web designer, media queries have made this easy and fast. An example of this capability is when viewing a website from a mobile, the text size will be 12 pixels while on television, it might be 30 pixels. With media queries, this can be done quickly.

Conclusion

HTML attributes are depreciating, and more people are using CSS nowadays. Eventually, HTML attributes will be removed from future versions of CSS. Now is the time to get yourself acquainted with Cascading Style Sheets before its too late!


Submit a Comment