Disclaimer: TubeMint is fully funded by its readers, we recommend hightly rated affiliate products and services and when you buy them through our links, we get commission at no extra cost to you. Thanks for you support!

Introduction to CSS

In this post I am going to show you basic styling code on an HTML page which is very easy to use or learn. With codes and visual images that will help you understand CSS codes. What is syntax, selector and also show how to add a style-sheet in HTML file and how many ways to use style code.

Let’s dive in…

CSS stands for Cascading Style Sheets.

CSS tells how HTML  elements are to be displayed on screen, paper, or other media.

CSS helps to simplify the work,it saves a lot of work, it can control the layout of multiple web pages at all once.

CSS SYNTAX

Syntax means the set of rules that determines the arrangement of words in a sentence.

A CSS syntax rule composed of a selector and a declaration block

Multiple declarations can be included in a selector separated by semicolon.

Declaration block must be surrounded by curly braces.

CSS Syntax

Example:

p {
	color: white;
	text-align: center;
}

In this example all p elements will be center-aligned, with a white text color

p is the selector in CSS (it points to the HTML element which you want to style p element).

color is a property, and white is the property value
text-align is a property, and center is the property value

CSS Selector

CSS selectors are used to “find” (or select) the HTML elements that you want to style.

Simple Selects

The element selector selects HTML elements based on the element name, id and class.

Selects HTML elements based on the element name

Name Selector

p {
	font-family: serif;
	
	color: white;
	background-color: gray;
}

Here, all p elements on the HTML page will be font- family “serif” with white text color and background color will also be gray.

Id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page so the id selector is used to select one unique element.

When you select an element with a specific id so first write a hash character (#), then write the id of the element

The CSS rule given below will be applied on the  HTML element with id=”para1″

#para1 {
	background-color: tomato;
	text-align: center;
}

Class Selector

The class selector selects HTML elements with a specific class attribute.

when you select an element with a specific class so first write full stop or period (.) then write class name of the element.

In this example HTML elements with class=”main__para” will be red and center-aligned

.main__para {
	color: red;
	text-align: center;
}

You can also specify that only specific HTML elements should be affected by a class.

In this example only <p> elements with class=”main__para2″ will be center-aligned

p.main__para2 {
	text-align: center;
}

HTML elements can be given more than one class separated by white-space.

<p class="main__para  main__para2">This paragraph refers to two classes separated by whitespace.</p>

Universal Selector

Universal selectors are used to select all elements in the HTML page. These selectors are denoted by an asterisk (*) character.

The CSS rules below will affect every HTML element of the page.

* {
	margin: 0px;
	padding: 4px;
	font-family: cursive;
}

Grouping Selector

Group selectors ( Multiple selector ) are used when you have to give the same type of style to the selected selector.

To minimize code, put multiple selectors in a group.

Look in the below code the h1, h2, p and pre elements  have the same style code

h1, h2, p, pre {
	margin: 20px;
	padding: 10px;
	background-color: #587;
	display: inline-block;
	border-radius: 8px;
}
HOW TO ADD CSS ON HTML PAGE

When a browser reads a style sheet, it will format the HTML document according to the information  within the style sheet.

We can insert CSS in three ways-

  1. External CSS
  2. Internal CSS
  3. Inline CSS
1. External CSS

external styles are defined within the link element, inside the head section of an HTML page.

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet"  href="mystyle.css">
</head>

I am showing you what I have styled in the style sheet.

* {
	margin: 0px;
}
body {
	font-family: sans-serif;
	font-size: 18px;
	color: white;
	background-color: #125;
}
h1, h2, h3, h4, h5, h6 {
                         margin: 10px;
}                               

An external style sheet can be written in any text editor, and it must be saved with a .css extension.

You can change the look of the entire website by adding just one style sheet  or .css file.

The external .css file should not contain any HTML tags.

2. Internal CSS

If one  single HTML page has a unique style  then the internal style sheet can be used.

Internal CSS are defined in the head section of the HTML page inside the elements of the style tag.

<head>	
  <style> 
    body {
     font-family: sans-serif;
     font-size: 18px;
     background-color: blue;
     color: white;     
    }
    h1, p {
      margin: 10px;
      background-color: #234;      
      padding: 6px;
    }

  </style>
</head>
3. Inline CSS

An inline style may be used to apply the unique style for any single element.

<h1 style="color: white; background-color: gray; ">Heading First</h1>	

<body style="font-family: sans-serif; background-color: blue;">
<main style="width: 70%">

Now, I’m showing you some styled pages using CSS codes on the HTML page. Using the Class selector with class attribute.

EXAMPLE:-
body{
	font-family: sans-serif;
     	font-size: 18px;
        
       	background-color: #345;
   		}
		h1, h2, h3 {
     	border: 2px solid #890;
     	border-radius: 13px;
     	background-color: #e45;        
     	padding: 9px;
	    }
	    .h1_1, .h1_2, .h1_3 {
	    	    display: flex; 
	    }

The code above must look like this in your browser.

Using CSS codes design HTML pages

Example:-

.h1_0 {
	    	background-color: #987;
	    	display: inline-block;
	    	border: 2px solid #987;
                border: ridge;            
	    	border-radius: 13px;
	    	padding: 9px;
	    	margin: 20px;
	    }

And the above code must look like this in your browser:

Use CSS code create elements around border
  .side {
        background-color: #014;
        padding: 4px;
        width: 25%;
        margin: 3px;
        border-radius: 9px;
     }

Example:-

Create border using CSS codes


Leave a Reply