CSS

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files 
First you create a .css file and open in notepad than
Link in your HTML Page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> //this line to add stylesheet in web page//
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
and type your css file 
//Change background color//
h1 {
  background-color: green;}
 you see that web page background color is green 
 
Border 
The border-style property specifies what kind of border to display.
The following values are allowed:
  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border
  • hidden - Defines a hidden border
Type in your css file and see that paragraph have in border

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
you see that output 

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

Margin 

CSS has properties for specifying the margin for each side of an element:
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
Exp:
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;}
insert value which you want

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

Padding

CSS has properties for specifying the padding for each side of an element:
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
exp:
p {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;}

CSS Setting height and width

The height and width properties are used to set the height and width of an element.

CSS height/width Values

The height and width properties may have the following values:
  • auto - This is default. The browser calculates the height and width
  • length - Defines the height/width in px, cm,m etc.
  • % - Defines the height/width in percent of the containing block
  • initial - Sets the height/width to its default value
  • inherit - The height/width will be inherited from its parent value
exp:
p {
  height: 200px;
  width: 50%;
  background-color: powderblue;}
Insert Icons in your web page 
To 
use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page:
<script src="https://kit.fontawesome.com/yourcode.js"></script>
Read more about how to get started with Font Awesome in our Font Awesome 5 tutorial.
Note: No downloading or installation is required!
Exp:
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

Comments

Post a Comment