Scribd
Upload
25 views

Css Course

Uploaded by

Samiksha
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
25 views

Css Course

Uploaded by

Samiksha
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/ 94

Introducing CSS

The key to understanding how CSS works is to imagine that there is an invisible box around every HTML
element.

CSS allows you to create rules that control the way that each individual box (and the contents of that box) is
presented.

CSS works by associating rules with HTML elements. These rules govern how the content of specified
elements should be displayed. A CSS rule contains two parts: a selector and a declaration.

Selectors indicate which element the rule applies to. The same rule can apply to more than one element if
you separate the element names with commas.

Declarations indicate how the elements referred to in the selector should be styled. Declarations are split
into two parts (a property and a value), and are separated by a colon.

This rule indicates that all <p> elements should be shown in the Arial font.

CSS declarations sit inside curly brackets and each is made up of two parts: a property and a value,
separated by a colon. You can specify several properties in one declaration, each separated by a semi-colon.

This example shows how we can group elements. We will learn more about the same later.
Linking CSS to HTML
Using Internal CSS
<style> : You can include CSS rules within an HTML page by placing them inside a <style> element, which
usually sits inside the <head> element of the page. The <style> element should use the type attribute to
indicate that the styles are specified in CSS. The value should be ‘text/css’.

Using External CSS


<link> : The <link> element can be used in an HTML document to tell the browser where to find the CSS
file used to style the page. It is an empty element (meaning it does not need a closing tag), and it lives inside
the <head> element.

It should use three attributes:

href : This specifies the path to the CSS file (which is often placed in a folder called css or styles).

type : This attribute specifies the type of document being linked to. The value should be text/css.

rel : This specifies the relationship between the HTML page and the file it is linked to. The value should be
style-sheet when linking to a CSS file.

An HTML page can use more than one CSS style sheet. To do this it could have a <link> element for every
CSS file it uses. For example, some authors use one CSS file to control the presentation (such as fonts and
colors) and a second to control the layout.
.
Using Inline CSS :

In this case the desired style is directly written on the target element using the ‘style’ attribute. Using inline
css is not recommended as it worsens the readability of the code.
CSS Selectors

There are many different types of CSS selector that allow you to target rules to specific elements in an
HTML document.

CSS selectors are case sensitive, so they must match element names and attribute values exactly.

1. Type/Tag Selector :

The element selector selects HTML elements based on the element name.

<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

Result :

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

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

Result :

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

Note: A class name should not be started with a number.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

Result :
4. Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then you should use the
element name with class selector.

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

Result :

5. Universal Selector

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

<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Summary of the selectors so far !!

How CSS Rules Cascade

If there are two or more rules that apply to the same element, it is important to understand which will take
precedence.

Last rule : If the two selectors are identical, the latter of the two will take precedence. Here you can see the
second i selector takes precedence over the first.

Specificity : If one selector is more specific than the others, the more specific rule will take precedence over
more general ones.
In the above example: ‘h1’ selector is more specific than ‘*’ selector . ‘p b’ selector is more specific than ‘p’
selector, ‘p#intro’ selector is more specific than ‘p’ selector.

IMPORTANT : You can add !important after any property value to indicate that it should be considered
more important than other rules that apply to the same element.

Understanding how CSS rules cascade means you can write simpler style sheets because you can create
generic rules that apply to most elements and then override the properties on individual elements that need
to appear differently.

Chapter Summary
 CSS treats each HTML element as if it appears inside its own box and uses rules to indicate how that
element should look.
 Rules are made up of selectors (that specify the elements the rule applies to) and declarations (that
indicate what these elements should look like).

 Different types of selectors allow you to target your rules at different elements.

 Declarations are made up of two parts: the properties of the element that you want to change, and the
values of those properties. For example, the font-family property sets the choice of font, and the value
arial specifies Arial as the preferred typeface.

 CSS rules usually appear in a separate document, although they may appear within an HTML page.
Understanding Color
Computer monitors are made up of thousands of tiny squares called pixels (if you look very closely at your
monitor you should be able to see them).

When the screen is not turned on, it's black because it's not emitting any light. When it's on, each pixel can
be a different color, creating a picture.

The color of every pixel on the screen is expressed in terms of a mix of red, green, and blue — just like on a
television screen.

Every color on a computer screen is created by mixing amounts of red, green, and blue. To find the color
you want, you can use a color picker.

Applying color to Texts


The color property allows you to specify the color of text inside an element. You can specify any color in
CSS in one of three ways:

rgb values : These express colors in terms of how much red, green and blue are used to make it up. For
example: rgb(100,100,90)

hex codes : These are six-digit codes that represent the amount of red, green and blue in a color, preceded
by a pound or hash # sign. For example: #ee3e80

color names : There are 147 predefined color names that are recognized by browsers. For example:
DarkCyan
Applying color to background
CSS treats each HTML element as if it appears in a box, and the background-color property sets the color of
the background for that box.

You can specify your choice of background color in the same three ways you can specify foreground colors:
RGB values, hex codes, and color names. If you do not specify a background color, then the background is
transparent.

By default, most browser windows have a white background, but browser users can set a background color
for their windows, so if you want to be sure that the background is white you can use the background-color
property on the <body> element.
RGB vs HEX vs Names
Opacity : opacity, rgba

CSS3 introduces the opacity property which allows you to specify the opacity of an element and any of its
child elements. The value is a number between 0.0 and 1.0 (so a value of 0.5 is 50% opacity and 0.15 is 15%
opacity).

The CSS3 rgba property allows you to specify a color, just like you would with an RGB value, but adds a
fourth value to indicate opacity. This value is known as an alpha value and is a number between 0.0 and 1.0
(so a value of 0.5 is 50% opacity and 0.15 is 15% opacity). The rgba value will only affect the element on
which it is applied (not child elements). Because some browsers will not recognize RGBA colors, you can
offer a fallback so that they display a solid color.

