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: