Scribd
Upload
33 views

Css Grids

The document provides information on various CSS properties for styling text, backgrounds, borders, spacing, positioning, tables, forms, grids and layouts. It includes code examples demonstrating how to set colors, images, margins, padding, borders, floats, and other properties for different HTML elements. The last section explains how to define grid columns and rows using CSS grid properties like grid-template-columns, grid-template-rows, justify-content and align-content.

Uploaded by

Priti Kumari
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views

Css Grids

The document provides information on various CSS properties for styling text, backgrounds, borders, spacing, positioning, tables, forms, grids and layouts. It includes code examples demonstrating how to set colors, images, margins, padding, borders, floats, and other properties for different HTML elements. The last section explains how to define grid columns and rows using CSS grid properties like grid-template-columns, grid-template-rows, justify-content and align-content.

Uploaded by

Priti Kumari
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

CSS

Text Colour and Background Colour


<!DOCTYPE html>
<html>
<style>
p
{
color:#ABC000;
background-color:red;
}
</style>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p>Welcome to html css and javaScript</p>
</body>
</html>
Border
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 5px solid red;
}
h2
{
border: 5px dotted red;
}
</style>
</head>
<body>
<h2>The border Property</h2>
<p>This property is a shorthand property for border-width, border-style, and border-color.</p>
</body>
</html>
Background-image
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>\
</body>
</html>
Height, Width, Margin , padding and Float
Height and width are used to set height and width of an element.
Css Margin properties are used to create space around elements,
outside of any defined borders.
Css padding properties are used to generate space around an element's
content, inside of any defined borders.
Float property is used for positioning and layout on web pages.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin:100px 150px 100px 150px ;
padding:20px 10px 20px 10px;
background-color: lightblue;
}
img {
float: right;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<img src=“Friends.jpg”>
<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 150px.</div>
</body>
</html>
Tables
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:hover
{
background-color: yellow;
}
tr:nth-child(odd) {background-color: #f2f2f2;}
</style>
</head>
<body>
Forms
input[type=text]
{
width: 100%;
padding: 15px 20px;
border-radius:20px;
border: 2px solid #FBB43F;
}
input[type=checkbox], input[type=radio]
{
height: 20px;
width: 20px;
}
select, textarea {
width: 100%;
padding: 10px 30px;
border: none;
border-radius: 20px;
background-color: #FBB43F;
font-size:20px;
font-family:cursive; }
Css Grids
Grid Layout:- The CSS Grid Layout Module offers a grid-based layout
system, with rows and columns, making it easier to design web pages
without having to use floats and positioning.
A grid layout consists of a parent element, with one or more child
elements.
A HTML element become grid element by setting display property to
grid or inline grid.
<!DOCTYPE html>
<html>
<head>
</style>
<style>
</head>
.grid-container {
<body>
display: grid;
<h1>The display Property:</h1>
background-color: #2196F3;
<div class="grid-container">
padding: 20px; <div class="grid-item">1</div>
} <div class="grid-item">2</div>
.grid-item { <div class="grid-item">3</div>
background-color:lightblue; <div class="grid-item">4</div>
border: 1px solid black; </div>

padding: 10px; <p>Set the <em>display</em> property to <em>grid</em> to make a


block-level grid container.</p>
font-size: 30px;
</body>
text-align: center; </html>
}
Grid containers consist of grid items, placed inside columns and rows.
The grid-template-columns property defines the number of columns in
your grid layout, and it can define the width of each column.The value
is a space-separated-list, where each value defines the length of the
respective column.If you want your grid layout to contain 4 columns,
specify the width of the 4 columns, or "auto" if all columns should have
the same width.
The grid-template-rows property defines the height of each row.
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns:auto auto; <body>
<h1>The display Property:</h1>
grid-template-rows: 80px 80px;
<div class="grid-container">
background-color: #2196F3;
<div class="grid-item">1</div>
padding: 20px; <div class="grid-item">2</div>
} <div class="grid-item">3</div>

.grid-item { <div class="grid-item">4</div>


</div>
background-color:lightblue;
</body>
border: 1px solid black;
</html>
padding: 10px;
font-size: 30px;
text-align: center;
}
</style>
</head>
The justify-content property is used to align the whole grid inside the
container.
justify-content:space-evenly
justify-content:space-around
justify-content:space-between
justify-content:center
justify-content:start
justify-content:end

.grid-container {
  display: grid;
  justify-content: space-evenly;
}
Use the align-content property to vertically align the grid inside the
container.
.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

You might also like