03 July 2019

The Basics of CSS in Web Design

Cascading Style Sheets or CCS for short is one of the most important languages for creating attractive web pages. Knowing the basics of CSS will help you with web design. This post explains all the basics of CSS to ensure that you have an idea about it. There are certain prerequisites to CSS which include HTML basics, basic knowledge of working with files, have basic software installed on your working device and have basic computer literacy.

What is CSS?

CSS is a language that is used for specifying how the documents are presented to users that is the style and lay out of the website. Documents are a text filed which are structured using HTML which is one of the most common markup languages. There are other markup languages as well such as XML or SVG.

The document is presented to users meaning it is converted into a usable form. Browsers like Internet Explorer, Google Chrome and Firefox have been designed to present the documents visually.

How CSS Affects HTML?

CSS rules are applied to documents by web browsers to affect how they are displayed visually. Here is how a CSS rule is formed.

  • A set of properties, which would have the values set for updating the HTML contents that get displayed.
  • A selector, which would select the elements that one wants to apply to the updated property values to.

A set of the CSS rules would be contained within the style sheet and would determine how the webpage is shown. Let’s look at a simple HTML document which contains a <p> and <h1> (the <link) element has been applied to HTML). Here’s a simple CSS example with the two rules.

h1 {

Color: pink;

Background-color: blue;

Border: 2px solid white;

}

p {

Color: blue;

}

 

 

The first rule as you can see starts with the h1 selector. It means that it would apply the property values to the <h1> element. Three properties are contained in it along with their values (each value/ property is referred to as a declaration).

  1. The text color is set to pink by the first one.
  2. The back ground color is set to blue by the second one.
  3. A border around the header would be placed with the third one. It is 2x pixel wide, solid (not dashed or dotted) and is colored white.

Now, the second rule begins with the p selector. It means that the property values would be applied to the <p> element. Only one declaration is contained by it which sets the text color to blue.  You can always try to test a bit of your coding on CSS Desk.

How Does CSS Work?

As the document is displayed by the browser, it needs to combine the document’s content with the style information. The document would be processed in two stages.

  1. CSS and HTML would be converted by the browser into the DOM. The Document Object Model would represent the document in your computer’s memory. The document’s content would be combined with its style.
  2. The contents of the DOM would be displayed by the browser.

What is DOM?

Before getting more into detail, it is important for CSS begins to know more about DOM. It has a tree-like structure. This means that a DOM node would be created in the tree structure by each piece, attribute and element of text in the markup language. Further, the nodes would be defined by their relationship with other DOM nodes. Understanding it will help you design, maintain and debug the CSS as DOM is where CSS and the document’s content would meet.

How to Apply CSS to HTML?

If you want to apply CSS to an HTML document then there are three different ways to do this.

External Style Sheets

An external style sheet is for when the CSS has been written in a separate file with the .CSS extension and it is referenced from the HTML <link> element. The method is useful and you can use the style sheet to style multiply the documents. This would enable you to update the CSS in just one place and all the changes would be made in the documents.

Internal Style Sheet

The internal style sheet is where there isn’t an external CSS file and instead the CSS is placed inside the <style> element which would contain the HTML head. It is useful in some situations such as for content management systems where one can’t actually modify the CSS files directly. However, the fact is that it is not as efficient as external style sheets. For example, in a website, the CSS would have to be repeated across each page and updated in multiple places in case changes are required.

Inline Styles

These are CSS declarations which impact only one element that is contained within the style attribute. It isn’t advised to use this method unless it is important. It is bad for maintenance as you would have to update the same information many times in each document.

Furthermore, it even mixes the presentational CSS information with the structural information of the HTML. It makes is harder to read and understand CSS. Keeping different types of code separate and pure is what actually makes it easier for one to work on the code. Only in a situation where one would be working in a restrictive environment would they have to resort to using the inline style.

Conclusion

CSS is a rather easy language which web designers can easily learn in addition to HTML. There are plenty of resources which can be found to learn the language. There are many benefits of using CSS for web design. The importance of knowing the language is only likely to increase.

The language is simple and you can try practicing the code as soon as you learn some of the elements and attributes. Try out CSS now and see for yourself why it is widely popular.

 

Have a project in mind? Speak to us today and tell us more! We will be glad to collaborate with you.