If there are two rules that apply to the same element, the latter of the two will take priority. To create the
fallback, you can specify a color as a hex code, color name or RGB value, followed by the rule that specifies
an RGBA value. If the browser understands RGBA colors it will use that rule. If it doesn't, it will use the
RGB value.
Chapter Summary

 Color not only brings your site to life, but also helps convey the mood and evokes reactions.

 There are three ways to specify colors in CSS: RGB values, hex codes, and color names.

 Color pickers can help you find the color you want.

 It is important to ensure that there is enough contrast between any text and the background color
(otherwise people will not be able to read your content).

 CSS3 has introduced an extra value for RGB colors to indicate opacity. It is known as RGBA.
Styling Texts with CSS

Choosing a font family with ‘font-family’

The font-family property allows you to specify the typeface that should be used for any text inside the
element(s) to which a CSS rule applies.

The value of this property is the name of the typeface/font-family you want to use.

The people who are visiting your site need the typeface you have specified installed on their computer in
order for it to be displayed.

You can specify a list of fonts separated by commas so that, if the user does not have your first choice of
typeface installed, the browser can try to use an alternative font from the list.

If a font name is made up of more than one word, it should be put in double quotes.
You can also add fonts from the popular web sites like https://fonts.google.com

I’m skipping describing how to add fonts from google and leaving the same as an exersize to you. You
should be able to do it by following the process in the browser. If you’re unable to do so please feel free to
ping me.

Sizing the font with font-size


The font-size property enables you to specify a size for the font. There are several ways to specify the size
of a font. The most common are:

Pixels : Pixels are commonly used because they allow web designers very precise control over how much
space their text takes up. The number of pixels is followed by the letters px.

Percentages : The default size of text in browsers is 16px. So a size of 75% would be the equivalent of
12px, and 200% would be 32px. If you create a rule to make all text inside the <body> element to be 75% of
the default size (to make it 12px), and then specify another rule that indicates the content of an element
inside the <body> element should be 75% size, it will be 9px (75% of the 12px font size).

You can refer the previous html snippet for reference.


Print designers often refer to the size of text in terms of points
rather than pixels (hence the use of pt in the scale on the left).

A pixel roughly equates to a point because a point


corresponds to 1/72 of an inch, and most computer displays
have a resolution of 72 dots per inch.

Setting font size in pixels is the best way to ensure that the
type appears at the size you intended (because percentages
and ems are more likely to vary if a user has changed the
default size of text in their browser).

Pixels are relative to the resolution of the screen, so the same


type size will look larger when a screen has a resolution of
800x600 than it would when it is 1280x800.

You can also use pt for point sizes instead of px for pixels,
but you should only do this when creating style sheets for
printer friendly versions of pages.
Font Family Terminology

Text Alignment and Placement


Making texts look bold using font-weight

The font-weight property allows you to create bold text. There are two values that this property commonly
takes:

normal : This causes text to appear at a normal weight.

bold : This causes text to appear bold. In this example, you can see that the element whose class attribute
has a value of credits has been bolded.

You might wonder why there is a normal weight. This is because if, for example, you created a rule for the
<body> element indicating that all text inside the body should appear bold, you might need an option that
allows the text in certain instances to appear normal weight. So it is essentially used as an "off switch."

Again you can refer the html snippet here

Styling Fonts with font-style

If you want to create italic text, you can use the font-style property. There are three values this property can
take:

normal : This causes text to appear in a normal style (as opposed to italic or oblique).

italic : This causes text to appear italic.

oblique : This causes text to appear oblique.


In this example, you can see that the credits have been italicized. Italic fonts were traditionally stylized
versions of the font based on calligraphy, whereas an oblique version would take the normal version and put
it on an angle.

It is not unusual for the browser to fail to find an italic version of a font-family, in which case it will use an
algorithm to place the normal version of the type on a slant, which means that a lot of italic text online is
actually oblique.

You can refer to the html template here

Making a text Uppercase and Lowercase

The text-transform property is used to change the case of text giving it one of the following values:

uppercase : This causes the text to appear uppercase.

lowercase : This causes the text to appear lowercase.

capitalize : This causes the first letter of each word to appear capitalized. In this example, the <h1> element
is uppercase, the <h2> element is lowercase, and the credits are capitalized. In the HTML, the word by in
the credits had a lowercase ‘b’.
You can refer the html template here

Underline & Strike with text-decoration

The text-decoration property allows you to specify the following values:

none : This removes any decoration already applied to the text.

underline : This adds a line underneath the text.

overline : This adds a line over the top of the text.

line-through : This adds a line through words.

blink : This animates the text to make it flash on and off (however this is generally frowned upon, as it is
considered rather annoying).

In the example below , the credits have been underlined. Also, the name of the breed (which is a link) is not
underlined, which it would be by default because it is a link.

This property is commonly used by designers to remove the underlines that browsers provide as a default for
anchor tags.
As always you can refer the html template here

Providing more spaces between the lines using line-height


Leading is a term typographers use for the vertical space between lines of text.

In a font-family, the part of a letter that drops beneath the baseline is called a descender, while the highest
point of a letter is called the ascender. Leading is measured from the bottom of the descender on one line to
the top of the ascender on the next.

In CSS, the line-height property sets the height of an entire line of text, so the difference between the
fontsize and the line-height is equivalent to the leading (as shown in the diagram above). Increasing the line-
height makes the vertical gap between lines of text larger.

Increasing the default amount of leading can make text easier to read. The vertical space between lines
should be larger than the space between each word as this helps the eye move along the line instead of down
them. A good starter setting is around 1.4 to 1.5em.
Letter & Word Spacing

