Difference between revisions of "CS49"

From Coder Merlin
(Created page with "== HTML Class Attribute == === Formatting the class attribute === The tag .class is often used to attribute specific formatting styles (font, color, size, etc.) to multiple elements under that class. === Example: === .city { background-color: tomato; color: white; margin: 20px; padding: 20px; } In the above example, the class is named "city" and has specific formatting styles attached to it. To apply the class to multiple elements, you would use this sy...")
 
m (Editorial review and minor corrections)
 
(8 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== HTML Class Attribute ==
== CSS Grid ==


=== Formatting the class attribute ===
=== Introduction ===
To organize the different elements in a web page, websites often follow a specific layout. Many of them use the CSS Grid Layout, which uses rows and columns to make it easier for designing. In this lesson, you will learn how to use this property so you can create a basic layout for your website!


The tag .class is often used to attribute specific formatting styles (font, color, size, etc.) to multiple elements under that class.  
=== The Basics ===
A grid layout consists of a parent element, with one or more child elements. To display a grid, use this syntax:
<syntaxhighlight>
.grid-container {
  display: grid;
}
</syntaxhighlight>


=== Example: ===
To add a grid item, use this syntax:
<syntaxhighlight>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
</div>
</syntaxhighlight>


  .city {
Grid items have vertical lines called ''columns'', horizontal lines called ''rows'', and spaces between each column and row called ''gaps''. To adjust the gap size for these properties, use any of these code segments:
  background-color: tomato;
  color: white;
  margin: 20px;
  padding: 20px;
  }


In the above example, the class is named "city" and has specific formatting styles attached to it. To apply the class to multiple elements, you would use this syntax:
===== column-gap: =====
<syntaxhighlight>
.grid-container {
  display: grid;
  column-gap: 50px;
}
</syntaxhighlight>


  <div class="city">
===== row-gap: =====
   <p>London</p>
<syntaxhighlight>
   </div>
.grid-container {
   display: grid;
   row-gap: 50px;
}
</syntaxhighlight>


  <div class="city">
===== gap: =====
   <p>Paris</p>
The gap property is a shorthand property for the row-gap and the column-gap properties.
   </div>
<syntaxhighlight>
.grid-container {
   display: grid;
   gap: 50px 100px;
}
</syntaxhighlight>


  <div class="city">
=== Conclusion ===
  <p>Tokyo</p>
Believe it or not, this is just the beginning of CSS Grid Layout!
  </div>
 
As you can see, the tag <div class="city"> will apply the formatting styles defined under the class ".city" to the heading tags that say London, Paris, and Tokyo.
 
 
=== Purpose ===
 
The purpose of the HTML class attribute is to keep your code short and neat and to save time.

Latest revision as of 19:59, 8 February 2023

Within these castle walls be forged Mavens of Computer Science ...
— Merlin, The Coder

CSS Grid[edit]

Introduction[edit]

To organize the different elements in a web page, websites often follow a specific layout. Many of them use the CSS Grid Layout, which uses rows and columns to make it easier for designing. In this lesson, you will learn how to use this property so you can create a basic layout for your website!

The Basics[edit]

A grid layout consists of a parent element, with one or more child elements. To display a grid, use this syntax: 

.grid-container {
  display: grid;
}

To add a grid item, use this syntax: 

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

Grid items have vertical lines called columns, horizontal lines called rows, and spaces between each column and row called gaps. To adjust the gap size for these properties, use any of these code segments:

column-gap:[edit]
.grid-container {
  display: grid;
  column-gap: 50px;
}
row-gap:[edit]
.grid-container {
  display: grid;
  row-gap: 50px;
}
gap:[edit]

The gap property is a shorthand property for the row-gap and the column-gap properties. 

.grid-container {
  display: grid;
  gap: 50px 100px;
}

Conclusion[edit]

Believe it or not, this is just the beginning of CSS Grid Layout!

Retrieved from "https://www.codermerlin.academy/wiki/index.php?title=CS49&oldid=18256"