SIMAEC.NET WEB PUBLISHING

Cascading Style Sheets - An Overview

Cascading Style Sheets or short CSS is the element used to design how the content of a web page, web site is presented to the viewer of the content.

Responsive Web Design

In the early days when the variety of web browsing devices were stirred up by a growing number of mobile devices with small to tiny screens, web site designers were lead into temptation creating versions of a web page for each screen size category. This approach let to exponential growing efforts required to build and maintain a website. Fortunately, the introduction of "Responsive Design" has removed the need for different versions.

Responsive Web Design is an approach that allows the appearance of a web page to adjust to the screen size of the device used to view the page, eliminating the need of different versions for different screen size categories.

How this behavior can be achieved is addressed in details here.

Mobile First Approach

When designing a web page, we start with building the appearance for the smallest device category which includes all devices up to 520px width.

Although we have to keep in mind that content must expand to full width for larger screens, at the beginning we define the appearance just of small devices. We can emulate a small screen sizes using inspector tools of browsers like Chrome, Safari or Firefox.

Within the Cascading Style Sheet we then add media queries to organize the content elements to larger screens. You can observe this behavior by resizing the browser window of this page you are looking at.

@media only screen and (min-width: 520px) {
	/* CSS Statements applying for screens > 519px */
} 

The borders where additional css statements are applied using media queries are called breakpoints. You are free to add as many breakpoints you want but best practice is to stay within a reasonable number. We use 520px, 768px and 960px

Browser and Device Compatibility

By default different browsers display html elements slightly different. If you want to achieve the same appearance of a web page cross-browsers, you need to add reset statements at the beginning.

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

We don't care that much about these differences but we make sure that padding is passed to child elements consistently the same way across all browsers.

Some css statements are browser specific. We stay away from those to prevent having to inflate css code with adjustments for different browsers. We are in the luxury to be allowed to ignore Internet Explorer.

External CSS file vs Inline Style

From time to time, we are led into temptation to drop a style statement inline.

<p style="font-size:18px">Large Text</p>

Stop! With this convenient, lazy approach dropping little css adjustments here and there, you will inflate necessary efforts to maintain webpage appearances over time and it isn't friendly applying the recommended strict Content Security Policy (CSP).

All CSS statements should be maintained in one separate, external file which can be minified for production.

As CSS files are static resources, you have to be aware though that when your web site is published through a CDN, a strategy is in place to deal with changes done to the css statements. Excluding css files from being cached may be an option, not the recommended one. Use css file versioning as better options.

Resources

We aren't experts in all features of cascading style sheets. CSS is a powerful tool allowing you to to build beautiful art works without even thinking about using java script. If you are interested in exploring CSS in more details, we recommend :YT Kevin P.