You can control the space between each letter with the letter-spacing property.

It is particularly helpful to increase the space between each letter when your heading or sentence is all in
uppercase.

You can also control the gap between words using the word-spacing property.
And the above css is written for this html.

Text Alignment

The text-align property allows you to control the alignment of text. The property can take one of four values:

Left :This indicates that the text should be left-aligned.

Right : This indicates that the text should be right-aligned.

Center : This allows you to center text.

Justify : This indicates that every line in a paragraph, except the last line, should be set to take up the full
width of the containing box.
Indenting Text
The text-indent property allows you to indent the first line of text within an element. The amount you want
the line indented by can be specified in a number of ways but is usually given in pixels or ems.
CSS Pseudo-classes
A pseudo-class is used to define a special state of an element. Using pseudo class you can apply style based
on various states of an element.

For example, it can be used to:

1. Style an element when a user mouses over it

2. Style visited and unvisited links differently

3. Style an element when it gets focus

The most commonly used syntax for pseudo class :

Pseudo classes can be helpful for styling the links, consider the examples below :
CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

1. Style the first letter, or line, of an element


2. Insert content before, or after, the content of an element

The syntax of pseudo-elements :

The ::first-line pseudo-element is used to add a special style to the first line of a text. This only works with
block level elements.

The following example formats the first line of the text in all <p> elements:
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all <p> elements:

Pseudo-elements can be combined with CSS classes:


Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the
first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:
CSS Box Model

Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts
with CSS, or to align items with other items.

By default a box is sized just big enough to hold its contents. To set your own dimensions for a box you can
use the height and width properties.

The most popular ways to specify the size of a box are to use pixels, percentages, or ems. Traditionally,
pixels have been the most popular method because they allow designers to accurately control their size.

When you use percentages, the size of the box is relative to the size of the browser window or, if the box is
encased within another box, it is a percentage of the size of the containing box.

When you use ems, the size of the box is based on the size of text within it.
Limiting Height & Width

Some page designs expand and shrink to fit the size of the user's screen. In such designs, the min-width
property specifies the smallest size a box can be displayed at when the browser window is narrow, and the
max-width property indicates the maximum width a box can stretch to when the browser window is wide.

You may find it helpful to try this example out in your browser so that you can see what happens when you
increase or decrease the size of the browser window.

Max-width :
You can try this example in your editor and once you change the browser size you’ll see the changes.

Min width :

As always you can try this example out and once you resize your browser you’ll see the changes.
Limiting Height

In the same way that you might want to limit the width of a box on a page, you may also want to limit the
height of it. This is achieved using the min-height and max-height properties.

The example below demonstrates these properties in action. It also shows you what happens when the
content of the box takes up more space than the size specified for the box.

If the box is not big enough to hold the content, and the content expands outside the box it can look very
messy.
To control what happens when there is not enough space for the content of a box, you can use the overflow
property, which is discussed next.

Overflowing Content

The overflow property tells the browser what to do if the content contained within a box is larger than the
box itself. It can have one of two values:

hidden : This property simply hides any extra content that does not fit in the box.

scroll : This property adds a scrollbar to the box so that users can scroll to see the missing content.

On the bottom, you can see two boxes whose contents expand beyond their set dimensions. The first
example has the overflow property with a value of hidden. The second example has the overflow property
with a value of scroll.

By applying the value auto a scroll bar will always appear. You can set the value to ‘auto’, hence a scroll bar
appears when it is needed.
Border Padding Margin

Please look at the color coding in the picture to better understand margin padding and border.

“If you specify a width for a box, then the borders, margin, and padding are added to its width and height.” -
- this behaviour is coming from the property ‘box-sizing : content-box’. We will explore other possibilities
later in this chapter.
The padding and margin properties are very helpful in adding space between various items on the page.
Consider two images below :

If the bottom margin of any box touches the top margin of another, the browser will render it differently than
you might expect. It will only show the larger of the two margins. If both margins are the same size, it will
only show one. Or the margin bigger in the size wins.

Styling Borders
The border-width property is used to control the width of a border. The value of this property can either be
given in pixels or using one of the following values: “thin medium thick”.

You can control the individual size of borders using four separate properties:

 border-top-width
 border-right-width
 border-bottom-width
 border-left-width
You can also specify different widths for the four border values in one property, like so:

border-width: 2px 1px 1px 2px;

The values here appear in clockwise order: top, right, bottom, left.

Border Style

You can control the style of a border using the border-style property. This property can take the following
values:

solid : a single solid line


dotted : a series of square dots (if your border is 2px wide, then the dots are 2px squared with a 2px gap
between each dot)

dashed : a series of short lines

double : two solid lines (the value of the border-width property creates the sum of the two lines)

groove : appears to be carved into the page

ridge : appears to stick out from the page

inset : appears embedded into the page

outset looks : like it is coming out of the screen

hidden / none : no border is shown

You can individually change the styles of different borders using:

 border-top-style
 border-left-style
 border-right-style
 border-bottom-style
Border Color

You can specify the color of a border using either RGB values, hex codes or CSS color names. It is possible
to individually control the colors of the borders on different sides of a box using:

 border-top-color
 border-right-color
 border-bottom-color
 border-left-color

It is also possible to use a shorthand to control all four border colors in the one property:

border-color: darkcyan deeppink darkcyan deeppink;

The values here appear in clockwise order: top, right,bottom, left.


Border short hand : The border property allows you to specify the width, style and color of a border in one
property (and the values should be coded in that specific order).

Padding

The padding property allows you to specify how much space should appear between the content of an
element and its border.

