CSS #3

Tools like GitHub Copilot, ChatGPT, and various web design tools can generate CSS for you. So why are we still learning it?

Think of it like architecture: architects don't lay bricks themselves, but they must understand structural principles to design buildings that stand up.

English (natural language) is the new programming language that values high-level design, vision, and taste where individuals can be the author of highly catered software as architects, rather than mastery of code.... but you still need to know what you're asking for.

The Box Model

Every HTML element is treated as a rectangular box made of four layers (from inside out):

• Content — the text or image inside the element
• Padding — space between the content and the border
• Border — the visible line around the padding
• Margin — space outside the border, separating this element from neighbors

Sample file [09_border.html]

• border-style property: specifies type of border.
  
  
  • value: none, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit
  
  
• border-width property: specifies how wide the border around the box should be
  
  
• border-color property: specifies the color
  
  

Or if you choose, you can use a shortcut property:

• selector { border: style width color;}

body {
  border-style: solid; /* none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit */
  border-width: 1px;
  border-color: blue;
}

div {
  border: solid 3px red;
}

Sample file [09_border.html]

• Margin: white space outside the border
• Padding: white space inside the border

body{
  border: solid 1px blue;
  padding: 5px;
  margin: 10px;
}

p {
  border: dashed 2px;
  background: gray;
  padding: 10px;
  margin: 15px;
}

Options for Margins and Padding

p {
 margin: 10px;  /* 10px around top, right, bottom, left */
}

div {
 margin: 10px  20px; /* 10px top and bottom, 20px right and left */
}

body {
 margin: 10px 20px 30px 40px /* 10px top, 20px right, 30px bottom, 40px left in clockwise order */ 
}


img {
  margin-top: 10px;
  margin-left: 5px;
}

Sample file [09_border.html]

• Block-level elements (eg. div) have line-breaks before and after the element and are wide as the container you place them in, and you can modify its height and width using CSS.
  
  
• Inline elements: (eg. span) are wide as they need to be to display their contents. It does not have line-breaks before or after the element
  
  

You can change whether an element is block or inline by using the "display" property with three possible values (block, inline, and none). List items by default is a block element, and hence every list element is listed in a new line like this:

  item 1
  item 2
  item 3
  item 4

If you want them to appear inline:

li {
     display: inline;
}

and it will be displayed like this:

  item 1   item 2   item 3   item 4

To control the size of the block, use width and height properties.

div {
   width: 80%;      /* 80% of browser width */
   height: 500px;  /* 500px tall */
}

If the contents are larger than the box:

div {
     width: 80%;
     height: 500px;
     overflow: hidden; /* visible, hidden, scroll, auto */
}

height: 100%; 

Without the fix, html and body have no explicit height, so height:100% on the div has nothing to measure against.

<html>
<head>
<style>
  div { height:100%; background:magenta; }
</style>
</head>
<body>
  <div>height:100% on this div, but html/body are left at their default height.</div>
</body>
</html>

With the fix, html and body are also set to height:100%, so the div has something to be 100% of.

<html>
<head>
<style>
  html, body { height:100%; margin:0; }
  div { height:100%; background:magenta; }
</style>
</head>
<body>
  <div>Now html, body, and this div are all height:100%.</div>
</body>
</html>

Sample file [11_content_complete.html]

• position property
  
  
  • static value: default (everything flows down the page from left to right, top to bottom)
  • relative value: positions the element relative to its normal position
  • absolute value: locates the elements where you specify
  • fixed value: fixes the element in place even if the page is scrolled (may not work on all browsers)

Used in together with the top, left, bottom, and right properties that specify a corner

 /* this will be placed 10px, 100px from the top of the browser window */
.intro {
     position: absolute;
     top: 10px;
     left: 100px;
}

/* this will be placed 20px upward relative to where it would be otherwise */
.abstract {
     position: relative;
     top: -20px;
}

CSS Grid is designed for two-dimensional layout placing items into rows and columns at the same time, like a spreadsheet or floorplan.

Set display: grid on the container, then define your columns and rows:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3 columns; middle is twice as wide */
  grid-template-rows: auto auto;       /* 2 rows; height fits content */
  gap: 15px;                           /* space between all cells */
}

Key concepts:

• grid-template-columns / grid-template-rows: define track sizes using px, %, or fr
• fr unit: fraction of available space — 1fr 1fr 1fr = three equal columns
• repeat(): shorthand — repeat(3, 1fr) is the same as 1fr 1fr 1fr
• gap: spacing between grid cells
• Items can span multiple cells: grid-column: 1 / 3; (spans from line 1 to line 3)

CSS Grid @ w3schools

Rule of thumb: Use Grid for the overall page structure, Flexbox for the items inside each section, and float only when you want text to flow around an image.

In practice, Flexbox and Grid are often used together on the same page.

Goal: reproduce the same target layout three times using an AI coding agent to write the CSS, moving through three levels of vocabulary as you go: first precise CSS/HTML terms, then plain English, then an image with no words at all. Your job each time is to write a precise description, constrain which technique the agent is allowed to use, and judge whether the result matches.

Files:
Starting file (unstyled): dml_layout.html
Layout target for Versions 1 and 2 (black & white): css_screen_capture_bw.png
Full design target for Version 3 (color included): css_screen_capture.png