What You Need to Know about Cascading Style Sheets (CSS)

What You Need to Know about Cascading Style Sheets (CSS)

Have you ever wondered how a website page can contain so many elements with different colors and fonts in each part? Those attractive features are made possible by CSS or Cascading Style Sheets. CSS is a basic design language that is relatively simple to learn and comprehend, but it gives you a lot of power over how an HTML document appears. If you are new to web development, here is what you need to know about CSS.

Why CSS?

In designing a webpage, there needs to be a foundation or the most basic structure. In this case, it is HTML. When the HTML is employed, the appearance will be very plain because HTML was never meant to contain tags for styling a web page, but is used to describe the content of a web page. This is why CSS is needed; it is a styling sheet that is used to ‘design’ the overall appearance of the HTML beneath. As an analogy, if HTML is the skeleton of a person, CSS is the flesh and clothing to make someone presentable. Without HTML, there is no firm structure, but without CSS, the appearance of a web is not going to be user-friendly at all.

Now, take a look at this:

Without CSS, the coding appearance will look like the above illustration.

When elements like <font> and color attributes were added to the HTML 3.2 standard like the one above, it caused problems for web developers. The development of massive websites, where fonts and color were added to each and every page, became a time-consuming and costly procedure. This is where CSS comes to the rescue. CSS stripped the style formatting from the HTML page that controls a web page’s appearance. It allows you to change the color of the text, the font style, the spacing between paragraphs, how columns are scaled and laid out, what background pictures or colors are used, layout designs, display different versions for different devices and screen sizes, and a range of other features. 

There is a reason why this page you are accessing right now has a specific blue color, particular font style and size; CSS. The above is what CSS looks like when implemented in a web page. 

Syntax of CSS

CSS is a rule-based language, which means that you construct rules that specify groups of styles that should be used for certain components or groups of elements on your website. The syntax looks like this: 

So, what does it mean?

The selector identifies the HTML element to be styled. The declaration block can contain more than one declaration and are separated by a semicolon (;). Each declaration has a colon-separated list of CSS property names and values. If a semicolon is used to separate several CSS declarations, curly braces ({) are used to enclose declaration blocks.

Read Also: Commonly Used Visual Studio (VS) Code Extensions for JavaScript Developers

How to Insert CSS

When a browser reads a style sheet, the HTML document is written according to the information in the style sheet. There are three ways to add CSS to an HTML page that you may typically find: external CSS, internal CSS, and inline CSS. Here is how to insert each type of CSS.

1 . External CSS

If your web page contains plenty of styles and functions, you can use external CSS. This will save you significant load time to your web since the HTML is separated from the external CSS file. You may modify the look of a complete website with an external CSS by changing only one file. Create a file called styles.css in the same folder as your HTML text. There should be no HTML tags inside the external.css file. External styles are defined within the <link> element, inside the <head> section of an HTML page.

Take a look at this example:

2 . Internal CSS

If your page is relatively simple with little to no complex function, such as displaying the description of a company profile, you can utilize internal CSS. If a single HTML page has a distinctive style, such as limiting to a single color and font, an internal style sheet may be often used. Internal styles are defined within the <style> element of an HTML page, which is located within the <head> section.

3 . Inline CSS

Style rules can be applied to individual HTML elements using inline CSS. Inlining CSS involves embedding CSS into an HTML file rather than using external CSS. Inline styles are defined within the “style” attribute of the relevant element: 

As inline CSS provides the application of a unique style to a single HTML element, its use is limited yet useful for developing different properties.  Inline CSS is important as it reduces the amount of files that the browser must load before it can show the web page. The browser initially loads an HTML file before downloading the CSS file when using external CSS. With inline CSS, you just need to download one HTML file instead of two, which speeds up the process.

This is the very first look into CSS and there is so much more you can explore with CSS. If you want a more comprehensive understanding of CSS, you can click here. But if you want to skip the technical IT stuff and focus on other parts of your business development, you can rely on us for your company’s IT needs! Kindly contact us here and let us be of help.

Read Also: Useful Github Repositories for JavaScript Learners

image source: iconstout