The value of this property is most often specified in pixels (although it is also possible to use percentages or
ems). If a percentage is used, the padding is a percentage of the browser window (or of the containing box if
it is inside another box).

Please note: If a width is specified for a box, padding is added onto the width of the box. This happens when
the ‘box-sizing’ property is set to ‘content-box’.

You can specify different values for each side of a box using:

 padding-top
 padding-right
 padding-bottom
 padding-left

Or you can use a shorthand (where the values are in clockwise order: top, right, bottom, left):

padding: 10px 5px 3px 1px;


Margin

The margin property controls the gap between boxes. Its value is commonly given in pixels, although you
may also use percentages or ems.

If one box sits on top of another, margins are collapsed , which means the larger of the two margins will be
used and the smaller will be disregarded. This phenomenon is considered as margin collapsing. The Higher
margin wins.

Please note: If the width of a box is specified then the margin is added to the width of the box for the case
where ‘box-sizing : content-box’. You can specify values for each side of a box using:
 margin-top
 margin-right
 margin-bottom
 margin-left

You can also use the shorthand (where the values are in clockwise order: top, right, bottom, left):
margin: 1px 2px 3px 4px;

Sometimes you might see the following, which means that the left and right margins should be 10 pixels and
the top and bottom margins should be 20 pixels:
margin: 10px 20px;

(This same shorthand shown above can also be applied to padding.)


Controlling Images in CSS
The background-image property allows you to place an image behind any HTML element. This could
be the entire page or just part of the page. By default, a background image will repeat to fill the entire
box.
The path to the image follows the letters url(), and it is put inside parentheses and quotes. url() is a
CSS function which tells CSS where to look for the image in your filesystem.
Consider the example below where an image ‘paper.gif’ is applied to the entire body section :
<!DOCTYPE html>
<html>

<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>

<body>

<h1>The background-image Property</h1>

<p>Hello World!</p>

</body>

</html>

Result :

Consider the next example where the same background is applied only to the paragraph.
<!DOCTYPE html>
<html>

<head>
<style>
p {
background-image: url("paper.gif");
height: 100px
}
</style>
</head>

<body>

<h1>The background-image Property</h1>

<p>Hello World!</p>

</body>

</html>

Result :

Background images are often the last thing on the page to load (which can make a website seem slow
to load). As with any images you use online, if the size of the file is large it will take longer to
download.

