CSS IN HTML

 

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

In these chapters, you will learn about the following CSS background properties:

  • background-color
  • background-image

 

CSS background-color

The background-color property specifies the background color of an element.

Example

The background color of a page is set like this:

<html>

<head>

<style>

body {

  background-color: lightblue;

}

</style>

</head>

<body>

 

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>

</html>

With CSS, a color is most often specified by:

  • a valid color name - like "red"
  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"

CSS background-image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

<html>

<head>

<style>

body {

  background-image: url("paper.gif");

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>

</html>

 

CSS Colors

CSS Background Color

You can set the background color for HTML elements:

<html>

<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</p>

</body>

</html>

CSS Text Color

You can set the color of text:

<html>

<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>

</html>

 

CSS Border Color

You can set the color of borders:

<html>

<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>

</html>

CSS Borders

CSS Border Style

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

<!DOCTYPE html>

<html>

<head>

<style>

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;}

</style>

</head>

<body>

 

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

 

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

</body>

</html>

CSS Margins

Margins are used to create space around elements, outside of any defined borders

CSS Margins

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

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

All the margin properties can have the following values:

  • auto - the browser calculates the margin
  • length - specifies a margin in px, pt, cm, etc.
  • % - specifies a margin in % of the width of the containing element
  • inherit - specifies that the margin should be inherited from the parent element

<html>

<head>

<style>

div {

  border: 1px solid black;

  margin-top: 100px;

  margin-bottom: 100px;

  margin-right: 150px;

  margin-left: 80px;

  background-color: lightblue;

}

</style>

</head>

<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>

</html>

 

CSS Padding

Padding is used to create space around an element's content, inside of any defined borders.

CSS Padding

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

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

All the padding properties can have the following values:

  • length - specifies a padding in px, pt, cm, etc.
  • % - specifies a padding in % of the width of the containing element
  • inherit - specifies that the padding should be inherited from the parent element

<!DOCTYPE html>

<html>

<head>

<style>

div {

  border: 1px solid black;

  background-color: lightblue;

  padding-top: 50px;

  padding-right: 30px;

  padding-bottom: 50px;

  padding-left: 80px;

}

</style>

</head>

<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>

</html>

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Explanation of the different parts:

  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent

<html>

<head>

<style>

div {

  background-color: lightgrey;

  width: 300px;

  border: 15px solid green;

  padding: 50px;

  margin: 20px;

}

</style>

</head>

<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>

</html>

 

 

Comments

Post a Comment

Popular posts from this blog

SYSTEM CALLS ON OPERATING SYSTEM

Image
System Calls in Operating System A system call is a way for a user program to interface with the operating system. The program requests several services, and the OS responds by invoking a series of system calls to satisfy the request. A system call can be written in assembly language or a high-level language like  C  or  Pascal . System calls are predefined functions that the operating system may directly invoke if a high-level language is used. In this article, you will learn about the system calls in the operating system and discuss their types and many other things. What is a System Call? A system call is a method for a computer program to request a service from the kernel of the  operating system on which it is running. A system call is a method of interacting with the operating system via programs. A system call is a request from computer software to an operating system's kernel. The   Application Program Interface (API)   connects the operating system...
Read more

TALLY ERP9

Image
  BUDGET AND CONTROL   BUDGET AND CONTROL   The annual estimate of accounts is called Budget. It can be annual, six monthly, and tri monthly or monthly.   ESTIMATED VALUE   To activate budget and control, follow these steps:-   Path for activate budget and control:-   G. O. T. (gateway of tally)  -->  press  F11 (company features) -->  press F1 (accounting features).     Now we create ledger in the company. Path for ledger creation:-  G. O. T. (gateway of tally)  -->  account info -->  ledger -->  create (multiple).       After ledger creation, we create budget as follow:-   Path for budget creation:-  G. O. T. (gateway of tally)  -->  account info -->  budget -->  create.   Select “Budget” option from accounts info as follow:-   After that, select “create” op...
Read more
Image
  UNIT-5 Explain Directory Structure. A  directory  is a container that is used to contain folders and files. It organizes files and folders in a hierarchical manner.  There are several logical structures of a directory, these are given below.   ·          Single-level directory –   The single-level directory is the simplest directory structure. In it, all files are contained in the same directory which makes it easy to support and understand.  A single level directory has a significant limitation, however, when the number of files increases or when the system has more than one user. Since all the files are in the same directory, they must have a unique name. if two users call their dataset test, then the unique name rule violated. Advantages:     ·          Since it is a single directory, so its implementation is very easy. · ...
Read more