Scribd
Upload
5 views

CSS Doc1

Uploaded by

grishikiran1357
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

CSS Doc1

Uploaded by

grishikiran1357
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to
describe the look and formatting of a document written in markup language. It
provides an additional feature to HTML. It is generally used with HTML to change the
style of web pages and user interfaces.

Why use CSS


These are the three major benefits of CSS:

1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and
size had to be repeated on every web page. This was a very long process. For
example: If you are developing a large website where fonts and color information are
added on every single page, it will be become a long and expensive process. CSS was
created to solve this problem. It was a W3C recommendation.

2) Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of
the website.

CSS Syntax
A CSS rule set contains a selector and a declaration block.

1
Types of CSS:

CSS (Cascading Style Sheet) describes the HTML elements which are displayed
on screen, paper, or in other media. It saves a lot of time. It controls the layout of
multiple web pages at one time. It sets the font-size, font-family, color, background
color on the page.

It allows us to add effects or animations to the website. We use CSS to


display animations like buttons, effects, loaders or spinners, and also animated
backgrounds.

Without using CSS, the website will not look attractive. There are 3 types of CSS which
are below:

o Inline CSS
o Internal/ Embedded CSS
o External CSS

2
1. Internal CSS

The Internal CSS has <style> tag in the <head> section of the HTML document. This
CSS style is an effective way to style single pages. Using the CSS style for multiple web
pages is time-consuming because we require placing the style on each web page.

Example:

<html>

<head>

<style>

body{background-color : #345678}

h1{color : black}

</style>

</head>

<body>

<h1>THIS IS AN EXAMPLE FOR INTERNAL CSS</h1>

</body>

</html>

3
OUTPUT:

2. External CSS

In external CSS, we link the web pages to the external .css file. It is created by text
editor. The CSS is more efficient method for styling a website. By editing the .css file,
we can change the whole site at once.

Example:

body { background-color:black}

h1{color:white;

text-align:center}

Save it with demo1.css and next write html file

<html>

<head>

<link rel="stylesheet" href="demo1.css">

</head>

<body>

<h1>

4
THIS IS AN EXAMPLE FOR EXTERNAL CSS

</h1>

<p style="color:white">External css</p>

</body>

</html>

Save it with .html and execute the program then directly demo1.css color will be
applied for the webpage.

OUTPUT:

3. Inline CSS

Inline CSS is used to style a specific HTML element. Add a style attribute to each
HTML tag without using the selectors. Managing a website may difficult if we use
only inline CSS. However, Inline CSS in HTML is useful in some situations. We have not
access the CSS files or to apply styles to element.

Example:

<html>

<body style="background-color:blue">

5
<h1 style="color:white;text-align:center">

THIS IS AN EXAMPLE FOR INLINE CSS</h1>

</body>

</html>

Output:

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:

o RGB format.
o RGBA format.
o Hexadecimal notation.

6
o HSL.
o HSLA.
o Built-in color.

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

1. color: color-name;

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.

1. color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

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

1. color: rgb(R, G, B);

RGBA Format
7
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

1. color:rgba(R, G, B, A);

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).

Syntax

1. 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

1. color:hsla(H, S, L, A);

Example:

8
<html>

<body>

<br>

</br>

<h1 style=Background-color:green;>Hello!Welcome to pythonlife(Builtin


color)</h1>

<h1 style=Background-color:#569823;>

Hello!Welcome to pythonlife(Hexadecimal color)</h1>

<h1 style=Background-color:rgb(0,225,105);>

Hello!Welcome to pythonlife(RGB function)</h1>

<h1 style=Background-color:rgba(27,45,100,0.2);>

Hello!Welcome to pythonlife(RGBA function)</h1>

<h1 style=Background-color:hsl(250,50%,40%);>

Hello!Welcome to pythonlife(HSL function)</h1>

<h1 style=Background-color:hsla(350,58%,50%,0.2);>

Hello!Welcome to pythonlife(HSLA function)</h1>

</body>

</html>

9
OUTPUT:

CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of
CSS rule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

10
2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element.
An id is always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with
a period character . (full stop symbol) followed by the class name.

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the
pages.

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.

Example:

<html>

<head>

<br>

</br>

<style>

h1{background-color:green;color:yellow}

#head2{background-color:black;color:white}

.head3{background-color:blue;color:white}

11
*{color:red}

h2,h3{background-color:brown;color:white}

</style>

</head>

<body>

<h1>WELCOME TO SELECTORS(Element seclector)</h1><br>

<h1 id="head2">WELCOME TO SELECTORS(ID Selector)</h1><br>

