Tutorial Basic Tutorial To Understand Css

Swati Mishra

Content Writer
CSS are very important topic of html (hyper text markup language).

CSS stands for Cascading style sheets. CSS are used for style and colors; we can change the color and style. We can use the various types of style these are describing below.


  • Inline style: We are using Style attribute in html element, in this we are change the color which we want add color.

Example will describe how to change the color by using Inline style.

Code:
Heading in red color

  • Internal style: In Internal style we will define a style for one html page. <style> element is defined in between the <head> section.

By example we will describe the internal style in the html page:


Code:
<html>
<head>
<style>
body {background-color: pink;}
h1   {color:black;}
p	{color: red;}
</style>
</head>
<body>
 
<h1> heading is black</h1>
<p> paragraph is red.</p>
 
</body>
</html>


In above example we have change the colour of background, colour of heading, and the colour of paragraph.

  • External style: External style is used for change the color of number of pages in html. We can change the look of whole webpage through external style sheet.


We will discuss the external style in the example:

Code:
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 
<h1> heading is here</h1>
<p> paragraph is here.</p>
 
</body>
</html>

In above example we add a link in the <head> section of the html page.
We can write an external style sheet in any text editor. Html tag is not shall in the file. And important thing is that the style sheet file is compulsory to save with a .css extension.
Example with the .css extension is describing:


Code:
body {
	background-color: pink;
}
 
h1 {
	color: black;
}
 
p {
	color: red;
}

CSS fonts:

The Css colour is used to change the text colour for the html element. The Css font-family is used to change the font for the html element. The css font-size property is used to define the size of text for the html element
Example for the define CSS font is described below:


Code:
<html>
<head>
<style>
h1 {
	color: red;
	font-family: Times new roman;
	font-size: 400%;
}
p  {
	color: green;
	font-family: calibri(body);
	font-size: 120%;
}
</style>
</head>
<body>
 
<h1> Heading is here</h1>
<p> Paragraph is here .</p>
 
</body>
</html>

In above example we have described the css font for heading and paragraph in <style>body.


Css box model:



For creating the visible border around the html element we use the border property, every html element has invisible box around it.
Example of border property:

Code:
p {
	border: 2px solid black;
}
For creating a space inside the border we use the CSS Padding property.
Example for padding property describe below:

Code:
p {
	border: 2px solid black;
	padding: 20px;
}

For creating a space outside the border we use the CSS margin property.

Example of css margin property describe below:

Code:
p {
	border: 2px solid black;
	padding: 20px;
	margin: 40px;
}


The ID attributes:


For creating a special style for special element, we have to add an id attribute to the element.
Code:
<p id="p01">different style </p>
Then after define the style element.

Example is described below:

Code:
p#p01 {
	color: red;
}
The classes attribute:
For define style the special style for special class we define the class attribute.

Code:
<p class="error"> different class</p>
Then we define the all element with special class style example describe below:
Code:
p.error {
	color: blue;
}
 

steve taylor

White Belt
Nice Tutorial. I have Learned HTML(Hyper text markup language) and CSS (Cascading Style Sheet ) concept but I have lack of practice so I not able to use the concepts in the real time project very efficiently . So I am revising those concepts again with practical approach . This tutorial help me to clear some concept .
 
Top