828-367-7588 gary@irishguy.us
CSS – 01 Styles

CSS – 01 Styles

by | Nov 2, 2021 | CSS, Front End Developer

What better way to showcase the fundamental elements of CSS than starting with the most basic tags styled with CSS.

Header 01

Header 02

Header 03

Header 04

Header 05
Header 06

Paragraph Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

List Types

Definition List

Definition List Title
This is a definition list division.
This is a second definition list item.

Ordered List

  1. Item one.
  2. Item two.

Unordered List

  • Item one.
  • Item two.

Tables

Responsive Table Layout
Person Due Date Amount Period
Billie 04/01/2016 $1,190 03/01/2016 – 03/31/2016
Jill 03/01/2016 $2,443 02/01/2016 – 02/29/2016
Jamie 03/01/2016 $1,181 02/01/2016 – 02/29/2016
Robin 02/01/2016 $842 01/01/2016 – 01/31/2016

Misc. Formatting Sub, Sup, Pre, Acronym, Abbr, and Code

Subscript

Subscript is the word, letter, object, or symbol positioned below the line.

Superscript

Superscript is the word, letter, figure, or symbol positioned above the line.

Cite

How to Cite Content

Pre.

Preformatted Text is presented exactly as written in the HTML file. To preserve typograpical formatting that affects the meaning of the content. Such as in poems, or lines of code, ASCII art, and transcripts.

Acronym Tag

Acronym have a title tag added to the Acronym – in this case the title is National Basketball Association. NBA

Abbreviation Tag

A hidden Title Tag for the Abbreviation

Lenion AVE.

Blockquote

“Blockquotes are used to quote content from another source – can often be enclosed with quote marks”

– My name is prince

Code

The code tag provides a method to display code content with fixed letter size, font, and spacing.

Forms

The Form Tag is used for creating forms from the user. With a range of different form elements.

Form Element – Text Box Input

Capture short text answers.

Form Element – Password Input






Form Element – Text Area Input

The textarea element lets your users answer in their own words (with limits).

Form Element – Select Drop Down

Form Element – Check Box

How I Like to Travel





Form Element – Radio Input

The radio button allows the user to select only one anwser of many answers.

Choose your favorite Web language:

   
   
   

Form Element – File Input

Have the user upload a file.


Form Element – Submit Button

A form is nothing without a submit button.

CSS – 01 Styles

CSS – 02 Box Model

by | Nov 1, 2021 | CSS, Front End Developer

Demonstrating the Box Model

What better way to showcase the fundamental elements of CSS than starting with the most basic tags styled with CSS.

Box Model

The CSS box model is essentially a box that wraps around every HTML element.

The content of the box has:

  • 2em padding
  • 20px margin
  • Border 2em Tomato Solid

CSS Values:

  • Width = 100%
  • background-color: LightSteelBlue;
  • padding: 2em;
  • border: 4px solid tomato;
  • background-color: LightSteelBlue;
  • box-shadow: inset 0.2em 0.2em steelblue;

Demonstrating Box Model with Grid and Flex

Column One

Column One

Column One

CSS Values:

  • grid-template-columns: repeat(3, 1fr)
  • grid-template-rows: 100px;
  • column-gap: 10px;
  • border: 4px solid tomato;
  • background-color: LightSteelBlue;
  • display: flex;

CSS – 04 Flexbox

by | Oct 1, 2021 | CSS, Front End Developer

With just a few lines of code. The display blocks can load as Flex Blocks with a Flex-Direction.

When setting the parent element for Flexbox to display: flex.
The children elements will automatically align left-to-right.

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

With one line of code (flex-direction: column;) the child content now loads in columns (and not a row).

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

Flex-Direction = Row-Reverse

Using Flex-Direction to Row-Reverse the order the row content loads.

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

Flex-Direction = Column Reverse

Using Flex-Direction to Column-Reverse the order the Column content loads.

Child 1
Child 2
Child 3
Child 4
Child 5
Child 6
Child 7
Child 8

Flex-Direction = Justify Content

Maybe one of the most popular uses for Flex Direction. Justify Content to evenly load, or center, or set to the right or left. The Justify Content is a power layout tool.

Flex-Direction = Fix Align Items

Using the Cross Axis (top to bottom). The Fix Align Items is a powerful way to justify content and align items together.

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch (height must be set to auto).

Flex-Direction = Align Self

Align-self allows the alignment of a single item to be targeted and changed.

Flex Wrap

Flex Wrap works to fit all elements in one row. Unless the Flex Wrap property is adjusted by the following.

flex-wrap: nowrap

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

flex-wrap: wrap

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

flex-wrap: wrap-reverse

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Flex Flow

Flex flow combines to use of flex-direction and flex-wrap into the Flex Flow property.

  • flex-flow: column wrap

