CSS FOR BEGINNERS

CSS FOR BEGINNERS

CSS (Cascading Style Sheet) is basically used to provide look and feel to your web page. With the use of CSS you can provide customized fonts, font-sizes, colour, images, border and shading any many more features which you can provide to web page through the use of CSS.


Take a look a page with and without CSS Style.

How to use CSS

You can use CSS directly into your web page or you can create a CSS style file (.css) and link to your multiple web pages. You can prefer any of them as per your need. 
  • Write style directly into web page
  • Create a separate  CSS Style sheet file 


Let’s take a look how to use these two ways to implement CSS into web pages.

Now we are using first approach to use CSS. You can directly define you styles using <style> tag. Write your CSS classes into style tag and apply CSS to different component which you use into your web page. Write style tag into head section this is preferred way to write style into your web page


<head>
<style>
                Write css classes here....
</style>

</head>

How to write CSS Classes

.css-class-name 
{
      Here we define style for particular css class...
}

like we write :

.body-style
{
                Here we define style for particular css class...
}

Here i am showing some text related style like font, size, style text and background colours  for body section

.body-style
{
   background: orange;  
   text-align: center;   
   font-family: Arial;   
   font-style: Italic;
   color: blue;   
   font-size: 25px;
}

For using CSS within Page 

<html>
<head>
<title> First CSS Pagee </title>
<style>
.body-style
{
background: orange;   
text-align: center;    
font-family: Arial;    
font-style: Italic;
color: blue;    
font-size: 25px;
}
</style>
<body class="body-style">
Hey.... It's my first CSS Page
<br>
I'm Going to Design my web with my style ...
</body>
</html>

For using CSS with .CSS file 

HTML Page Code : 
<html>
<head>
<title> First CSS Pagee </title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body class="body-style">
Hey.... It's my first CSS Page
<br>
I'm Going to Design my web with my style ...
</body>
</html>

CSS File Code : 
.body-style
{    
background: orange;   
text-align: center;    
font-family: Arial;    
font-style: Italic;
color: blue;    
font-size: 25px;
}

For Create .CSS file just go to notepad and write code and save file as with .CSS extension
like we use style.css


0 comments:

Be our Fan