CSS Introduction

What is css?

CSS is the language we use to style an HTML document. CSS stands for Cascading Style Sheets. CSS describes how HTML elements should be displayed.

CSS handles the look and feel part of a web page.

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

The style definitions are normally saved in external .css files.

Program

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgray;
}

h1 {
  color: white;
  text-align: center;
 font-size:80px;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Style</h1>
<p>This is my first paragraph with css</p>

</body>
</html>

Try in editor

Style Attribute

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Setting the style of an HTML element, can be done with the style attribute.

Syntax

example:
<h1 style="color:blue;"> Hello World </h1>

Program

<!DOCTYPE html>
<html>
<body style="background-color:pink;">

<h1 style="font-size:80px;">Hello World</h1>
<p>This is my first paragraph.</p>

</body>
</html>

Try in editor

How to write css using style tag?

Syntax

example:
<style> h1{ background color: gray; color:white; } </style>

Program

<!DOCTYPE html>
<html>
   <head>
       <style>
          body{
       background-color:pink;
}
h1{
font-size:80px;
}
      </style>
   </head>
<body >

<h1>Hello World</h1>
<p>This is my first paragraph.</p>

</body>
</html>

Try in editor

How to create .css file?

Create a file and save with .css extension.

Write css code in this file.

Do not write <style> tag in .css file.

Syntax

fileName.css

How to use .css file?

Syntax

example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >

Program

<!DOCTYPE html>
<html>
   <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
   </head>
<body >

<h1> <i class="fa fa-facebook"> </i> <i class="fa fa-twitter"> </i></h1>

</body>
</html>

Try in editor

About Us

Comsysapp.com is an educational website. Students and software developers can learn programming language tutorials. Comsysapp is very useful for beginners and professional developers. Comsysapp provides tutorial in easy language. Comsysapp.com has focus on simplicity.

Services

Comsysapp.com provides free tutorials like c, html, css, etc. All tutorials are free for beginner and professionals.

Terms of Use

comsysapp.com is not responsible for any mistake. We are not responsible if information made available on our website is incomplete or invalid. But comsysapp.com always try for zero-zero mistake.

Privacy policy

comsysapp.com does not collect any data from users. We use Google AdSense advertising on our website. We never ask personal or private information.

Sitemap

sitemap