CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.
place-self
CSS place-self is a shorthand property that aligns the individual items in both block and inline directions simultaneously, similar to properties like align-self and justify-self in layout systems like Grid or Flexbox. The first value is used if the second value is not set.
This property is a shorthand for the following CSS properties:
﻿align-self﻿
﻿justify-self﻿
Possible Values
auto − Aligns the item based on the parent's align-self value.
normal− Based on the layout mode, the effect of normal keyword changes:
Behaves like start on replaced absolutely-positioned boxes, and as stretch in all other absolutely-positioned boxes, when the layout is absolutely-positioned.
Behaves like stretch in static position of absolutely-positioned layouts.
Behaves like stretch for flex items.
Behaves similar to stretch for grid items, except for the boxes which have an aspect ratio or an intrinsic size where it behaves like start.
Does not apply to block-level boxes , and to the table cells.
self-start− Items are aligned to the edge of the alignment container corresponding to the start side of the item, in the cross-axis.
self-end − Items are aligned to the edge of the alignment container corresponding to the end side of the item, in the cross-axis.
flex-start − Aligns the cross-start margin edge of the flex item with the cross-start edge of the line.
flex-end− Aligns the cross-end margin edge of the flex item with the cross-end edge of the line.
center− Margins of flex-item box is centered within the line on the cross-axis. When the cross-size of an element is larger than the container, the content overflows equally in both directions.
baseline, first baseline, last baseline −
First baseline, and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items.
These values specify the involvment of first- or last-baseline alignment in the alignment of the content.
start is the fallback alignment for first-baseline and end for last-baseline.
stretch − When the combined size of the items along with the cross-axis is less than the size of the container, and the item is sized as auto, its size is increased equally, maintaining the values of max-height / max-width.
Applies To
Block-level boxes, absolutely-positioned boxes, and grid items.
Syntax
Keyword Values
place-self: auto center;
place-self: normal start;
Positional Alignment
place-self: center normal;
place-self: start auto;
place-self: end normalCSS place-self is a shorthand property that aligns the individual items in both block and inline directions simultaneously, similar to properties like align-self and justify-self in layout systems like Grid or Flexbox. The first value is used if the second value is not set.
﻿
This property is a shorthand for the following CSS properties:
﻿
align-self
﻿
justify-self
﻿
Possible Values
auto − Aligns the item based on the parent's align-self value.
﻿
normal− Based on the layout mode, the effect of normal keyword changes:
﻿
Behaves like start on replaced absolutely-positioned boxes, and as stretch in all other absolutely-positioned boxes, when the layout is absolutely-positioned.
﻿
Behaves like stretch in static position of absolutely-positioned layouts.
﻿
Behaves like stretch for flex items.
﻿
Behaves similar to stretch for grid items, except for the boxes which have an aspect ratio or an intrinsic size where it behaves like start.
﻿
Does not apply to block-level boxes , and to the table cells.
﻿
self-start− Items are aligned to the edge of the alignment container corresponding to the start side of the item, in the cross-axis.
﻿
self-end − Items are aligned to the edge of the alignment container corresponding to the end side of the item, in the cross-axis.
﻿
flex-start − Aligns the cross-start margin edge of the flex item with the cross-start edge of the line.
﻿
flex-end− Aligns the cross-end margin edge of the flex item with the cross-end edge of the line.
﻿
center− Margins of flex-item box is centered within the line on the cross-axis. When the cross-size of an element is larger than the container, the content overflows equally in both directions.
﻿
baseline, first baseline, last baseline −
﻿
First baseline, and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items.
﻿
These values specify the involvment of first- or last-baseline alignment in the alignment of the content.
﻿
start is the fallback alignment for first-baseline and end for last-baseline.
﻿
stretch − When the combined size of the items along with the cross-axis is less than the size of the container, and the item is sized as auto, its size is increased equally, maintaining the values of max-height / max-width.
﻿
Applies To
Block-level boxes, absolutely-positioned boxes, and grid items.
﻿
Syntax
Keyword Values
place-self: auto center;
place-self: normal start;
Positional Alignment;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
Baseline Alignment
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;
CSS place-self - normal start Value
The following example demonstrates the place-self: normal start property aligns Item 2 to the start of its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: normal start;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>
CSS place-self - auto center Value
The following example demonstrates the place-self: auto center property aligns Item 2 at the center of its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: auto center;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>
CSS place-self - center normal Value
The following example demonstrates the place-self: center normal property aligns Item 2 at the center horizontally and vertically of its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: center normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>
CSS place-self - end normal Value
The following example demonstrates the place-self: end normal property aligns Item 2 on the right edge of its grid cell vertically and horizontally to the top edge of its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: end normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>
CSS place-self - start auto Value
The following example demonstrates the place-self: start auto property aligns Item 2 to the start of its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: start auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>
CSS place-self - self-start auto Value
The following example demonstrates the place-self: self-start auto property positioned Item 2 at the start of the row vertically and automatically in the horizontal direction 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: self-start auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html> 
CSS place-self - self-end normal Value
The following example demonstrates the place-self: self-end normal property aligns Item 2 to the bottom vertically and horizontally to the start of its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: self-end normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html> 
CSS place-self - flex-start auto Value
The following example demonstrates the place-self: flex-start auto property aligns Item 2 to the left edge vertically and horizontally to the top of its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: flex-start auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html> 
CSS place-self - flex-end normal Value
The following example demonstrates the place-self: flex-end normal property aligns Item 2 to the right edge of its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: flex-end normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html> 
CSS place-self - baseline normal Value
The following example demonstrates the place-self: baseline normal property aligns Item 2 to the baseline of its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: baseline normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html> 
CSS place-self - last baseline normal Value
The following example demonstrates the place-self: last baseline normal property aligns Item 2 to the baseline of the last row of its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: last baseline normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html> 
CSS place-self - stretch auto Value
The following example demonstrates the place-self: stretch auto property stretches Item 2 horizontally to fill the available space in its grid cell 
<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      min-height: 50px;
   }
   .item2 {
      place-self: stretch auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html> 
﻿
﻿
﻿
﻿
﻿


﻿
CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

place-self

Possible Values

Applies To

Syntax

Keyword Values

Positional Alignment

Baseline Alignment

CSS place-self - normal start Value

CSS place-self - auto center Value

CSS place-self - center normal Value

CSS place-self - end normal Value

CSS place-self - start auto Value

CSS place-self - self-start auto Value

CSS place-self - self-end normal Value

CSS place-self - flex-start auto Value

CSS place-self - flex-end normal Value

CSS place-self - baseline normal Value

CSS place-self - last baseline normal Value

CSS place-self - stretch auto Value
