Basics of CSS: Part 1

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.