<h1 class="head3">WELCOME TO SELECTORS(Class Selector)</h1>

welcome to selectors(UNIVERSAL SELECTOR)

<h2>WELCOME TO SELECTORS(GROUPING Selector)</h2>

<h3>WELCOME TO SELECTORS(GROUPING Selector)</h3>

</body>

</html>

OUTPUT:

12
CSS Background Property
CSS background property is used to define the background effects on element. There
are 5 CSS background properties that affects the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

1) CSS background-color

The background-color property is used to specify the background color of the element.

2) CSS background-image

The background-image property is used to set an image as a background of an


element. By default the image covers the entire element. You can set the background
image for a page like this.

13
3) CSS background-repeat

By default, the background-image property repeats the background image


horizontally and vertically. Some images are repeated only horizontally or vertically.

4) CSS background-attachment

The background-attachment property is used to specify if the background image is


fixed or scroll with the rest of the page in browser window. If you set fixed the
background image then the image will not move during scrolling in the browser. Let?s
take an example with fixed background image.

5) CSS background-position

The background-position property is used to define the initial position of the


background image. By default, the background image is placed on the top-left of the
webpage.

You can set the following positions:

1. center
2. top
3. bottom
4. left
5. right

CSS Border
The CSS border is a shorthand property used to set the border on an element.

The CSS border properties are use to specify the style, color and size of the border of
an element. The CSS border properties are given below

o border-style
o border-color
o border-width
o border-radius

14
1) CSS border-style

The Border style property is used to specify the border type which you want to display
on the web page.

There are some border style values which are used with border-style property to define
a border

Value Description

none It doesn't define any border.

dotted It is used to define a dotted border.

dashed It is used to define a dashed border.

solid It is used to define a solid border.

double It defines two borders wIth the same border-width value.

groove It defines a 3d grooved border. effect is generated according to border-color value.

ridge It defines a 3d ridged border. effect is generated according to border-color value.

inset It defines a 3d inset border. effect is generated according to border-color value.

outset It defines a 3d outset border. effect is generated according to border-color value

2) CSS border-width

The border-width property is used to set the border's width. It is set in pixels. You can
also use the one of the three pre-defined values, thin, medium or thick to set the width
of the border.

3) CSS border-color

There are four methods to set the color of the border.

o Name: It specifies the color name. For example: "red".


o RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
o Hex: It specifies the hex value of the color. For example: "#ff0000".
o HSL: It specifies the HSL value of the color. For example:”hsl(250,50%,50%)”.

15
CSS border-radius property

This CSS property sets the rounded borders and provides the rounded corners around
an element, tags, or div. It defines the radius of the corners of an element.

It is shorthand for border top-left-radius, border-top-right-radius, border-


bottom-right-radius and border-bottom-left-radius. It gives the rounded shape to
the corners of the border of an element. We can specify the border for all four corners
of the box in a single declaration using the border-radius. The values of this property
can be defined in percentage or length units.

This CSS property includes the properties that are tabulated as follows:

Property Description

border-top-left-radius It is used to set the border-radius for the top-left corner

border-top-right-radius It is used to set the border-radius for the top-right corner

border-bottom-right-radius It is used to set the border-radius for the bottom-right corner

border-bottom-left-radius It is used to set the border-radius for the bottom-left corner

Example:

<html>

<head>

<style>

.dotted{border-style:dotted;border-width:10px;border-color:blue}

.dashed{border-style:dashed;border-width:10px;border-color:green}

.solid{border-style:solid;border-width:10px;border-color:red;border-radius:25px}

.double{border-style:double;border-width:10px;border-color:green}

16
.groove{border-style:groove;border-width:10px;border-color:red}

.ridge{border-style:ridge;border-width:10px;border-color:blue}

.inset{border-style:inset;border-width:10px;border-color:pink}

.outset{border-style:outset;border-width:10px;border-color:red}

.short{border-style:double dashed;border-width:10px}

</style>

</head>

<body>

<h1 class=dotted>THIS IS DOTTED BORDER</h1>

<h1 class=dashed>THIS IS DASHED BORDER</h1>

<h1 class=solid>THIS IS SOLID BORDER</h1>

<h1 class=double>THIS IS DOUBLE BORDER</h1>

<h1 class=groove>THIS IS GROOVE BORDER</h1>

<h1 class=ridge>THIS IS RIDGE BORDER</h1>

<h1 class=inset>THIS IS INSET BORDER</h1>

<h1 class=outset>THIS IS OUTSET BORDER</h1>

<h1 class=short>THIS IS SHORTHAND BORDER</h1>

