Scribd
Upload
35 views21 pages

UNIT - 4 Ip

Uploaded by

uniqueguy824
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views21 pages

UNIT - 4 Ip

Uploaded by

uniqueguy824
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Introduction to css

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs,variations in display for different
devices and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document. Most commonly, CSS is combined with the markup languages HTML or
XHTML.

Advantages of CSS
• CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.
• Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
• Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
• Superior styles to HTML − CSS has a much wider array of attributes than HTML,
so you can give a far better look to your HTML page in comparison to HTML
attributes.
• Multiple Device Compatibility − Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cell phones or for printing.
• Global web standards − Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.

Types of CSS (Cascading Style Sheet)

Cascading Style Sheet(CSS) is used to set the style in web pages that
contain HTML elements. It sets the background color, font-size, font-family,
color, … etc property of elements on a web page. There are three types of
CSS which are given below:

• Inline CSS
• Internal or Embedded CSS
• External CSS

Inline CSS: Inline CSS contains the CSS property in the body section
attached with element is known as inline CSS. This kind of style is specified
within an HTML tag using the style attribute.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GeeksForGeeks
</p>

</body>
</html>

Internal or Embedded CSS: This can be used when a single HTML


document must be styled uniquely. The CSS rule set should be within the
HTML file in the head section i.e the CSS is embedded within the HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px; font-
weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>

<div class ="geeks">


A computer science portal for geeks
</div>
</div>
</body>
</html>

External CSS: External CSS contains separate CSS file which contains only
style property with the help of tag attributes (For example class, id, heading,
… etc). CSS property written in a separate file with .css extension and should
be linked to the HTML document using link tag. This means that for each
element, style can be set only once and that will be applied across web pages.
Example: The file given below contains CSS property. This file save with
.css extension. For Ex: geeks.css

body {
background-color:powderblue;
} .main
{
text-align:center;
} .GFG {
color:#009900;
font-size:50px;
font-weight:bold;
} #geeks { font-
style:bold;
font-size:20px;
}

Below is the HTML file that is making use of the created external style sheet
• link tag is used to link the external style sheet with the html
webpage.
• href attribute is used to specify the location of the external style
sheet file.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css"/>
</head>

<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div id ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>

The CSS id Selector


The id selector uses the id attribute of an HTML element to select a specific
element.

The id of an element is unique within a page, so the id selector is used to


select one unique element!

To select an element with a specific id, write a hash (#) character, followed by
the id of the element.

<!DOCTYPE html>
<html>
<head>
<style> #para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>


<p>This paragraph is not affected by the style.</p>

</body>
</html>

*output
Hello World!

This paragraph is not affected by the style.

The CSS class Selector


The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed
by the class name.

Example
In this example all HTML elements with class="center" will be red and center-
aligned:

<!DOCTYPE html>
<html>
<head>
<style> .center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>


<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

*output

Red and center-aligned heading


Red and center-aligned paragraph.

CSS Background
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.

You can set the background color like this:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2,p{
6. background-color: #b0d4de;
7. }
8. </style>
9. </head>
10. <body>
11. <h2>My first CSS page.</h2>
12. <p>Hello Javatpoint. This is an example of CSS background-color.</p>
13. </body>
14. </html>

My first CSS page.


Hello Javatpoint. This is an example of CSS background-color.
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.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("paper1.gif");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>

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.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-x;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>

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.

background: white url('bbb.gif'); background-repeat:


no-repeat; background-attachment: fixed;

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
background: white url('good-morning.jpg');
background-repeat: no-repeat; background-
attachment: fixed; background-position: center;

CSS Box Model


The components that can be depicted on the web page consist of one or more than
one rectangular box.

A CSS box model is a compartment that includes numerous assets, such as edge,
border, padding and material. It is used to develop the design and structure of a web
page. It can be used as a set of tools to personalize the layout of different components.
According to the CSS box model, the web browser supplies each element as a square
prism.

The following diagram illustrates how the CSS properties of width,


height, padding, border and margin dictate that how much space an attribute will
occupy on a web page.

The CSS box model contains the different properties in CSS. These are listed
below.
o Border o

Margin o
Padding o
Content

Now, we are going to determine the properties one by one in detail.

Border Field

It is a region between the padding-box and the margin. Its proportions are determined
by the width and height of the boundary.

Margin Field

This segment consists of the area between the boundary and the edge of the border.

The proportion of the margin region is equal to the margin-box width and height. It is
better to separate the product from its neighbor nodes.

Padding Field

This field requires the padding of the component. In essence, this area is the space
around the subject area and inside the border-box. The height and the width of the
padding box decide its proportions.

Content Field

Material such as text, photographs, or other digital media is included in this area.

It is constrained by the information edge, and its proportions are dictated by the width
and height of the content enclosure.

Elements of the width and height


Typically, when you assign the width and height of an attribute using the CSS width
and height assets, it means you just positioned the height and width of the subject
areas of that component. The additional height and width of the unit box is based on
a range of influences.

The specific area that an element box may occupy on a web page is measured as
follows-

Example 1
Here, to explain the CSS box model, we have an instance.
Size of the box Properties of CSS

Height height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

Width width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

1. <!DOCTYPE html>
2. <head>
3. <title>CSS Box Model</title>
4. <style>
5. .main
6. {
7. font-size:30px;
8. font-weight:bold;
9. Text-align:center;
10. }
11. .gfg
12. {
13. margin-left:50px;
14. border:50px solid Purple;
15. width:300px;
16. height:200px;
17. text-align:center;
18. padding:50px;
19. }
20. .gfg1
21. {
22. font-size:40px;
23. font-weight:bold;
24. color:black;
25. margin-top:60px;
26. background-color:purple;
27. }
28. .gfg2
29. {
30. font-size:20px;
31. font-weight:bold;
32. background-color:white;
33. }
34. </style>
35. </head>
36. <body>
37. <div class = "main">CSS Box-Model Property</div>
38. <div class = "gfg">
39. <div class = "gfg1">JavaTpoint</div>
40. <div class = "gfg2">A best portal for learn Technologies</div>
41. </div>
42. </body>
43. </html>

Output
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

Example
Set different margins for all four sides of a <p> element:

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px; }

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