Repeating Images
If the image is smaller than its targeted container then it will get repeated on the horizontal and the
vertical direction by default. We can control this behavior with ‘background-repeat’ position.
The background-repeat property can have four values:
repeat : The background image is repeated both horizontally and vertically (the default way it is shown
if the background-repeat property isn't used).
repeat-x :The image is repeated horizontally only (as shown in the first example on the left).
repeat-y : The image is repeated vertically only.
no-repeat : The image is only shown once.
<!DOCTYPE html>
<html>

<head>
<style>
body {
background-image: url("https://yari-demos.prod.mdn.mozit.cloud/en-
US/docs/Web/CSS/background-repeat/starsolid.gif");
}
</style>
</head>

<body>

<h1>The background-repeat Property</h1>


<p>Here, the background image is repeated only vertically.</p>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
<style>
body {
background-image: url("https://yari-demos.prod.mdn.mozit.cloud/en-
US/docs/Web/CSS/background-repeat/starsolid.gif");
background-repeat: repeat-x;
}
</style>
</head>

<body>

<h1>The background-repeat Property</h1>


<p>Here, the background image is repeated only vertically.</p>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
<style>
body {
background-image: url("https://yari-demos.prod.mdn.mozit.cloud/en-
US/docs/Web/CSS/background-repeat/starsolid.gif");
background-repeat: repeat-y;
}
</style>
</head>

<body>

<h1>The background-repeat Property</h1>


<p>Here, the background image is repeated only vertically.</p>

</body>

</html>
Follow this link for an interactive example for background-repeat.
The background-attachment property specifies whether a background image should stay in one
position or move as the user scrolls up and down the page. It can have one of two values:
fixed : The background image stays in the same position on the page.
Scroll : The background image moves up and down as the user scrolls up and down the page.
Follow this link for an interactive example for background attachment

Adjusting the image size to container


The background-size CSS property sets the size of the element's background image. The image can
be left to its natural size, stretched, or constrained to fit the available space.
The background-size property is specified in one of the following ways:
• Using the keyword values contain or cover.
• Using a width value only, in which case the height defaults to auto.
• Using both a width and a height value, in which case the first sets the width and the second sets
the height. Each value can be a <length>, a <percentage>, or auto.
To specify the size of multiple background images, separate the value for each one with a comma.
contain
Scales the image as large as possible within its container without cropping or stretching the image. If
the container is larger than the image, this will result in image tiling, unless the background-
repeat property is set to no-repeat.

cover
Scales the image as large as possible to fill the container, stretching the image if necessary. If the
proportions of the image differ from the element, it is cropped either vertically or horizontally so that
no empty space remains.
auto
Scales the background image in the corresponding direction such that its intrinsic proportions are
maintained.
<length>
Stretches the image in the corresponding dimension to the specified length. Negative values are not
allowed.
<percentage>
Stretches the image in the corresponding dimension to the specified percentage of the background
positioning area. The background positioning area is determined by the value of background-
origin (by default, the padding box). However, if the background's background-attachment value
is fixed, the positioning area is instead the entire viewport. Negative values are not allowed.
Example: follow this link for an interactive example for background-size.

Background Position
When an image is not being repeated, you can use the background-position property to specify where
in the browser window the background image should be placed.
This is a use case when the image is bigger than the target container and we want the image to fit the
container. Now in this approach the image is zoomed to fit to the container. Using this property we get
to decide how the zooming happens.
This property usually has a pair of values. The first represents the horizontal position and the second
represents the vertical.
You can follow this link for an interactive example for background-position
This property usually has a pair of values. The first represents the horizontal position and the second
represents the vertical.
If you only specify one value, the second value will default to center.
You can also use a pair of pixels or percentages. These represent the distance from the top left corner
of the browser window (or containing box). The top left corner is equal to 0% 0%.

CSS Gradients
The gradient is created using the background-image property. In CSS we have two types of gradients
: Linear Gradients and Radial Gradients.
Linear gradients: The linear-gradient() CSS function creates an image consisting of a progressive
transition between two or more colors along a straight line.
Consider different examples below for linear gradients.
background-image: linear-gradient(#e66465, #9198e5);
background-image: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-


gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg,
rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
Different Syntax
combinations for
linear gradients:

Radial Gradient: A radial gradient is created with the help of a ‘radial-gradient()’ function.
Consider the examples below for circular gradients:
background-image: radial-gradient(#e66465, #9198e5);
Background-image: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
Positioning elements with CSS
CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an
inline box.
Positioning context: A position in your viewport with respect which you’ll position the current element.
We have 3 types of positioning context:
1. Self
2. Parent
3. Entire HTML document view port
Block-level boxes start on a new line and act as the main building blocks of any layout, while inline boxes
flow between surrounding text. You can control how much space each box takes up by setting the width
of the boxes (and sometimes the height, too). To separate boxes, you can use borders, margins, padding,
and background colors.
Containing Elements
If one block-level element sits inside another block-level element then the outer box is known as the
containing or parent element.
It is common to group a number of elements together inside a <div> (or other block-level) element. For
example, you might group together all of the elements that form the header of a site (such as the logo and
the main navigation). The <div> element that contains this group of elements is then referred to as the
containing element.
A box may be nested inside several other block-level elements. The containing element is always the
direct parent of that element.

The orange lines in the above diagram represent <div> elements. The header (containing the logo and
navigation) is in one <div> element, the main content of the page is in another, and the footer is in a third.
The <body> element is the containing element for these three <div> elements. The second <div> element
is the containing element for two paragraphs of Latin text and images (represented by crossed squares).

Controlling the Position of Elements


CSS has the following positioning schemes that allow you to control the layout of a page: normal flow
(static positioning), relative positioning, absolute positioning, Fixed and Sticky Positioning. You specify
the positioning scheme using the position property in CSS.
Normal flow (position: static)
Every block-level element appears on a new line, causing each item to appear lower down the page than
the previous one. Even if you specify the width of the boxes and there is space for two elements to sit
side-by-side, they will not appear next to each other. This is the default behavior (unless you tell the
browser to do something else).
In this type of positioning, each block-level element sits on top of the next one. Since this is the default
way in which browsers treat HTML elements, you do not need a CSS property to indicate that elements
should appear in normal flow, but the syntax would be: position: static;
<!DOCTYPE html>
<html>

<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>

<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>

</body>

</html>
Result:

Relative Positioning (position: relative)


Relative positioning moves an element in relation to where it would have been in normal flow. As the
element is aligned with respect to itself, hence the positioning-context will be self . For example, you
can move it 10 pixels lower than it would have been in normal flow or 20% to the right.
You can indicate that an element should be relatively positioned using the position property with a value
of relative. You then use the offset properties (top or bottom and left or right) to indicate how far to
move the element from where it would have been in normal flow.
To move the box up or down, you can use either the top or bottom properties. To move the box
horizontally, you can use either the left or right properties. The values of the box offset properties are
usually given in pixels, percentages or ems.
<!DOCTYPE html>
<html>

<head>
<style>
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}

h1 {
background-color: #efefef;
padding: 10px;
}

p.example {
position: relative;
top: 10px;
left: 100px;
}
</style>
</head>

<body>

<h1>The Evolution of the Bicycle</h1>

<p class="example">In 1817 Baron von Drais invented a walking


machine that would help him get around the
royal gardens faster...
</p>

</body>

</html>

Result:

Absolute Positioning (position: absolute)


When the position property is given a value of absolute, the box is taken out of normal flow and no longer
affects the position of other elements on the page. (They act like it is not there.)
In the case of absolute positioning the positioning context is decided in two scenarios.
Scenario 1:
If the parent of the element we’re trying to position doesn’t have ‘position: relative’, then the entire
HTML document view port becomes the positioning context for the child, which means the child will be
positioned with respect to the HTML document view port. Consider the example below:
<!DOCTYPE html>
<html>

<head>
<style>
* {
margin: 0;
padding: 0;
}

.parent {
height: 200px;
width: 600px;
background-color: #aaa;
margin: 50px;
}

.child {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0
}
</style>
</head>

<body>

<div class="parent">
<div class="child"></div>
</div>

</body>

</html>

Result:
As we don’t have ‘position: relative’ set on the parent (grey color div) the positioning context for the
child (red color div) is the html document itself. This is why when you apply ‘top: 0’ it gets aligned with
respect to the top most corner of your view port.
Scenario 2:
If the parent of the element we’re trying to position has ‘position: relative’, then the parent becomes the
positioning context for the child, which means the child will be positioned with respect to the parent.
Consider the example below:
<!DOCTYPE html>
<html>

<head>
<style>
* {
margin: 0;
padding: 0;
}

.parent {
height: 200px;
width: 600px;
background-color: #aaa;
margin: 50px;
position: relative;
}

.child {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0
}
</style>
</head>

<body>

<div class="parent">
<div class="child"></div>
</div>

</body>

</html>
Result:

As we have ‘position: relative’ set on the parent (grey color div) the positioning context for the child (red
color div) is the parent itself. This is why when you apply ‘top: 0’ it gets aligned with respect to parent.

Fixed Positioning (position: fixed)


Fixed positioning is a type of absolute positioning that requires the position property to have a value of
fixed.
It positions the element in relation to the browser window, hence the positioning context the entire HTML
view port. Therefore, when a user scrolls down the page, it stays in the exact same place.
It is a good idea to try this example in your browser to see the effect. To control where the fixed position
box appears in relation to the browser window, the box offset properties (top, left, bottom, right) are used.
<!DOCTYPE html>
<html>

<head>
<style>
* {
margin: 0;
padding: 0;
}

h1 {
position: fixed;
top: 0px;
left: 50px;
padding: 10px;
margin: 0px;
width: 100%;
background-color: #efefef;
}

p.example {
margin-top: 100px;
padding-bottom: 1000px
}
</style>
</head>

<body>

<h1>The Evolution of the Bicycle</h1>


<p class="example">In 1817 Baron von Drais
invented a walking machine that would help him
get around the royal gardens faster...</p>

</body>

</html>

If you try to scroll up then the heading stays in its position and is not affected by scrolling. You can look
up this interactive example.

Sticky Positioning (position: sticky)


There is another position value available called position: sticky, which is somewhat newer than the others.
This is basically a hybrid between relative and fixed position, which allows a positioned element to act
like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the
viewport), after which it becomes fixed.
This can be used to for example cause a navigation bar to scroll with the page until a certain point, and
then stick to the top of the page.
Follow this link for an interactive example.

Overlapping Elements (z-index)


When you use relative, fixed, or absolute positioning, boxes can overlap. If boxes do overlap, the elements
that appear later in the HTML code sit on top of those that are earlier in the page.
If you want to control which element sits on top, you can use the z-index property. Its value is a number,
and the higher the number the closer that element is to the front. For example, an element with a z-index
of 10 will appear over the top of one with a z-index of 5.
Consider the example below:
<!DOCTYPE html>
<html>

<head>
<style>
* {
margin: 0;
padding: 0;
}

.parent {
height: 300px;
width: 600px;
background-color: #aaa;
margin: 50px;
position: relative;
}

.child1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}

.child2 {
height: 100px;
width: 100px;
background-color: green;
position: absolute;
top: 50px;
left: 50px;
z-index: 0;
}

.child3 {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
</style>
</head>

<body>

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>

</body>

</html>
In the above example we have 3 div’s (red, blue, green). Green div is having the lowest z-index hence
displayed at the bottom. Simultaneously Red div is having the highest z-index so it is displayed on the
top.
Introduction to Flex-box
The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and
order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
A flex container expands items to fill available free space or shrinks them to prevent overflow.
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is
vertically-based and inline which is horizontally-based).
While those work well for pages, they lack flexibility (no pun intended) to support large or complex
applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Basics and terminology


Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set
of properties.
Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the
others are meant to be set on the children (said “flex items”).
If “regular” layout is based on both block and inline flow directions, the flex layout is based on “flex-flow
directions”.

Items will be placed along either the main axis (from main-start to main-end) or the cross axis (from cross-
start to cross-end).
• main axis – The main axis of a flex container is the primary axis along which flex items are laid out.
Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).
• main-start | main-end – The flex items are placed within the container starting from main-start and
going to main-end.
• main size – A flex item’s width or height, whichever is in the main dimension, is the item’s main size.
The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main
dimension.
• cross axis – The axis perpendicular to the main axis is called the cross axis. Its direction depends on
the main axis direction.
• cross-start | cross-end – Flex lines are filled with items and placed into the container starting on the
cross-start side of the flex container and going toward the cross-end side.
• cross size – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross
size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

Flexbox properties for parent

display
This defines a flex container; inline or block depending on the given value. It enables a flex context for all its
direct children.

.container {
display: flex; /* or inline-flex */
}

flex-direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox
is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying
out either in horizontal rows or vertical columns.

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

These properties are explained below:


• row (default): left to right in ltr; right to left in rtl
• row-reverse: right to left in ltr; left to right in rtl
• column: same as row but top to bottom
• column-reverse: same as row-reverse but bottom to top

flex-wrap
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as
needed with this property.

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}

Follow this link for interactive example.


These properties are explained below:
• nowrap (default): all flex items will be on one line
• wrap: flex items will wrap onto multiple lines, from top to bottom.
• wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

flex-flow
This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s
main and cross axes. The default value is row nowrap.

.container {
flex-flow: column wrap;
}
justify-content

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the
flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some
control over the alignment of items when they overflow the line.

.container {
justify-content: flex-start | flex-end | center | space-between | space-around
| space-evenly | start | end | left | right ... + safe | unsafe;
}

These properties are explained below:


• flex-start (default): items are packed toward the start of the flex-direction.
• flex-end: items are packed toward the end of the flex-direction.
• start: items are packed toward the start of the writing-mode direction.
• end: items are packed toward the end of the writing-mode direction.
• left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-
direction, then it behaves like start.
• right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-
direction, then it behaves like end.
• center: items are centered along the line
• space-between: items are evenly distributed in the line; first item is on the start line, last item on the
end line
• space-around: items are evenly distributed in the line with equal space around them. Note that visually
the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one
unit of space against the container edge, but two units of space between the next item because that next
item has its own spacing that applies.
• space-evenly: items are distributed so that the spacing between any two items (and the space to the
edges) is equal.
Note that that browser support for these values is nuanced. For example, space-between never got support
from some versions of Edge, and start/end/left/right aren’t in Chrome yet. MDN has detailed charts. The safest
values are flex-start, flex-end, and center.
There are also two additional keywords you can pair with these values: safe and unsafe. Using safe ensures
that however you do this type of positioning, you can’t push an element such that it renders off-screen (e.g.
off the top) in such a way the content can’t be scrolled too (called “data loss”).

align-items

This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think
of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline |
last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
These properties are explained below:
• stretch (default): stretch to fill the container (still respect min-width/max-width)
• flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these
is subtle, and is about respecting the flex-direction rules or the writing-mode rules.
• flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle
and is about respecting flex-direction rules vs. writing-mode rules.
• center: items are centered in the cross-axis
• baseline: items are aligned such as their baselines align
The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords
(although note browser support), and deal with helping you prevent aligning elements such that the content
becomes inaccessible.

align-content

This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-
content aligns individual items within the main-axis.
Note: This property only takes effect on multi-line flexible containers, where flex-flow is set to
either wrap or wrap-reverse). A single-line flexible container (i.e. where flex-flow is set to its default
value, no-wrap) will not reflect align-content.

