1. Home
  2. Foundation CSS Reference

The best Foundation CSS Reference Tutorial In 2024, In this tutorial you can learn Foundation defaults,text,Text Alignment,Align different screen sizes,other,

Foundation CSS Reference

Foundation defaults

Foundation to use the browser default font size ( font-size:100% ). For most desktop browser device, the default font size is 16px. For browser for mobile devices, the default font size is 12px. The default font is "Helvetica Neue" , Line-height defaults to 1.5 .

These settings are applied to <body> element within the element.

In addition, <p> outer element and the bottom of the distance (margin-bottom) is 1.25rem, line-height of 1.6.

text

The following HTML elements, Foundation set up a separate style rendering it will not use the browser's default style. Click "try" to view online instance.

element description Online examples
<H1> - <h6> h1 - h6 headings try it
<a> Light blue links, move the mouse to the link will be underlined try it
<Small> Light gray text subtitle try it
<Blockquote> Citation module try it
<Strong> Bold text try it
<Em> Italics try it
<Abbr> Specify the word abbreviation, use the element appears dotted underline text, move the mouse up will prompt try it
<Kbd> Receive keyboard input commands: CTRL + P try it
<Hr> Level try it
<Code> code segment try it
<Ul> Unordered list try it
<Ol> Ordered List try it
<Dl> Descriptive List try it

Text Alignment

Use CSS class to modify the alignment of the text:

class description Examples
.text-left Left-aligned text try it
.text-right Right-aligned text try it
.text-center Center try it
.text-justify Justified try it

Align different screen sizes

Use CSS class to modify the text alignment of different screen sizes:

class description Examples
Left
.small-text-left All screen size Left try it
.small-only-text-left Small screen Left (width less than 40em) try it
.medium-text-left Width is larger than the screen size 40.0625em Left try it
.medium-only-text-left 40.0625em width aligned to the left of the screen size 64em try it
.large-text-left Width is larger than the screen size 64.0625em Left try it
.large-only-text-left 64.0625em width aligned to the left of the screen size 90em try it
.xlarge-text-left Width is larger than the screen size 90.0625em Left try it
.xlarge-only-text-left 90.0625em width aligned to the left of the screen size 120em try it
.xxlarge-text-left Width is larger than the screen size 120em Left try it
Align Right
.small-text-right All dimensions of the screen right-justified try it
.small-only-text-right Small screen right alignment (width less than 40em) try it
.medium-text-right Width greater than the size of the screen right-aligned 40.0625em try it
.medium-only-text-right 40.0625em width aligned to the right screen size 64em try it
.large-text-right Width greater than the size of the screen right-aligned 64.0625em try it
.large-only-text-right 64.0625em width aligned to the right screen size 90em try it
.xlarge-text-right Width greater than the size of the screen right-aligned 90.0625em try it
.xlarge-only-text-right 90.0625em width aligned to the right screen size 120em try it
.xxlarge-text-right Width greater than the size of the screen right-aligned 120em try it
Align
.small-text-center Align all screen sizes try it
.small-only-text-center The small size of the screen centered (width less than 40em) try it
.medium-text-center Width greater than the size of the screen centered 40.0625em try it
.medium-only-text-center 40.0625em width to 64em screen sizes centered try it
.large-text-center Width greater than the size of the screen centered 64.0625em try it
.large-only-text-center 64.0625em width to 90em screen sizes centered try it
.xlarge-text-center Width greater than the size of the screen centered 90.0625em try it
.xlarge-only-text-center Width 90.0625em to 120em screen sizes centered try it
.xxlarge-text-center Width greater than the size of the screen centered 120em try it
Justified
.small-text-justify All screen sizes are Justified try it
.small-only-text-justify Justify the small size of the screen (width less than 40em) try it
.medium-text-justify Width is larger than the screen size 40.0625em Justify try it
.medium-only-text-justify Align both ends of the screen width to 64em size 40.0625em try it
.large-text-justify Width is larger than the screen size 64.0625em Justify try it
.large-only-text-justify Align both ends of the screen width to 90em size 64.0625em try it
.xlarge-text-justify Width is larger than the screen size 90.0625em Justify try it
.xlarge-only-text-justify Align both ends of the width of the screen size 90.0625em to 120em try it
.xxlarge-text-justify Width is larger than the screen size 120em Justify try it

other

class description Examples
.left Left-floating element try it
.right Right-floating elements try it
.clearfix Clear float - must be added to the parent element floating element
.hide Hidden element (the CSS display: none ) try it
.list-inline All elements arranged in the same row try it
.lead Let <p> element is more prominent try it
.subheader Setting light-colored <h1> - <h6> elements try it

Hot Tools

Other Tools

Online Tutorial

Website Navigation

Foundation CSS Reference
10/30