</body>

</html>

17
OUTPUT:

CSS Margin
CSS Margin property is used to define the space around elements. It is completely
transparent and doesn't have any background color. It clears an area around the element.

Top, bottom, left and right margin can be changed independently using separate
properties. You can also change all properties at once by using shorthand margin
property.

There are following CSS margin properties:

CSS Margin Properties

Property Description

margin This property is used to set all the properties in one declaration.

margin-left it is used to set left margin of an element.

margin-right It is used to set right margin of an element.

margin-top It is used to set top margin of an element.

margin-bottom It is used to set bottom margin of an element.

18
There are four types to specify the margin property. You can use one of them.

1. margin: 50px 100px 150px 200px;


2. margin: 50px 100px 150px;
3. margin: 50px 100px;
4. margin 50px;

Example:

<html>
<head>
<style>
h1{ border-style:solid;
margin-top:500px;
margin-bottom:50px;
margin-right:400px;
margin-left:400px;}
h2{ border-style:solid;
margin:50px 500px 50px 100px }

</style>
</head>
<body>
<h1>THIS IS MARGIN TOPIC</h1>
<h2>this is a margin topic</h2>
</body>
</html>

19
OUTPUT:

CSS Padding:
CSS Padding property is used to define the space between the element content and the
element border.

It is different from CSS margin in the way that CSS margin defines the space around
elements. CSS padding is affected by the background colors. It clears an area around the
content.

Top, bottom, left and right padding can be changed independently using separate
properties. You can also change all properties at once by using shorthand padding
property.

CSS Padding Properties

20
Property Description

padding It is used to set all the padding properties in one declaration.

padding-left It is used to set left padding of an element.

padding-right It is used to set right padding of an element.

padding-top It is used to set top padding of an element.

padding-bottom It is used to set bottom padding of an element.

Example:
<html>
<head>
<style>
h1{ border-style:solid;
padding-top:50px;
padding-bottom:70px;
padding-right:60px;
padding-left:50px }
h2{ border-style:solid;
padding:50px 25px 90px 100px}
</style>
</head>
<body>
<h1>THIS IS PADDING TOPIC</h1>
<h2>this is padding topic</h2>

21
</body>
</html>

OUTPUT:

CSS Font:
CSS Font property is used to control the look of texts. By the use of CSS font property you can
change the text size, color, style and more. You have already studied how to make text bold
or underlined. Here, you will also know how to resize your font using percentage.

These are some important font attributes:

1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.

22
5. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.

1) CSS Font Color

CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts.
It is used to change the color of the text.

There are three different formats to define a color:

o By a color name
o By hexadecimal value
o By RGB
o By HSL

2) CSS Font Family

CSS font family can be divided in two types:

o Generic family: It includes Serif, Sans-serif, and Monospace.


o Font family: It specifies the font family name like Arial, New Times Roman etc.

3) CSS Font Size

CSS font size property is used to change the size of the font.

4) CSS Font Style

CSS Font style property defines what type of font you want to display. It may be italic,
oblique, or normal.

5) CSS Font Weight

CSS font weight property defines the weight of the font and specify that how bold a font
is. The possible values of font weight may be normal, bold, bolder, lighter or number (100,
200..... upto 900).

EXAMPLE:

23
<html>

<head>

<style>

.one{ font-family:arial,serif,sans-serif,"Times New Roman";

font-style:normal;

font-weight:bold;

font-size:40px}

.two{ font-family:courier,arial,serif,sans-serif,"Times New Roman";

font-style:normal;

font-weight:normal;

font-size:40px}

</style>

</head>

<body>

<p class="one">THIS IS FONT TOPIC-Bold and oblique</p>

<p class="two">THIS IS FONT TOPIC-normal </p>

</body>

</html>

OUTPUT:

24
CSS Links

Link is a connection from one web page to another web pages. CSS property can be used
to style the links in various different ways.
States of Link: Before discussing CSS properties, it is important to know the states of a
link. Links can exist in different states and they can be styled using pseudo classes.
There are four state of links given below:

• a:link => This is a normal, unvisited link.


• a:visited => This is a link visited by user at least once
• a:hover => This is a link when mouse hovers over it
• a:active => This is a link which is just clicked.

Example:

<html>
<head>
<style>
a:link{color:blue;text-decoration:none}
a:visited{color:brown}
a:hover{color:green}
a:active{color:red}
</style>
</head>
<body>
<h1>

25
<a href="https://www.pythonlife.in/">PYTHONLIFE</a></h1>
</body>
</html>

OUTPUT:

26

You might also like