.container {
align-content: flex-start | flex-end | center | space-between | space-around |
space-evenly | stretch | start | end | baseline | first baseline |
last baseline + ... safe | unsafe;
}
• normal (default): items are packed in their default position as if no value was set.
• flex-start / start: items packed to the start of the container. The (more supported) flex-start honors
the flex-direction while start honors the writing-mode direction.
• flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-
direction while end honors the writing-mode direction.
• center: items centered in the container
• space-between: items evenly distributed; the first line is at the start of the container while the last one
is at the end
• space-around: items evenly distributed with equal space around each line
• space-evenly: items are evenly distributed with equal space around them
• stretch: lines stretch to take up the remaining space
The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords
(although note browser support), and deal with helping you prevent aligning elements such that the content
becomes inaccessible.

Flexbox properties for child

flex-grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a
proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all
children. If one of the children has a value of 2, the remaining space would take up twice as much space as
the others (or it will try to, at least).

.item {
flex-grow: 4; /* default 0 */
}

Negative numbers are invalid.


flex-shrink
This defines the ability for a flex item to shrink if necessary.

.item {
flex-shrink: 3; /* default 1 */
}
Negative numbers are invalid.
align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex
items.
Please see the align-items explanation to understand the available values.

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Note that float, clear and vertical-align have no effect on a flex item.
CSS Grids
CSS Grid Layout (aka “Grid”), is a two-dimensional grid-based layout system that aims to do nothing less than
completely change the way we design grid-based user interfaces.
CSS has always been used to lay out our web pages, but it’s never done a very good job of it. First, we used tables,
then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of
important functionality (vertical centering, for instance)
Flexbox helped out, but it’s intended for simpler one-dimensional layouts, not complex two-dimensional ones
(Flexbox and Grid actually work very well together).
Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our
way around for as long as we’ve been making websites.

