CSS3 Format Examples to Change Layout

CSS3 format commands control the display of fonts, links, colors, etc. Use the “class” construct to format the layout of tags you label with a particular class.

Name a class anything you like, and there can be multiple classes. For example, an HTML5 <p> tag can have class named indent.

<p class="indent">This is a paragraph</p>


Then make a CSS3 format command that indents every tag of the class indent.

.indent  {

margin-left: 10px;



Span the CSS3 Format

Use the </span> tag to limit indentation to only the first line. Simply wrap the first word of a paragraph in the <span> tag.

<p><span class="indent">This </span>is a paragraph</p>


Add Margins to the CSS3 Format

.gap_below {

margin-bottom: 25px;



Then add the “gap_below” class to the desired HTML tag.

<p class="gap_below"><span class="indent">This </span>is a paragraph</p>


Special Constructors for CSS3 Format

Dynamic changes to the style when a user hovers over an element is a powerful, attention grabbing effect. Filter this effect by first selecting a “class”, and then select a “constructor”.  The hover constructor is often used.

.orange_link:hover {

color: orange;
background: gray




Leave a Reply

Your email address will not be published. Required fields are marked *