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 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.
 
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.
 
demo
 
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.
 
demo
 
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.
 
save
 
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.
 
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.
 
id demo
 
To select an element with a specific Id, prefix the Id name with a hash (#).
 
hastag
 
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
 
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.
 
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?
 
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.
 
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.
 
DEMO
 
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.
 
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”.
 
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.
 
DEMO
 
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.
 
DEMO
 
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.