Important terminology
Before diving into the concepts of Grid it’s important to understand the terminology.
Grid Container
The element on which display: grid is applied. It’s the direct parent of all the grid items. In this
example container is the grid container.

<div class="container">
<div class="item item-1"> </div>
<div class="item item-2"> </div>
<div class="item item-3"> </div>
</div>

Grid Item
The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-
item isn’t.

<div class="container">
<div class="item"> </div>
<div class="item">
<p class="sub-item"> </p>
</div>
<div class="item"> </div>
</div>

Grid Line
The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or
horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of
a column grid line.
Grid Cell
The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid. Here’s
the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

Grid Track
The space between two adjacent grid lines. You can think of them like the columns or rows of the grid. Here’s
the grid track between the second and third row grid lines.
Grid Area
The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells. Here’s
the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

Properties for the Parent (Grid Container)


For all examples for this section ‘.container’ is a class refers to the parent/grid container.
display
Defines the element as a grid container and establishes a new grid formatting context for its contents.
Values:
• grid – generates a block-level grid
• inline-grid – generates an inline-level grid

.container {
display: grid | inline-grid;
}

grid-template-columns
grid-template-rows
Defines the columns and rows of the grid with a space-separated list of values. The values represent the track
size, and the space between them represents the grid line.
Values:
• <track-size> – can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)
• <line-name> – an arbitrary name of your choosing

.container {
grid-template-columns: ... | ...;
grid-template-rows: ... | ...;
}
Examples:
When you leave an empty space between the track values, the grid lines are automatically assigned positive and
negative numbers:

.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}

If your definition contains repeating parts, you can use the repeat() notation to streamline things:
.container {
grid-template-columns: repeat(3, 20px); /* this will create 3 column of 20px width */
grid-template-rows: repeat(3, 20px); /* will create 3 rows of 20px width */
}