Align Content with Flexbox

Align Content only impacts content on the cross axis that is more than one line long using the following options.

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch

Vertically Centering with Flexbox 

.parent {display:flex; align-items: center;}

HTML Lists

by | Nov 22, 2021 | Front End Developer, HTML

I do love to create and format a good list. No Two Lists are ever the same.

Basic Unnumbered and Numbered Lists (bullets)

  • Solid Circle Bullet
  • Solid Circle Bullet
  • Solid Circle Bullet
  • Outline Circle Bullet
  • Outline Circle Bullet
  • Outline Circle Bullet
  • Square Bullet
  • Square Bullet
  • Square Bullet
  1. Lorem, ipsum dolor.
  2. Iusto, adipisci eum.
  3. Fuga, sit labore!
  1. Lorem, ipsum dolor.
  2. Iusto, adipisci eum.
  3. Fuga, sit labore!
  1. Lorem, ipsum dolor.
  2. Iusto, adipisci eum.
    1. Lorem, ipsum dolor.
    2. Iusto, adipisci eum.
      1. Lorem, ipsum dolor.
      2. Iusto, adipisci eum.
      3. Fuga, sit labore!
    3. Fuga, sit labore!
  3. Fuga, sit labore!
  1. Lorem, ipsum dolor.
  2. Iusto, adipisci eum.
    1. Lorem, ipsum dolor.
    2. Iusto, adipisci eum.
      1. Lorem, ipsum dolor.
      2. Iusto, adipisci eum.
      3. Fuga, sit labore!
    3. Fuga, sit labore!
  3. Fuga, sit labore!

List with Number Break

  1. Wake up
  2. Feed dog
  3. Start blog post
… Page Break with List …
  1. Finish blog post
  2. Go to bed

List of Nested Decimals

  1. List Item
  2. List Item
  3. List Item
    1. List Item
    2. List Item
      1. List Item
      2. List Item
      3. List Item
    3. List Item
  4. List Item
  5. List Item
    1. List Item
    2. List Item
    3. List Item
  6. List Item
  7. List Item

Reverse Court Down

  1. Northern Exposure
  2. The Sopranos
  3. Halt & Catch Fire
  4. Battlestar Galactica
  5. The Shield
  6. Game of Thrones
  7. Downton Abbey
  8. Six Feet Under
  9. LOST
  10. Friday Night Lights

Image Bullets

  • List Item
  • List Item
  • List Item
    • List Item
    • List Item
    • List Item
      • List Item
      • List Item
      • List Item
    • List Item
  • List Item
  • List Item
  • List Item

Random Order

Need to change the order?

  1. Northern Exposure
  2. The Sopranos
  3. Halt & Catch Fire
  4. Battlestar Galactica
  5. The Shield
  6. Game of Thrones
  7. Downton Abbey
  8. Six Feet Under
  9. LOST
  10. Friday Night Lights

Custom Text List

  1. Preheat oven to 425°F
  2. Mix all the ingredients
  3. Dump it all into a greased pan
  4. Bake for 40 minutes
  5. Take out and let cool 30 mintes
  6. Eat
  • Eggs
  • Flour
  • Water

Inside and Outside Bullets

  1. Lorem, ipsum.
  2. Similique, culpa.
  3. Atque, vel?
  4. Repudiandae, expedita.
  5. Perferendis, modi.
  1. Lorem, ipsum.
  2. Similique, culpa.
  3. Atque, vel?
  4. Repudiandae, expedita.
  5. Perferendis, modi.
  1. Lorem, ipsum.
  2. Similique, culpa.
  3. Atque, vel?
  4. Repudiandae, expedita.
  5. Perferendis, modi.
  1. Lorem, ipsum.
  2. Similique, culpa.
  3. Atque, vel?
  4. Repudiandae, expedita.
  5. Perferendis, modi.

Color Bullets

  • These
  • List Bullets
  • are colored
  • with
  • ::marker
  • These
  • List Bullets
  • are colored
  • with
  • a pseduo-element
  1. These
  2. List Bullets
  3. are colored
  4. with
  5. SVG as a background-image

Columized List

  • Lorem.
  • Quibusdam!
  • Recusandae.
  • Facere?
  • Sit?
  • Recusandae!
  • Ea!
  • Amet!
  • Eos.
  • Similique.
  • Excepturi.
  • Nemo?
  • Aspernatur!
  • Ipsam.
  • Accusantium.
  • Dignissimos?
  • Nesciunt.
  • Voluptatum?
  • Vero!
  • Nesciunt!
  • Ea.
  • Cumque!
  • Excepturi.
  • Sint.
  • Reprehenderit.
  • Natus?
  • Numquam.
  • Iusto.
  • Voluptate!
  • Iusto?