Contact Info Contact Info
Tel:
(+632) 654 0001
Office:
WEB OUTSOURCING GATEWAY
Unit 3101 One Corporate Center, Julia
Vargas Avenue, Corner Meralco Avenue,
Ortigas Center, Pasig City, Philippines

Our Blog

23
Dec

CSS3: Basic Building Block for Website Development

The on-going process of web development and design is nothing without the basic building blocks. These building blocks encompass different elements such as HTML, JavaScript, MySQL, etc. In our last article “Web Development: Basic Concepts of HTML5“, we have discussed the importance of HTML and the features of its latest iteration HTML5 in the field of website development. Furthermore, part of the basic learning is another building block, known as the CSS, or the Cascading Style Sheets. While HTML is a language used to code the structure of a web document, CSS focuses on the overall aesthetics of the website. It defines how to display HTML contents in terms of font style, text formats, link effects and even website animation.

What is CSS?

CSS or Cascading Style Sheets was created with the collaboration of different programmers from the World Wide Web Consortium (W3C). CSS working group considered developing a styling language as the best way to display images in different browsers. (w3.org) Moreover, being stylish and satisfying in terms of the visual outlook of the website can be accomplished with the use of CSS. It can let you style and layout a website that is usable, compact, attractive, organized and easy to maintain. (Collison, 2006)

On the same case with HTML, W3C has been doing a continuous effort in developing the specifications of CSS, which can make easier and faster way of styling web documents. With the different levels/version of CSS, there are different features added and refined depending on the needs of the development. One answer to the needs of styling of website is the latest level of CSS, which is known as CSS3.

CSS3

For the past few years of developing CSS, CSS3 now comes with an innovative change that becomes a great help for developers in the form of split “modules”. These modules contain different sections from previous CSS specifications, which make CSS3 a collection of specifications that has been separately developed continuously.

Some of the recommended modules used by developers and designers in building the creative aspects of a website–even without using Photoshop and other editors–include the following:

  • CSS3 Borders

    This module contains properties that create round borders, shadow to boxes and extending background images.

  • CSS3 Backgrounds

    In the latest level of CSS, several background properties like background-size and background-origin has been included which enables developers to have control on the background element of each web document. Multiple image backgrounds can also be applied in CSS3.

  • CSS3 Gradients

    Defining two types of gradients namely linear and radial gradients, CSS3 lets a website display smooth transitions of two or more different colors. Browsers support the gradient functions with the required prefix –webkit-, -o- or –moz-. (w3schools.com)

  • CSS3 Text Effects

    The text properties that differentiate CSS3 from other versions of CSS are the availability of text-shadow and word-wrap functions. These allow text to have a shadow effect or even wrap the text in a certain position in the web.

  • CSS3 Transforms (2D/3D)

    This module allows elements to change shape, size, move, scale, turn, spin, rotate and stretch using 2D and 3D transformations.

  • CSS3 Transitions

    This effect from CSS3 allows an element to change from one style to another specifying the effect and its duration.

  • CSS3 Animations

    Usually, animated images, Flash animations and JavaScript are used when creating animations in a web page. With the latest feature that CSS3 has, animations can now be possible using @keyframes that specifies the animation functions and other properties that includes the duration, timing and direction of an element.

CONCLUSION:

As the backbone of website development, HTML and CSS have been significant when it comes to building the structure and presentation of a website. Learning the fundamentals of each will allow the developers and designers to provide more opportunities for their clients. Moreover, using CSS and its continuous developments, more customized and well-structured website can now be developed. In terms of maintenance, the availability of separate styling file provides easier access to maintain the appearance of a website.

Tags: , , ,