Understanding The Web

What is CSS?

Introduction to Cascading Style Sheets

Cascading Style Sheets (CSS) is the technology behind creating a styled and well-presented web. It’s responsible for layout, style and dimensions of all elements on a web page on the World Wide Web. CSS is also responsible for changing the presentation of a web page on a variety of devices, like mobile phones, tablets and so on. Also, CSS is compatible with any XML based language making it very flexible.

The Anatomy of CSS Rules

CSS uses rules to define specific styles to certain elements. Bellow, I’ve exploded a rule and what the different parts of the rule are.

• Selector - The selector is the element, class or id within the HTML document that you wish to modify the CSS of.
• Declaration - A single property and value that is being modified
• Property - What specific type of style to change e.g. font, color, background, padding, etc.
• Value - The set value of the property it’s set to
• Declaration Block - All of the declarations within a selector. Yes, it’s possible to have more than one

CSS3 - Designing Further

CSS3 is the latest revision of the CSS language. It further evolved upon the CSS2.1 specification with additions such as gradient colours, transitions, animations, image filters, flexible box model and so on. This makes for a further stylised, structured web.

It’s worth noting though that still a lot of major browsers lack support for some of these CSS3 features, therefore requiring a vendor prefix, such as -webkit or -moz to make it work.

CSS3 was also mentioned inside the HTML5 branding page as being one of the key pointers in marketing HTML5 You can see that here.

Implementation Methods for CSS

Implementing CSS into a HTML document isn’t the clearest. That’s mostly down to the fact that it can be done in three different ways. These different methods both have advantages and disadvantages, of which I’ve labelled in the following section. So, here’s a look at the different implementation methods;

External Stylesheet

External stylesheets either relatively or fixed links are by far the most common and most popular method of implementing CSS. This is where you create an outside stylesheet and call it in the head of the HTML document. This linked to document, named something like style.css is most common for one big reason, it makes web pages more modular and allows for reuse of styles across multiple pages and even in some cases sites too.

• Advantages
  • Making web pages more modular
  • Allowing for multiple files to break up having one big stylesheet
  • Distributed to other users
• Disadvantages
  • One more file to keep track off
  • Could increase overall file size
  • Difficulty or Mishaps when linking to the stylesheet

Internal Stylesheet

Internal stylesheets are probably the least commonly used within web pages. These types of style are put into the head and are commonly used by Web novices or small single page web applications. Another major use of such types of styles is browser extensions modifying the look and feel of a page.

• Advantages
  • Useful for overriding already existing sites
  • Manipulating large amount of styles after the page is rendered
  • Reducing the amount of files being deployed when the site goes live
• Disadvantages
  • Not that practical in terms of medium to large scale web projects
  • Becomes unorganised and messy
  • Limited to the single page it’s on

Inline Stylesheet

Inline stylesheets are the medium between these two other implementations, it allows for manipulating a key element on the page. This is common for javascript to use when needing to manipulate the CSS live like moving elements or changing size as the user interacts with the page. However, it’s not a good practice for entire websites.

• Advantages
  • Helpful for manipulating the DOM after it’s rendered (with JavaScript)
  • Mostly prevents elements from being overridden (However, no longer the case with the !important css property)
  • Allows emails to have CSS and look a lot better than plain text
• Disadvantages
  • Not applicable for large scale applications
  • Hard to if not impossible to override after the fact
  • Making the HTML document messy and restricting style to a single page

The Box Model

Within CSS there’s a concept known as the box model. It’s responsible for describing the form and layout of each individual elements. This box model consists of four sections. These are…

• Content - The text, image video or whatever is contained within the element. This is manipulated by using various display types, height and width css properties
• Padding - Padding is responsible for padding out the content from the border giving elements that spacious look and not being scrunched up next to one another or the background color just going around the content. This is manipulated by the css property padding.
• Border - The border is responsible for giving the element’s content and padding a, you guessed it, border around the outside of it. This border can be manipulated with the border property and is also allows us to round corners of elements using border-radius
• Margin - When considering margin think of it this way; you have the content, padding and border which is an orange or football, and lets say you have to of these. However, they’re squeezed right up next to one another. To space them apart from one another that’s where margin comes in. It allows you to move one element away from the other. This can be done using the margin CSS property

All of these sections of the box model are represented in the bellow diagram made using the box model itself.