CSS Best Practices

What is CSS?

Håkon Wium Lie

CSS, or Cascading Style Sheets, are used to house information regarding the styling and layout information of a website. The CSS coding language is different from HTML, and it is typically housed in a separate file.

Pictured is Håkon Wium Lie, one of the minds behind CSS. He began his work developing Cascading Style Sheets in 1994, and it has since been accepted as a W3C standard for website development. CSS technology is actively developing today, and new features are added with each version. At the bottom of this page, a table breaks down some of the features included with the most recent version—CSS3.

How does CSS work?

CSS can be used as a file external to the HTML code files of a website. It contains specific information on web page layout, colors, fonts, and more. Styles can also be created in-line or embedded in individual HTML files.

How is CSS helpful to web developers?

CSS helps web developers change the styles for all HTML web pages linked to it by editing a single CSS file. Before CSS, these styles would be changed manually for every file or page in a website. The innovation of CSS saves time and frustration, all while providing a more uniform viewing experience to the visitor.

CSS3 Improvements
Name Purpose Options Example
Opacity Adjusts opaqueness of elements Value ranging between 0-1; 1=opaque, 0=transparent h2 { background-color: red; opacity: 0.5; }
HSLA Colors Adjust color values without entering new hexidecimal code; added opacity Hue=0-359; Saturation=%; Lightness=%; A=0-1 (opacity) header { background-color: hsla(120,100%,75%,0.3); }
Gradients Apply gradual color changes Linear and Radial body { background: linear-gradient(to bottom, #ffffff, #000000); }
Text Shadow Apply shadows to text Specify shadow direction, color, and blur h1 { text-shadow: 2px 2px 2px #000000; }
Border Radius Create rounded corners on elements Specify the roundness; can change one or more corners h1 { border: 1px solid #000000; border-radius: 15px; }
"What's new in CSS 3" by Sahil Dhawan