Box Model, Css Color: Submitted by

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE ENGINEERING
SUBMITTED BY:
Akshay Pandey (100200110)
SUBMITTED TO:
Er. Amit sharma
Assignment
BOX MODEL,CSS COLOR
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
Example
Demonstration of the box model:
<!DOCTYPE html>
<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>
CSS Colors
The color property in CSS is used to set the color of HTML elements.
Typically, this property is used to set the background color or the font
color of an element.
In CSS, we use color values for specifying the color. We can also use this
property for the border-color and other decorative effects.
We can define the color of an element by using the following ways:
RGB format.
RGBA format.
Hexadecimal notation.
HSL.
HSLA.
Built-in color.
RGB Format
RGB format is the short form of 'RED GREEN and BLUE' that is used for
defining the color of an HTML element simply by specifying the values
of R, G, B that are in the range of 0 to 255.
The color values in this format are specified by using the rgb() property.
This property allows three values that can either be in percentage or
integer (range from 0 to 255).
This property is not supported in all browsers; that's why it is not
recommended to use it.
Syntax
color: rgb(R, G, B);
RGBA Format
It is almost similar to RGB format except
that RGBA contains A (Alpha) that specifies the element's
transparency. The value of alpha is in the range 0.0 to 1.0, in
which 0.0 is for fully transparent, and 1.0 is for not
transparent.
Syntax
color:rgba(R, G, B, A);
Hexadecimal notation
Hexadecimal can be defined as a six-digit color representation.
This notation starts with the # symbol followed by six
characters ranges from 0 to F. In hexadecimal notation, the first
two digits represent the red (RR) color value, the next two
digits represent the green (GG) color value, and the last two
digits represent the blue (BB) color value.
The black color notation in hexadecimal is #000000, and the
white color notation in hexadecimal is #FFFFFF. Some of the
codes in hexadecimal notation are #FF0000, #00FF00, #0000FF,
#FFFF00, and many more.
Syntax
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
Short Hex codes

It is a short form of hexadecimal notation in which every digit is
recreated to arrive at an equivalent hexadecimal value.
For example, #7B6 becomes #77BB66 in hexadecimal.
The black color notation in short hex is #000, and the white
color notation in short hex is #FFF. Some of the codes in short
hex are #F00, #0F0, #0FF, #FF0, and many more.
HSL
It is a short form of Hue, Saturation, and Lightness. Let's
understand them individually.
Hue: It can be defined as the degree on the color wheel from 0 to 360.
0 represents red, 120 represents green, 240 represents blue.
Saturation: It takes value in percentage in which 100% represents fully
saturated, i.e., no shades of gray, 50% represent 50% gray, but the color
is still visible, and 0% represents fully unsaturated, i.e., completely gray,
and the color is invisible.
Lightness: The lightness of the color can be defined as the light that we
want to provide the color in which 0% represents black (there is no
light), 50% represents neither dark nor light, and 100% represents
white (full lightness).
Let's see the syntax of HSL in color property.
Syntax
color:hsl(H, S, L);
HSLA
It is entirely similar to HSL property, except that it contains A
(alpha) that specifies the element's transparency. The value of
alpha is in the range 0.0 to 1.0, in which 0.0 indicates fully
transparent, and 1.0 indicates not transparent.
Syntax
color:hsla(H, S, L, A);
Built-in Color
As its name implies, built-in color means the collection of
previously defined colors that are used by using a name such as
red, blue, green, etc.
Syntax
color: color-name;

Box Model, Css Color: Submitted by

Uploaded by

Copyright:

Available Formats

Box Model, Css Color: Submitted by

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Box Model, Css Color: Submitted by

Uploaded by

Copyright:

Available Formats

BACHELOR OF TECHNOLOGY

COMPUTER SCIENCE ENGINEERING

Akshay Pandey (100200110)

Er. Amit sharma

<h2>Demonstrating the Box Model</h2>

Short Hex codes

You might also like