Styling Options - Gallery

This is a H2 or Heading 2

This is a H3 or Heading 3

THIS IS A H4 or a Heading 4

THIS IS A H5 or a Heading 5

this is a h5 or a Heading 6

Note: Most header types do not support lowercase letters. This is intentional, to reinforce that headers are intended to be short, simple, and serve the purpose of breaking up content on the page. Please ensure your header tags are used in hierarchical order (like the example displayed below). Consider this information when selecting which header type to use.

<h1> This is the Title of the Page - This is not handled by the web editor </h1>
    <h2> This the first main section of the page </h2>
        <h3> This is the first subsection of the first main section - don't get lost! </h3>
    <h2> This the second main section of the page </h2>
and so on...

^ "What is this red line?" - This is a horizontal divide tool. This is another way that we can segment and break up content on a page, especially one with a lot of text.

Body Text Bolded Example

• (note: Bold text is not intended to replace header tags. To write semantically correct HTML, only use bold in paragraphs or the body of the page, and use headers to break up those blocks of text.)

Body Text Italicized Example

Body Text Strikethrough Example

Body Text with link Example:

Lorem ipsum dolor sit amet consectetur adipiscing elit nunc facilisis integer suscipit dictumst, himenaeos cursus nulla lobortis vulputate aliquam maecenas placerat donec felis senectus, sapien suspendisse tellus fusce vestibulum vivamus aenean phasellus venenatis primis ornare. Sed aptent vel ultricies luctus dapibus euismod habitant, vitae pulvinar lectus dis magna semper ligula auctor, facilisis sodales orci suspendisse mollis cum. Sapien eget lacinia semper placerat urna, nam ut at bibendum neque mattis, lectus consequat sed sociis. Blandit sem mattis semper tortor habitant vel tristique augue bibendum penatibus odio cubilia lectus sollicitudin, interdum magnis morbi feugiat quam nunc posuere donec proin class dictumst urna leo. Cursus gravida pellentesque tempus magna inceptos vivamus convallis taciti eros, quam scelerisque phasellus sollicitudin praesent facilisi a integer vitae, himenaeos nascetur montes sem diam nullam vel neque. Porta dictum sodales magna risus et a fames mollis feugiat, nostra eget conubia metus rhoncus cum donec inceptos tristique, rutrum semper eu lacinia ultricies molestie nec pretium.

Sollicitudin lacus luctus posuere enim molestie euismod eget proin ut id maecenas, vehicula per libero quisque nascetur iaculis vivamus augue gravida fringilla, taciti himenaeos eu diam praesent hendrerit tellus fames etiam congue. Scelerisque platea aliquam montes magnis inceptos dictum ad nulla, fusce natoque semper condimentum sed blandit. Eu pharetra metus malesuada laoreet turpis duis praesent lobortis, cubilia mattis massa dis enim nisl nullam, vulputate accumsan eros fames faucibus volutpat suscipit. Placerat vitae id augue lectus est mollis netus, semper dui condimentum molestie cubilia nostra vel, eget facilisi suspendisse sollicitudin parturient pellentesque. Nec est semper risus sem natoque praesent ridiculus orci molestie dapibus posuere torquent, maecenas lobortis sociis rhoncus velit ac donec malesuada massa vitae ut montes egestas, mauris lacinia magnis cum faucibus pellentesque fames eros per tempus class. Sagittis eu faucibus risus condimentum platea, turpis pharetra nostra facilisi, ridiculus duis taciti elementum.

hello

List Text Examples:

• Unordered List Item 1
• Unordered List Item 2
  • Sub-list Item 1
  • Sub-list Item 2
  • Sub-list Item 3
• Unordered List Item 3

1. Ordered List Item 1
2. Ordered List Item 2
   1. Sub-list Item 1
   2. Sub-list Item 2
   3. Sub-list Item 3
3. Ordered List Item 3

Markup  

Accordion Example

• Accordion 1

  Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

• Accordion 2

  Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

• Accordion 3

  Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

• Accordion 4

  Panel 4. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Anchor Tags

If you see a link on a page that looks like: "ysu.edu/web-team/anthony#thisistheanchor" know that this is a special kind of link, that will not only take the user to this page but at the exact position the anchor has been set. This is useful for referring to information on another page, and then hyperlinking the defintion for that word where it appears on its own page. 

Flexbox / Page Structure