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.


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 a 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.
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;).


Element Selector
To select elements based on the element name, use an Element Selector.
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 their 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 the 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.
add new para

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

The text color of the second paragraph will also change to Red.
two para
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.
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.
id demo
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 “paraTwo” in the HTML document and once it is found, the text color of that element will be changed to Green.
Refresh the page.
refresh tag
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.
In Index.html add another paragraph element. To provide a paragraph a class name we can use the class attribute.
class selector
To select an element by its class name we use a period (.) followed by the ClassName in the stylesheet.
class style sheet
Refresh the page.
class refresh
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 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 myClass in the class attribute.
pass selector
So, now we have another paragraph with the same class name.
Refresh the page.
four para
Let's create a new rule in the stylesheet and using that we will change the background color of the last paragraph.
new file
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 a value “myClass”. So, how can we pass another class value?
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.
output blacked
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.
grouping selector
So, we have added the required elements. Now the next step is group these elements as we decided and give them a background color of Yellow and Orange.
Refresh the page.
para color
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 

style backgroung
Refresh the page.
bg red output
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>
welcome css
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.
style sheet multiple
Refresh the page.
css tutorial
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.
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”.
para style sheet
Style is an attribute, color is the property name and Green is a value for the property color.
Open in a browser.
inline total green
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.
Add another paragraph inside the body and provide the paragraph an id.
internal green style
Now go to the head section and within the opening and closing area of the head section write the following:
hash tag internal
Style is the tag to define an internal stylesheet. Type is an attribute of style element or tag in which we passed text/css.
Refresh the page.
inline and internal style
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.
Add another paragraph element inside the body and provide this paragraph a class value.
external marked red
Create a new file and add a new rule.
create new
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.
save 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.
external with demo
  • rel is an attribute that defines the relationship between the current and the linked document and here the relationship is 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.