EverWeb Widgets

Quote & Mark

Block Quote
The <blockquote> tag in HTML5 specifies text that is quoted from an external source.

“ A amateur web designer will give you what you want - a professional will give you what you actually need. ”
The browsers display it as a block element with a fairly large value for margin. Change this using style tags and insert this in the appropriate code box as described below …


<style>
blockquote{margin:5px 10px 10px;font-size:18px;color:#FF0000;font-weight:normal}
</style>

Mark or Highlight
Note the use of highlighted text. Rather than use a span like EverWeb does for syntax highlighting, the mark should be used. This element is new in HTML5 and defines marked or highlighted text so that the search engines know that words inside these elements are important to the relevance of the text. It appears as a nasty yellow background by default but can be styles using CSS.
Now that search engines deprecate or ignore the Keyword Meta Tag , using the mark element is an excellent way to draw attention to keywords for both the visitors and the search engine crawlers.

Hidden Mark
Highlighted text does look a little tacky so, to indicate the keywords to the search engines and hide them from view, the mark element can be styled to blend in with the rest of the text. This MARK is enclosed in <mark></mark> tags but how would anybody but the search engine spiders know?

Styles
These are the styles used for the mark on this page …

<style>
mark{padding:2px 5px;background:#888;color:#FFF}
</style>

The "hidden" mark is styled using this code …

<style>
mark{padding:0;background:transparent;color:#000}
</style>

These styles can be applied to a page using the Head Code box in the EverWeb Page inspector or to the whole site by using the one in the Site Publishing Settings page.

Manipulating Fonts Using CSS

All the examples shown here use the Verdana font family with the font-size set to 20px except for the last one demonstrating old style numbers.

This is my 1st attempt at using the font-variant property set to "small-caps" and superscript to create the 1st

Code:
<p style="font-variant:small-caps">Text</p>

Supercript is enclosed in tags like this <sup>st</sup>

The font stretch property will only work if the font family has width-variant faces. The font-stretch property itself does not stretch a font.

This font has been stretched on the x-axis and squashed on the y-axis using CSS to transform the scale.
The left/right margins are increased to allow for the stretching.

Code:
<p style="margin:0 170px;transform:scale(1.5,0.75);line-height:28px">Text</p>

This font has been stretched on the y-axis and squashed on the x-axis using CSS to transform the scale.
The left/right margins are decreased to allow for the squashing on the x-axis and the line height increased to allow for the stretching on the y-axis.

Code:
<p style="margin:30px -340px;transform:scale(0.6,1.5);line-height:32px">Text</p>

Old style numbers require a font that supports them - in this case Georgia - 1 2 3 4 5 6 7 8

Code:
<p style="font-size:30px;font-variant-numeric:oldstyle-nums;font-family:Georgia">Text</p>

NOTE: These examples were inserted using the Responsive Code Snippet widget and the inline styles inserted in <p> tags.
To change a style in a paragraph, use the inlines styles in a <span> tag.

© EverWeb Widgets -