HTML/CSS Tips #

This page is dedicated to HTML and CSS tips. Let the teachers know if you would like us to add any content.

CSS Cheat Sheets #

🔗 Here are a few helpful links to reference CSS properties:

• CSS Properties Cheat Sheet
• CSS Interactive Cheat Sheet
• Mozzila CSS Tutorials
• w3 CSS wiki

CSS Challenges #

🔗 Here are solutions to the CSS Challenges on Codepen:

• challenge 1
• challenge 2

Flexbox Guide #

💡 The display: flex property is an incredibly useful CSS property to apply flexible and layouts. It can be used to create responsive layouts and side-by-side content.

📖 Here are two helpful resources for using a flexbox

• flexbox guide
• flexbox grid tutorial

[Centering Content Vertically] #

We often want content to be centered vertically and horizontally in a box.

💻 Try resizing the browser window - notice how the box is responsive and resizes depending on the screen size.

👀 This is the html code for the columns above.

learn more about using a Class here

<div class="centered_content">
    <p>Hello, World</p>
</div>

👀 This is the css for the two classes: center_example-grid.

learn more flex and flexbox properties here

.centered_content{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(200, 243, 203);
}

the . before the centered_content name, tell the CSS to select the HTML element with that class name

[Equally Sized Columns] #

We often want content size-by-side in two equally sized columns.

💻 Try resizing the browser window - notice how the boxes are responsive and resize and rearrange depending on the screen size.

The background color is not required - it is just used here to illustrate the different columns

👀 This is the html code for the columns above.

<div class="flexbox-grid" >
  <div class="column"">
    <h3>column</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div class="column" >
    <h3>column</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </div>
</div>

👀 This is the css for the two classes: flexbox-grid and column grid.

.flexbox-grid{
    display: flex;
    gap: 20px; 
}

.column{
    background-color: rgb(255, 243, 203);
    padding: 0px 20px;
    flex: 1;
}

[Unevenly Sized Columns] #

What if we want content size-by-side in two un-equally sized columns?

💻 Try resizing the browser window - notice how the boxes are responsive and maintain the relative size ratio. They also stack if the window is too small.

The background colors are not required - it is just used here to illustrate the different columns

👀 This is the html code for the columns above.

<div class="flexbox-grid">
  <div class="column">
    <h3>column 1</h3>
    <p>Suspendisse luctus dapibus consequat.</p>
  </div>

  <div class="column" id="col-large">
    <h3>column 2</h3>
    <p>Vivamus pellentesque molestie odio, eu porttitor dui pharetra id. Nunc tempus tristique tortor, sit amet pellentesque magna accumsan sed. Nullam posuere nunc eu libero rutrum sodales. Duis congue scelerisque odio eu suscipit. Nunc at ligula non libero viverra dapibus. In sit amet lacinia odio.</p>
  </div>
</div>

👀 This is the css for the two classes: flexbox-grid and column grid. Notice, it uses two of the same CSS classes, flexbox-grid and columns and the example above.

.flexbox-grid{
    display:flex;
    gap: 20px; 
}

.column{
    background-color: rgb(255, 243, 203);
    padding: 0px 20px;
    flex: 1;
}

#col-large{
    background-color: rgb(255, 216, 216);
    flex-grow: 3; 
}

• # - is used to apply rules to a CSS ID
• flex-grow - this makes col-2 3x as big