CSS (Cascading stylesheets) has grown to be accepted as one of the standards of web designing.
Before now, we have been working with HTML. From what we have learned so far, we should have understood that all the elements and their respective attributes will help us build a fantastic website.
Yes! We can build a fantastic website with all the links, hyperlinks and navigation menu included. In fact, our site can have interaction with users through the inclusion of audio, video and form objects in the form.
In all this, what we have done is to present the content of our site in a simple text-rich format without aesthetics, without any content presentation format. If you look at your already completed webpage, it should look very much like this:
The site will have no beauty, and of course, no designed outlook.
How do we resolve this problem? How do we add beauty and structure to our website?
It is simple. We can add beauty and design by adding a stylesheet to our HTML code.
With HTML, we can form the building block and structure of a website, but the site presentation and outlook appearance are the work of CSS. Both go hand in hand.
What is CSS Cascading Stylesheets?
CSS means cascading Stylesheets. It rose to popularity in late 1996, as a means of separating website structure from its presentation. Stylesheets are site presentation and layout files or codes. They take care of the overall look and beauty of a website, including the colors, fonts, and the layout.
From your working knowledge of HTML elements, you should understand that each time you want to style an element; you will add the style attribute. Each style attribute is followed by its properties and values. You will keep repeating it over and over again, for example: take a look at the following code:
See the Pen Styling HTML1 by KmacIMS (@kmacims) on CodePen.
In the above code, style was added to the first <p> and <span> elements only. The result is shown in the codepen image above.
Supposed that I want to style all the <p> and <span> elements in the website in the same way, what should I do?
I will have to copy the styles to all the <p> and <span> elements throughout the site.
Will doing this have any implications?
Of course, it will make the HTML file larger. Also, imagine the stress and time consumption of repeating the same thing over and over again. Finally, it will make managing code difficult.
Take for instance; if I want all the paragraph font size to become size 14. Then, I will go through all the <p> elements to change the font size to 14.
This is the solution CSS brought to web designing.
Therefore, CSS defines web presentation technology. Cascading stylesheets is defined and maintained by the W3C (World Wide Web Consortium).
Applying CSS to Webpages
There are three (3) basic ways of applying CSS to a website. They include the inline method, the embedded method, and the external method.
- The inline method: This is the method we used in the example above. It uses the style attribute to apply CSS properties and values in an HTML element. It is usually applied at the start tag of an HTML element. Although it is simple to use, it is not advisable, because it is inefficient. This is because it requires you to apply CSS to each of the HTML elements. However, you can use it to apply unique CSS to an HTML element, because it takes precedence over other methods.
For example: See code example above. The HTML code is as follow:
<p style="text-align: justify; color: darkgreen; font-size: 20px; font-family: sans-serif;"> It is not a new thing that politics in <span style="color: orange; font-style: italic; background-color: silver;">Nigeria</span> is for the risk takers. This tells why people could leave their current jobs and business to pursue politics. </p>
- Internal or embedded method: This method requires that a CSS be defined in the <head> section of a webpage using the <style> Internal CSS is used to define the design and appearance of a single page in a website. That is, it is applied on a page level basis. This means that you can define CSS for different pages of the same website using the inline method.
This method is more efficient than the inline method when you want to apply similar style to the same elements on the page. It also allows you to use the id and class global attributes to style different elements on the same page. However, it becomes inefficient when you want to reproduce similar styling on other pages of the website. In this case, the external method will be preferred. An example is shown below.
See the Pen Embedded CSS by KmacIMS (@kmacims) on CodePen.
- The external or linking method: This method is used to define styling for the entire website. It is more efficient on a large website. It is a method whereby styling is defined and saved in a separate text file using the .css file extension. The saved CSS file will then be linked to the pages of the website in the <head> section using the <link> This method is more efficient because it enhances code maintenance. Any change made to the CSS file will dynamically reflect on the website. It also uses the id and class attributes to style elements with the same id or class attributes.
Example: In this example, styling is defined in a text file named main.css and linked to the html below:
See the Pen Linked CSS by KmacIMS (@kmacims) on CodePen.
The css code for the html is given in the CSS tab in the above codepen image.
Therefore, whichever method you choose to use, understand the rules and implication of using such method.
Cascading and Inheritance
CSS is called Cascading Stylesheets. How do elements inherit a style and how do we make some styles more specific to a particular element? To understand this, let’s take note of the following: importance, specificity and source order.
Source order: Let’s begin with the source order: When writing a CSS code, it is important that we clearly understand the fact that CSS rules that come later in the stylesheet will override those that come earlier. For example, if we have the following CSS in a stylesheet in the order:
u ~ span{font-size: 1.5em; color: blue; font-style: italic;}
article, div {padding: 5px; margin-bottom: 10px; border-right: 3px solid purple}
u ~ span{font-size: 3em; color: red; font-style: bold;}
The line 3 above will override the line 1 above because of the source order.
See the Pen Source order Example by KmacIMS (@kmacims) on CodePen.
Specificity: In our previous section, we made mention that inline method of application of CSS rules overrides the other two methods. This is what we mean by specificity. How do we make a style more specific, or make one style override others without using an inline method?
The following rules exist:
- Elements have lower specificity than ids and classes in CSS ruleset. They have a score of ones.
- Classes have higher specificity than elements but lower specificity than ids in a CSS ruleset. They have a score of tens.
- Ids have a higher specificity than classes and elements in a CSS ruleset, but lower specificity than inline styles. This is because ids are unique in an HTML page. One id target one element in a page. They have a score of hundreds while inline styles have a score of thousands.
This implies that when different styles are applied to the same element using any of the above selectors, the one with a higher specificity will apply.
For example;
See the Pen Specificity Example by KmacIMS (@kmacims) on CodePen.
Notice that #tests color of red dominated the paragraph while the .test font-size overtook that of the p.
Importance: The importance is used to override any other CSS ruleset anywhere in the stylesheet by using !important in the declaration. Though it is highly recommended that we should not use the !important in our code for ease of debugging, yet, when you want to ensure that a style is applied, you can use it anywhere.
For example, in the above code, we can rewrite it as follow to ensure that the text-align of justify is applied.
p{text-align: justify !important; font-size: 2em; color: blue; margin-left: 20px;}
.test{text-align: center; color: green; font-size: 1em;}
#tests{color: red; padding-left: 30px;}
Inheritance: Inheritance is an important attribute of cascading stylesheets. It refers to children inheriting the style of their parent. This is important when working in a large site. For example:
See the Pen Inheritance Example by KmacIMS (@kmacims) on CodePen.
