Scribd
Upload
82 views7 pages

Advanced CSS Part 1

Advanced CSS pdf

Uploaded by

sarbajitacharjee440
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
82 views7 pages

Advanced CSS Part 1

Advanced CSS pdf

Uploaded by

sarbajitacharjee440
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/ 7

CSS ROUNDED CORNER:

With the CSS border-radius property, we can give any element rounded
corners .

This property allows us to round the corners of an element's border box.

Here's a simple Example:

<html>
<head>
<style>
#corners1 {
border-radius: 25px;
background: blue;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p id="corners1">Rounded corners!</p>
</body>
</html>
If we want only one corner to be rounded?

You can specify individual corners like this:

#corners1 {
border-top-left-radius:10px;
border-top-right-radius:10px;

}
CSS BORDER IMAGES:

The border-image property allows you to use an image as a border around an


element.

The property has three parts:


1. The image to use as the border
2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched

Ex:

<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image:
url(https://marketplace.canva.com/EAFsY0VY_xE/1/0/1131w/canva-colorful-
cute-kids-stationary-page-border-SoYsVC3n-iY.jpg) 30 round;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p id="borderimg">border-image</p>
</body>
</html>

How do we control the slicing of the border image?

The border-image-slice property defines how the image is sliced into parts.
You can use percentage values or pixel.
CSS Multiple Backgrounds:
CSS allows you to add multiple background images for an element, through the
background-image property

<html>
<head>
<style>
#example1 {
background-image:
url(https://i.etsystatic.com/27133153/r/il/3edae7/42152442
42/il_1080xN.4215244242_3yet.jpg),
url(https://5.imimg.com/data5/KJ/MG/KC/SELLER-
38773420/red-rose-flower-500x500.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>

<div id="example1">

<p>This is a Paragraph.</p>
<p>This is a second Paragraph.</p>
</div>
</body>
</html>
Full Size Background Image
Now we want to have a background image on a website that covers the entire
browser window at all times.

The following example shows how to do it; Use the <html> element (the
<html> element is always at least the height of the browser window). Then set a
fixed and centered background on it. Then adjust its size with the background-
size property:

<!DOCTYPE html>
<html>
<head>
<style>
html {
background: url(https://www.pexels.com/photo/tulips-in-bloom-12267287/s)
no-repeat center fixed;
background-size: cover;
}

body {
color: white;
}
</style>
</head>
<body>

<h1>Full Page Background Image</h1>


<p>This is Paragraph.</p>

</body>
</html>
CSS VARIABLES- :

CSS variables (custom properties) allow you to define reusable values for
properties like colors, font sizes, and spacing. They make your CSS easier to
maintain and update.

Benifits :
1.Reusability: Define once,use many times.
2.Maintainability:Easy to update.

Ex:

:root{
--primary-color: blue;

:root pseudo-class in CSS represents the top-level element of the document. In


HTML documents, this is always the <html> element. The :root pseudo-class is
similar to the html selector, but it has a higher specificity.

HOW TO DEFINE CSS VARIABLE:

CSS variables can have a global or local scope.


Global variables can be accessed/used through the entire document, while local
variables can be used only inside the selector where it is declared.
CSS variables are usually defined within the :root pseudo class to make the
globally accessible

:root{
--primary-color:blue;
--secondary color:green;
--font-size:15px;
}
HOW TO USE CSS VARIABLES:

we apply variables throughout css using the var() function.

Body{
color:var(--primary-color)
font-size:var(--font-size)

Ex:

<!DOCTYPE html>
<html>
<head>
<style>
:root {
--bgcolor: magenta;
--bordercolor:aliceblue;
}

body {
background-color: var(--bgcolor);
}

h2 {
background-color: var(--bordercolor);
}
</style>

</head>
<body>
<h1>Using the var() Function</h1>
<h2>Heading</h2>
<p>This is paragraph</p>
</body>
</html>

You might also like