As you can see the counting for row starts from top → bottom , in this example 1 → 4.
For columns the counting starts from left → right, in this example 1 → 6
When counting row and column if you count in the reverse direction the row and column numbers are preceeded
by a negative sign (look example).
Naming the rows and columns:
From the above example it is clear that if we don not specify any row and column name then numbers get assigned
to them. Naming will be important when we will apply child related grid properties.
For assigning row and column name consider the example below:
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto
[col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

According to the example above we will have the above construct.


If we want same name for rows and same name for columns we can take help of ‘repeat()’, consider the example
below:
.container {
grid-template-columns: repeat(
3,
20px [col]
); /* this will create 3 column of 20px width */
grid-template-rows: repeat(
3,
20px [row]
); /* will create 3 rows of 20px width */
}
With the example above we will have 3 columns with name ‘col’ where each column is 20px wide. We will also
have 3 rows with name ‘row’ each 20px wide.

The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example,
this will set each item to one third the width of the grid container:

.container {
grid-template-columns: 1fr 1fr 1fr;

The free space is calculated after any non-flexible items. In this example the total amount of free space
available to the fr units doesn’t include the 50px:

.container {
grid-template-columns: 1fr 50px 1fr 1fr;

grid-template-areas
Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property.
Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell. The
syntax itself provides a visualization of the structure of the grid.
Values:
• <grid-area-name> – the name of a grid area specified with grid-area
• . – a period signifies an empty grid cell
• none – no grid areas are defined
syntax:
.container {
grid-template-areas:
' | . | none | ...'
'...';
}

example

.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}

.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
'header header header header'
'main main . sidebar'
'footer footer footer footer';
}

That’ll create a grid that’s four columns wide by three rows tall. The entire top row will be composed of
the header area. The middle row will be composed of two main areas, one empty cell, and one sidebar area. The
last row is all footer.
Each row in your declaration needs to have the same number of cells.
You can use any number of adjacent periods to declare a single empty cell. As long as the periods have no spaces
between them they represent a single cell.
Notice that you’re not naming lines with this syntax, just areas. When you use this syntax the lines on either end
of the areas are actually getting named automatically. If the name of your grid area is foo, the name of the area’s
starting row line and starting column line will be foo-start, and the name of its last row line and last column line
will be foo-end. This means that some lines might have multiple names, such as the far left line in the above
example, which will have three names: header-start, main-start, and footer-start.

column-gap
row-gap
Specifies the size of the grid lines. You can think of it like setting the width of the space between the
columns/rows.
Values:
• <line-size> – a length value
.container {
/* standard */
column-gap: <line-size>;
row-gap: <line-size>;
}

Example:
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
column-gap: 10px;
row-gap: 15px;
}

The gutters are only created between the columns/rows, not on the outer edges.
Note: The grid- prefix will be removed and grid-column-gap and grid-row-gap renamed to column-gap and row-
gap.

justify-items
Aligns grid items along the inline (row) axis (as opposed to align-items which aligns along the block
(column) axis). This value applies to all grid items inside the container.
Values:
• start – aligns items to be flush with the start edge of their cell
• end – aligns items to be flush with the end edge of their cell
• center – aligns items in the center of their cell
• stretch – fills the whole width of the cell (this is the default)
.container {
justify-items: start | end | center | stretch;
}

Examples:
.container {
justify-items: start;
}

.container {
justify-items: end;
}

.container {
justify-items: center;
}

.container {
justify-items: stretch;
}

This behavior can also be set on individual grid items via the justify-self property.

align-items
Aligns grid items along the block (column) axis (as opposed to justify-items which aligns along the inline
(row) axis). This value applies to all grid items inside the container.
Values:
• start – aligns items to be flush with the start edge of their cell
• end – aligns items to be flush with the end edge of their cell
• center – aligns items in the center of their cell
• stretch – fills the whole height of the cell (this is the default)

.container {
align-items: start | end | center | stretch;
}

Examples:

.container {
align-items: start;
}
.container {
align-items: end;
}

.container {
align-items: stretch;
}

This behavior can also be set on individual grid items via the align-self property.

justify-content

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of
your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within
the grid container. This property aligns the grid along the inline (row) axis (as opposed to align-content which
aligns the grid along the block (column) axis).
Values:
• start – aligns the grid to be flush with the start edge of the grid container
• end – aligns the grid to be flush with the end edge of the grid container
• center – aligns the grid in the center of the grid container
• stretch – resizes the grid items to allow the grid to fill the full width of the grid container
• space-around - places an even amount of space between each grid item, with half-sized spaces on the far
ends
• space-between – places an even amount of space between each grid item, with no space at the far ends
• space-evenly – places an even amount of space between each grid item, including the far ends

.container {
Justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
Examples:
.container {
Justify-content: start;
}

.container {
Justify-content: end;
}
.container {
Justify-content: center;
}

.container {
Justify-content: stretch;
}
.container {
Justify-content: space-around;
}

.container {
Justify-content: space-between;
}

.container {
Justify-content: space-evenly;
}
align-content
Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of
your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within
the grid container. This property aligns the grid along the block (column) axis (as opposed to justify-
content which aligns the grid along the inline (row) axis).
Values:
• start – aligns the grid to be flush with the start edge of the grid container
• end – aligns the grid to be flush with the end edge of the grid container
• center – aligns the grid in the center of the grid container
• stretch – resizes the grid items to allow the grid to fill the full height of the grid container
• space-around – places an even amount of space between each grid item, with half-sized spaces on the
far ends
• space-between – places an even amount of space between each grid item, with no space at the far ends
• space-evenly – places an even amount of space between each grid item, including the far ends

.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

Examples:
.container {
align-content: start;
}
.container {
align-content: end;
}

.container {
align-content: center;
}
.container {
align-content: stretch;
}

.container {
align-content: space-around;
}
.container {
align-content: space-between;
}

.container {
align-content: space-evenly;
}
Properties for the Children
(Grid Items)
Note: float, display: inline-block, display: table-cell, vertical-align and column-* properties have no effect
on a grid item.

grid-column-start,
grid-column-end,
grid-row-start,
grid-row-end:
Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start/grid-row-
start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.
Values:
• <line> – can be a number to refer to a numbered grid line, or a name to refer to a named grid line
• span <number> - the item will span across the provided number of grid tracks
• span <name> – the item will span across until it hits the next line with the provided name
• auto – indicates auto-placement, an automatic span, or a default span of one
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

Examples:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
}

.parent {
width: 500px;
height: 100vh;

display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: repeat(3, 100px);

.parent div {
border: solid 1px cyan;
background-color: brown;
}

.item-a {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 4;
}
</style>
</head>

<body>
<div class="parent">
<div>1</div>
<div>2</div>
<div class="item-a">3</div>
<div>4</div>
</div>
</body>

</html>

Result:
This Completes your CSS

Do Practice.

You might also like