Note: Negative values are not allowed.


Example
Set different padding for all four sides of a <div> element:

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px; }

Try it Yourself »

CSS Lists
There are various CSS properties that can be used to control lists. Lists can be classified
as ordered lists and unordered lists. In ordered lists, marking of the list items is with
alphabet and numbers, whereas in unordered lists, the list items are marked using
bullets.

We can style the lists using CSS. CSS list properties allow us to:

o Set the distance between the text and the marker in the list.

o Specify an image for the marker instead of using the number or bullet point. o

Control the marker appearance and shape.

o Place the marker outside or inside the box that contains the list items. o Set the

background colors to list items and lists.

The CSS properties to style the lists are given as follows:

o list-style-type: This property is responsible for controlling the appearance and shape of
the marker.
o list-style-image: It sets an image for the marker instead of the number or a bullet
point.

o list-style-position: It specifies the position of the marker. o list-style: It is the

shorthand property of the above properties.

o marker-offset: It is used to specify the distance between the text and the marker. It is
unsupported in IE6 or Netscape 7.

https://www.javatpoint.com/css-lists
CSS Border
The CSS border is a shorthand property used to set the border on an element.

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

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.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.none {border-style: none;}
6. p.dotted {border-style: dotted;}
7. p.dashed {border-style: dashed;}
8. p.solid {border-style: solid;}
9. p.double {border-style: double;}
10. p.groove {border-style: groove;}
11. p.ridge {border-style: ridge;}
12. p.inset {border-style: inset;}
13. p.outset {border-style: outset;}

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.


14. p.hidden {border-style: hidden;}
15. </style>
16. </head>
17. <body>
18. <p class="none">No border.</p>
19. <p class="dotted">A dotted border.</p>
20. <p class="dashed">A dashed border.</p>
21. <p class="solid">A solid border.</p>
22. <p class="double">A double border.</p>
23. <p class="groove">A groove border.</p>
24. <p class="ridge">A ridge border.</p>
25. <p class="inset">An inset border.</p>
26. <p class="outset">An outset border.</p>
27. <p class="hidden">A hidden border.</p>
28. </body>
29. </html>

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.
border-width: 5px;

Property Description

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

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

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

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

3) CSS border-color
There are three 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".

There is also a border color named "transparent". If the border color is not set it is
inherited from the color property of the element.

border-color: red;

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, borderbottom-


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:

rig

le

You might also like