A Quick Introduction to CSS for Beginners

CSS, or Cascading Style Sheets, is a styling language used to enhance the visual presentation of HTML documents. It allows you to control the layout, colors, and typography of your website.

Since we’re writing this keeping beginners in our minds, we’ll take a real-life analogy to explain exactly how the front end of a webpage is formed and what role CSS has to play.

Front-end components of a webpage

HTML, CSS, and JavaScript can be thought of as different parts of building a house.

• HTML can be thought of as the blueprint or the structure of the house. Just like how blueprints show where the rooms, walls, and doors are placed, HTML shows the structure of a web page and where different elements such as headings, paragraphs, images, and links are placed.
• CSS is like the interior and exterior design of the house. It defines the visual presentation of a web page, such as the colors, fonts, and layout, just like how the interior and exterior design of a house defines how it looks.
• JavaScript is like the electrical and plumbing systems of the house. It adds interactivity and dynamic behavior to a web page, just like how electrical and plumbing systems bring a house to life. It allows for things like form validation, animations, and interactive elements such as drop-down menus and slideshows.

Just like how a house cannot be complete without all these components working together, a webpage also cannot be complete without all three languages working together in harmony.

Now, we’ve already covered the basics of HTML in our previous article. In this tutorial, we will cover the basics of CSS and how it can be used to create beautiful and functional websites. If you're new to web development and are looking to learn the foundation of CSS, this tutorial is for you. Let's get started!

Masai’s curriculum engineer, Saurav Das has created this 15-minute video tutorial for you to learn the basics of HTML. Watch the video here:

Or you can read along.

A brief history of CSS

CSS was first proposed in 1994 by Håkon Wium Lie, a researcher at CERN (the European Organization for Nuclear Research). At the time, web pages were created using HTML, which was primarily used to define the structure of the content on the page. However, as the web began to evolve and become more visually complex, it became clear that a separate language was needed to control the presentation of web pages.

CSS was first officially released as a W3C recommendation in 1996, and it quickly gained widespread adoption among web developers. The initial version of CSS (CSS1) included basic styling capabilities such as text formatting and layout control. In the years following, CSS2 was released in 1998, which added new features such as media-specific styles and support for aural styles.

CSS3, the current version of the language, was released in 1999, and it has been under development ever since. It introduced many new features such as animations, transforms, and responsive design. Today, CSS is an essential part of web development, and it is used to create visually stunning and responsive websites.

CSS has also evolved to support new features like flex-box, Grid, and CSS variables to simplify the development and maintainability of web pages.

How does CSS work?

CSS works in conjunction with HTML to create the visual presentation of a web page. When a web browser requests a web page, it receives both the HTML and CSS code. The browser then uses HTML to create the structure of the page and CSS to apply the visual styling.

CSS uses a series of rules, called selectors, to target specific HTML elements on a page and apply styles to them. Each rule consists of a selector and one or more declarations. The selector identifies the HTML elements that the rule applies to, and the declarations specify the styles to be applied.

For example, the following CSS rule targets all <h1> elements on the page and changes their color to blue:

h1 {
color: blue;
}

CSS also supports cascading and inheritance, which allows for a hierarchical approach to styling. Styles defined in a parent element will be inherited by its child elements unless they are overridden. This allows for a consistent and organized styling of the web page.

CSS also allows for the use of media queries, which allows for different styles to be applied based on the size of the browser window or the device being used. This allows for responsive design, which ensures that a web page looks good on any device, whether it's a desktop computer, a tablet, or a smartphone.

In summary, CSS allows web developers to separate the visual presentation of a web page from its structure and content, making the styling process more efficient and easier to maintain.

Let’s look at a few important styles we can add to an HTML webpage using CSS:

Giving color to the text

There are several ways to give color to text using CSS. The most common way is to use the 'color' property. It sets the color of text for an element. You can set the color value in various formats such as RGB, HEX, HSL, and even named colors.

You can apply the color property to any HTML element using a CSS class or id, or by applying it directly to the element. For example:

Another way to set text color is by using the background-color property. This property sets the background color of an element, and it can be used to change the color of the text background. For example:

As you can see, an aqua color background has been added to the selected text.

In summary, to give color to text in CSS, you can use the color property, which allows you to set the color of text for an element.

Text Alignment

The most commonly used properties for text alignment are ‘text-align’ and ‘vertical-align’.

The 'text-align' property is used to align text horizontally within an element. You can set the text alignment to left, right, center, or justify. Here’s an example-

As you can see, the text has been placed in the center horizontally.

Similarly, the vertical-align property is used to align text vertically within an element. You can set the vertical alignment to the top, middle, bottom, or a specific length value.

Just as it was in the case of adding colors, you can apply the text-align and vertical-align properties to any HTML element using a CSS class or id, or by applying it directly to the element.

Declaring the font size

To declare the font size using CSS, you can use the font-size property, which allows you to set the font size value in various units such as pixels (px), points (pt), ems (em), or percentages (%). The ‘em’ unit is relative to the font size of the parent element, while the % unit is relative to the font size of the element itself.

The pixel and point units are fixed and the size will be the same across all devices and screen resolutions. Here’s an example:

You can apply the font-size property to any HTML element using a CSS class or id, or by applying it directly to the element.

Wrap-Up

This was a basic tutorial on CSS where we covered how to declare the color, text alignment, and font size of an HTML element. Of course, it’s not all and is still a minuscule part of web development. The idea was to give you a mental mapping of how webpages are formed from scratch using HTML and CSS.

If you’re serious about pursuing a career in web development, hear us out here.

We offer full-time and part-time courses in full-stack web development with live instructor-led classes, problem-solving, DSA, multiple assignments, and capstone projects to set you up for a successful career in software development.

The catch?

You don’t pay anything for the course until and unless you get placed for a minimum CTC of INR 5 LPA. Yes, we’re serious by all means.

Head over to our website to know everything about it. Cheers!