Basics of CSS: Part 1

Introduction to CSS

• Syntax
• Selectors in CSS
• Ways to Insert CSS
• Benefits of using CSS

Before continuing with this series, be sure you have a basic understanding of HTML.

Introduction

CSS is an acronym for Cascading Style Sheets.

We know that HTML is a structured document. So what is CSS?

CSS is a style language used to define the layout of the HTML document.

These documents are created using various elements. Elements like paragraph (<p> </p>) and using CSS we can add styles like font-color, background-color, width, height, and so on to the elements.

Syntax

Every CSS rule consists of a selector that could be an Id, class, element, descendent, and so on, and with every selector, there is a declaration block that contains the property (for example color) and its value (for example Red) separated by a colon and ends with a semi-colon (color: red;).

Selectors

Element Selector

To select elements based on the element name, use an Element Selector.

DEMO

The first step is to create a simple Index.html file and add a paragraph.

To add a paragraph we use <p> </p>. This p is nothing but an element (a tag) and if you want to select an element using its name then the element selector is very useful.

The next step is to add some styles to this paragraph and for that, we can use a style tag. In this style tag, we can create and define a rule, and using that we will change the text color of this paragraph.

To add a style to an HTML file, we use the style tag.

<style> is an opening tag.

</style> is a closing tag.

Inside this tag “type” is an attribute for specifying the type of style we are creating and here the type is text/CSS.

This style tag is a container tag and between the opening and closing tags are the content <style> “content” </style>. In the container, we passed p { your style } where p is an element selector.

In the document, this element selector will look for an element with the name “p” and will change the text color to Red. Save and open the file in a browser.

Now, let's add another paragraph in Index.html.

What will happen if I refresh the page in a browser?

The text color of the second paragraph will also change to Red.

So, if you want to change the layout of all the elements having the same element name as “p” then use an Element Selector.

Id Selector

To select an element from the document using a unique name, use an ID selector.

DEMO

Let's say we don't want the color of the second paragraph to be Red, we want the color to be Green.

For that, the first thing we need to do is to provide the paragraph an ID and for that, we can use an ID attribute of the paragraph element.

To select an element with a specific ID, prefix the ID name with a hash (#).

So, this style rule will look for an element with an ID of “part two” in the HTML document and once it is found, the text color of that element will be changed to Green.

Refresh the page.

Note

You can pass only one ID for each element.

Class Selector

To select an element by its class name, we can use a class selector.

DEMO

In Index.html add another paragraph element. To provide a paragraph a class name we can use the class attribute.

To select an element by its class name we use a period (.) followed by the ClassName in the stylesheet.

Refresh the page.

Now you might be wondering, using an ID selector we can do the same thing. So, is there any advantage to the use of a class selector?

Yes. The purpose of using an ID selector is to uniquely identify an element but we can have more than one element with the same class name and we can also even pass more than one value for the class attribute.

First, let's add another paragraph and pass my class in the class attribute.

So, now we have another paragraph with the same class name.

Refresh the page.

Let's create a new rule in the stylesheet and using that we will change the background color of the last paragraph.

We created a new CSS rule .myBackground that is nothing but a class selector. Using this selector we want to change the background color of the last paragraph. But in the last paragraph, we already have a class attribute with the value “myClass”. So, how can we pass another class value?

Advantage

We can pass more than one class value for a single element and each class value must be separated by a blank space.

Refresh the page.

Using a class selector, we can create a single CSS rule.MyClass{ } and pass it as a value to the class attribute of the elements that we want to format.

Grouping Selector

Let's say there are 7 elements in your HTML file, in other words, h1, h2, h3, h4, h5, h6, and p. Out of which you want the same style layout for h1, h3, h5, and p and for h2, h4 and h6. For that, you can use a Grouping Selector.

DEMO

So, we have added the required elements. Now the next step is to group these elements as we decided and give them a background color of Yellow and Orange.

Refresh the page.

So, if you want to style the elements by dividing them into a group, then use a Grouping Selector.

Universal Selector

To give the entire page a single style format, use a Universal selector. Let's say we want to change all the heading and paragraph text colors from Black to Yellow and want to make the background color of the entire body Red.

To specify a universal selector we use:

*{ Your css }

Refresh the page.

Descendant Selector

To understand this selector let's first look at an example.

Let's say there is a div element within the body of an HTML file in which there is a paragraph “Hello and welcome to CSS Tutorials”. Now let's say the last two words within this paragraph are wrapped between span elements as in the following:

<p>Hello and welcome to<span> CSS Tutorials </span></p>

Now for some reason, we want only the CSS Tutorials color to be changed to Red and the other text to remain as it is. This is where Descendant Selectors are useful.

As we know, this span element is present in the p and the p is present in the div. So, we can say:

div p span{ your CSS }

In the stylesheet create a new rule and pass Red as the value for the color property.

Refresh the page.

So we have seen some of the useful CSS selectors. Now let's learn about the three ways that we can add styles to our HTML elements.

Various ways to insert CSS

There are the following three ways to insert CSS.

• Inline StyleSheet
• Internal StyleSheet
• External StyleSheet

Inline StyleSheet

To use an inline StyleSheet use the style attribute of an element you want to change the layout of. This style attribute can contain any CSS property.

DEMO

In this HTML file, all I have is a paragraph element.

Let's say we want to change the color of this paragraph to Green using an inline stylesheet. To use an inline stylesheet all we need to do is to use an attribute of this paragraph element named “style”.

Style is an attribute, color is the property name and Green is a value for the property color.

Open in a browser.

When to use an Inline StyleSheet

If you want to format one exact specific tag or element then use an inline stylesheet. But most of the time try to avoid an inline style since it may provide more control to a specific element yet it might be difficult to manage if you add multiple styling to an element.

Internal StyleSheet

If you want to add a unique or distinct style to a single document or page then use an internal StyleSheet. An internal stylesheet can be defined in the head section of the document.

To add an internal stylesheet we can use the style tag.

DEMO

Add another paragraph inside the body and provide the paragraph an id.

Now go to the head section and within the opening and closing area of the head section write the following:

Style is the tag to define an internal stylesheet. Type is an attribute of a style element or tag in which we passed text/CSS.

Refresh the page.

External stylesheet

An external StyleSheet is the most widely used way to insert CSS. To create an external stylesheet, we create an external file with an extension of .css.

When to use an external stylesheet

If you want to provide the same or a consistent look for multiple pages then use an external stylesheet. All you need to do is create an external stylesheet and use the link element in the head section of the documents to add a reference or link to the external stylesheet.

DEMO

Add another paragraph element inside the body and provide this paragraph with a class value.

Create a new file and add a new rule.

This .external is nothing but a class selector and using that this CSS file will change the color of the element whose class value matches the class selector.

Save this file with an extension of .css.

To use this external stylesheet in a document, we need to add a link between them and for that, we can use the link tag in the head section.

• rel is an attribute that defines the relationship between the current and the linked document and here the relationship is a stylesheet.
• type is an attribute that defines the type of the linked document.
• href is an attribute in which we pass the address of the document that we want to link.

Since the style.css is located in the same folder as that of the document to which we are linking. So, all we need to do is pass the name of the stylesheet file.

Refresh the page.

Advantages of using CSS

• Easy to maintain.
• It provides a consistent look.
• It provides more formatting options.
• Lightweight.

The next article explains some of the useful properties of CSS. Until then keep learning.

Thank you.