# CSS Basics: Transforming Web Pages with Style and Elegance

Imagine a website as a house, where HTML represents the structure –walls, doors, and rooms. Now, think of Cascading Style Sheet(CSS) as the interior design and styling of that house. It's the color palette, the furniture arrangement, and the overall aesthetic appeal that turn a house into a welcoming and visually pleasing home.

Just like a well-designed interior to a house, CSS plays a pivotal role in shaping the user experience on a website. It determines the layout, colors, fonts, and overall visual presentation. CSS makes the digital space not only functional but also attractive and engaging.

This article discusses CSS and tells its history. It explains how CSS works and ways of adding styles to an HTML files. By the end of this article, you will understand CSS properties and how to control every inch of your webpages.

Without further ado, let's get started.

Cascading Style Sheet: An Intimate Glance

CSS stands for Cascading Style Sheet. Yeah!, a Cascade means a waterfall and that's how CSS works. Style Sheet is a language that allows you to specify how things should look like on your website. It allows you to choose the color, shape, font and so on for elements on your website.

Cascading style sheet is a style sheet language used for defining the styles of documents written in markup language. Example of markup languages are HTML and XML.

Styles are the descriptions of how contents should look like on the webpage. It tells the browser how the content be rendered in terms of font-size, color, spacing, positioning, responsiveness and so on.

CSS uses selectors to target HTML elements and declarations to define the styles for the selected element. CSS enables a cleaner and more maintainable code structure by separating the style information from the HTML markup. This separation makes it easier to update the visual aspects of a website without modifying the underlying content.

What Brought About CSS? : A Short History

In the early days of world wide web (1990s), the web primarily consisted of text-based documents without much emphasis on styling. Design elements were embedded within HTML tags, leading to a lack of separation between structure and presentation.

As the web grew, the demand for more sophisticated and visually appealing webpages increased. At this point, it became glaringly clear that HTML structure-focus design wasn't enough. There was a need for a separate language to handle the presentation layer.

Hakon Wium lie and Bert Bos introduced the first concept of CSS in 1994. They proposed a separate style sheet language to complement HTML. The first CSS draft was published in October 1994. Subsequent versions were released, leading to the development of CSS level1. CSS level1 became a W3C recommendation in December 1996.

With the addition of new features, CSS continues to evolve. It gained acceptance among web developers and browser vendors, contributing to its widespread adoption.

Today, CSS is a crucial part of web development. It enables developers to create visually appealing and responsive websites. The latest version -CSS3*- came with latest advancements and new features. These features include; flexbox and grid for layout, CSS variables, and numerous improvements for handling animations and transitions.

How Does CSS work? : A Look Behind the Scenes

CSS operates by selecting HTML elements on a webpage using selectors. Then, it applies styles to the selected elements using declaration.

Selectors are patterns used to select and style HTML elements on a webpage. Selectors include tag name, classes, attribute, IDs e.t.c. Declaration consist of properties and values. It is used to define a style for a selected HTML element. A property is the aspect of the element's style that you want to define. It could be attributes such as color, font-size, margin, padding and so on. Properties are written on the left side of the declaration. Value is the specific setting you want to apply to a property. It could be a numerical value, color, font-family or any other valid value for that property. Values are written on the right side of the declaration.

Syntax

The property and value are separated by a colon : , and each declaration is terminated with a semicolon ;. A CSS rule is formed by combining two or more declarations within a set of curly braces {}

p {
   color:blue;
   font-size:16px
   margin-top:10px
}

The CSS code above selects a paragraph p on a webpage. Then, it defines a property of the paragraph called color and gives it a value of blue. So, the first declaration set the text-color of the selected paragraph to blue. The two other declarations works in a similar way.

When the selected paragraph is rendered on the website, it's color will be blue. It's font-size and its top margin will be 16px and 10px respectively.

Adding Styles to Your Webpage : Inline, Internal and External Styling

There are basically three ways of adding style to the HTML elements on the webpage. They are:

Inline Styling

This is a method of styling , where the CSS style goes into the same line with the HTML element. Inline styling is done by introducing a style attribute into the opening tag of the HTML element. Then, you can specify the property and the value you want it to take. Take the code example below for example.

<h1 style="background-color: green">The White Wizard</h1>

When the h1 element above is rendered on the website, the color of its background will be green. Inline Style is suitable for styling a single element.

Internal Styling

Here, the styles go into the same page with the HTML code. It is done by introducing the <style> element inside the head section of the HTML boilerplate. All the CSS code goes into the <style> element. In there, you indicate the selector(s) and put their respective rule(s) inside a pair of curly braces in front of each of them.

The code above selects the h2 element and styles its background-color in red. Internal styling is used for styling a single webpage or a single HTML document.

External Styling

This is a type of CSS styling where the CSS code is contained in a separate file. The file name must end with the .css extension, example yourfilename.css. The file is linked to the HTML file by the introduction of the <link> element into the <head> section of the boilerplate.

In the link element, the rel attribute is set to "stylesheet". Then, the file path to the external CSS file is set as a value to the href attribute.

External styling is the most prominent way of adding CSS to a webpage. It is used for styling multipage websites.

CSS Properties : Controlling Every Inch of your Webpage.

CSS properties control the visual presentation of a webpage by specifying how elements should appear. With CSS, we can control the following properties to suite our like and preference:

• Color property : This consist of the color and background-color. The color property controls the color of texts, while the background-color controls the background color of texts, webpages, elements e.t.c.

p {
color: white;
background-color: green;
}

MDN docs provides you with all the available colors and their names. You can also go to colorhunt.co to get unique color pallets or even mix colors in the proportion you want.

• Typography: This has to do with the appearance of texts. It comprises of five basic properties which are:

1. Font-Weight : Font-weight has to do with the thickness of the letters. It can be set to normal, bold or indicated using numbers between 100-900 inclusive.

2. Font-Size : Font-size determines how big or small the texts will be. It can be set using pixel, point, em or rem e.g (2px, 3pt, 2em, 4rem).

3. Font-Family : This determines generally what the text would look like. It is made up of a Font-name, Generic-name. Example Helvetical, Sans-serif. Fonts.google.com provides you with unique custom fonts.

4. Text-Align : This property can be used to set texts to a particular position, e.g right, left and center. It also has values like start and end which allow to make your texts start from either the right or the left. These values are useful when writing right-hand languages like Arabic.

5. Text-Transform: This property is used to set texts to either uppercase or lowercase.

Harmony in Style: Wrapping Up the CSS Symphony

Cascading Style Sheet was introduced in 1994 by Hakon Wium-lee and Bert Bos as a complement to HTML. Their aim was to cater for the increasing demand for more sophisticated and visually appealing webpages. The acceptance of CSS by web developers and browser vendors leads to its widespread adoption.

CSS is a style sheet language, used to define the style of documents written in markup language. CSS works by selecting HTML elements using selectors and applying styles to the selected elements using declaration. Addition of style to an element can be done through Inline, Internal or External styling.

CSS is an essential component of web development, it works in conjunction with HTML and JavaScript to create visually appealing and user-friendly functioning website. CSS continues to evolve with new features and specifications being added to enhance its capabilities.

Your journey to becoming a CSS maestro begins now 🤞.