When browsing the internet, you’ve probably found yourself asking why some websites are so much more visually appealing than others. If you’re interested in becoming a web developer, you may have also asked yourself how a programmer is able to alter the appearance of those pages using code. The answer to these questions is CSS, or Cascading Style Sheets, which is the language responsible for the visual element of every kind of website. In this blog post we’re going to be looking in detail at exactly what CSS is, and how web developers use it to create the aesthetic element we see and enjoy when looking at our favourite websites.

How Is A Web Page Built?

Before we get on to CSS, let’s take a moment to define the other elements we’ll be talking about in today’s post, beginning with the web page. Now, a web page is a hypertext document connected to the World Wide Web. It’s accessed when your browser enters the URL the page is hosted on. A website is a collection of web pages which is hosted on a domain. Each web page is made up of three aspects: content, presentation, and behavior.

The content is essentially the elements which make up the page. For example, the text, images, and headings make up the content. The content is written in HTML , short for HyperText Markup Language. HTML is responsible for defining the content and structure of a web page.

The presentation is the visual representation of the elements on the page.

Though it is possible to write CSS directly in an HTML document, this is not advisable, since CSS was created to allow for the separation of content and presentation. This means that the same HTML document can be styled in many different ways, and can remain accessible to different rendering methods, such as screen readers.

Presentation is defined using Cascading Style Sheets, or CSS for short. CSS is responsible for the aesthetics and visual appeal of a page. Besides changing basic things such as colors, fonts, and spacing, CSS is also used to optimize pages for responsive design and create other advanced visuals such as hover effects. Web pages that are responsive will change in layout depending on the screen size of the user’s device. In recent times the ability to create responsive sites has grown increasingly more important as the number of potential screen size options for users has ballooned.

The behavior describes both the user interaction with the web page and the animation contained within it. Typically the behaviour on a page is handled by a programming language called JavaScript.

Getting Started With CSS

All CSS files are written in style sheets. A style sheet tells the web browser how to render the document being viewed. One important concept to understand about CSS is that all style sheets are cascading. Every web page is effected by at least one style sheet, even if there are no styles applied by the designer. The default styles added by the browser are contained in the User Agent stylesheet.

As specified by the browser, HTML elements have certain default styles. Heading elements and containing elements typically span the page, for instance, while links sit in line without breaking up text. There is one default font, and a some spacing added to each element for readability. Anything more than that requires CSS.

If the designer decides to add styles to the document, the browser needs to know which ones get applied first. Cascading refers to the order in which styles are applied to the document.

However, the browser will read them in the order specified to “paint” the layout of the page. Styles specified lower down override those above them. An additional rule of thumb when defining styles for an element is that specificity wins. More specific styles will override less specific. For example, a style applied to (body {..}) is less specific than one applied to (h1 {..}) which is a specific element of the body. The h1 style overrides the body style.

In most cases, it is best to link to a separate style sheet, as a single style sheet is far easier to manage than many inline styles. You can have an unlimited number of documents linking to a single style sheet, which makes editing styles much more efficient as opposed to editing countless HTML documents. It also makes the process much easier for anyone who needs to edit your documents in the future.

Why Is CSS Important?

CSS is one of the most powerful tools in a web designer’s arsenal. With it, you can drastically alter the entire mood and user experience of a website. Some further benefits you’ll find using CSS are:- Freedom to position HTML elements anywhere on a web page, while allowing you to keep your markup (HTML) clean and organized.- Ability to adjust for differences in the way browsers render a web page- Endless customization options to a web page including fonts, colors, borders, hover and transition effects, etc.- Ability to easily create, update and maintain styles simultaneously for a large number of web pages.- Ability to use media queries and relative units (ems and %s) to create web pages which adapt to the user’s screen size.

[Got any more questions about CSS or learning web development? Get the discussion started in the comments below!]

If you’re interested in becoming a developer like Jack, check out our web development course here!