Is there a CSS reset for typography that can be applied to a particular class?

Is there a robust CSS template font that works under a namespace (i.e. class), and not globally?

Let me briefly explain the situation: I use CSS reset for the layout, and I would like to add some class ( .content for example) to the div , which then apply the same typography rules only to these div elements:

 <p>This one reset</p> <div class="content"> <p>This one has typography rules applied</p> </div> 
+4
source share
6 answers

There seems to be no such thing. And if you accept the CSS typography template, you will need to add a namespace yourself, which is an obvious solution, but not what I was looking for.

0
source

which would then apply some typography rules to this div only elements

If I understand correctly, you will just do it in your stylesheet if you want to target each element in a div

 div.content *{ /* YOUR STYLES */ } 

If you want to style only p in this div , then

 div.content p{ /* YOUR STYLES */ } 

Example: http://jsfiddle.net/8UE2D/

+3
source

You can use any existing boiler stove. You just need to search and replace with preend.content for each selector in the file.

+1
source

Sorry if this is late, but there is such a thing, see: http://www.gethifi.com/blog/a-boilerplate-for-css-typography

Demo here: http://files.www.gethifi.com/blog/a-boilerplate-for-css-typography/demo/type.html

This is a CSS template that sets the size, margins, and height of a line (mainly to align elements along a common baseline).

According to the site,

By default, all rules have a value of ".content". This makes it easy to apply this style sheet to a specific container.

I did not use it, but confirmed that the typography.css file has rules added with .content.

0
source

Typography is a way you can use to add more meaning to content. It supports balance, hierarchy, white space and good design. The following is an example of CSS typography. Moreover, you can download a font from Google fonts .

 @font-face { font-family: 'PTSans'; src: url('./fonts/PT-Sans/PT-Sans.eot'); src: url('./fonts/PT-Sans/PT-Sans.eot?#iefix') format('embedded-opentype'), url('./fonts/PT-Sans/PT-Sans.woff') format('woff'), url('./fonts/PT-Sans/PT-Sans.ttf') format('truetype'), url('./fonts/PT-Sans/PT-Sans.svg#pt_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'PTSans'; src: url('./fonts/PT-Sans/PT-Sans-Bold.eot'); src: url('./fonts/PT-Sans/PPT-Sans-Bold.eot?#iefix') format('embedded-opentype'), url('./fonts/PT-Sans/PT-Sans-Bold.woff') format('woff'), url('./fonts/PT-Sans/PT-Sans-Bold.ttf') format('truetype'), url('./fonts/PT-Sans/PT-Sans-Bold.svg#pt_sansbold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'PTSans'; src: url('./fonts/PT-Sans/PT-Sans-Italic.eot'); src: url('./fonts/PT-Sans/PPT-Sans-Italic.eot?#iefix') format('embedded-opentype'), url('./fonts/PT-Sans/PT-Sans-Italic.woff') format('woff'), url('./fonts/PT-Sans/PT-Sans-Italic.ttf') format('truetype'), url('./fonts/PT-Sans/PT-Sans-Italic.svg#pt_sansitalic') format('svg'); font-weight: normal; font-style: italic; } @font-face { font-family: 'PTSans'; src: url('./fonts/PT-Sans/PT-Sans-BoldItalic.eot'); src: url('./fonts/PT-Sans/PPT-Sans-BoldItalic.eot?#iefix') format('embedded-opentype'), url('./fonts/PT-Sans/PT-Sans-BoldItalic.woff') format('woff'), url('./fonts/PT-Sans/PT-Sans-BoldItalic.ttf') format('truetype'), url('./fonts/PT-Sans/PT-Sans-BoldItalic.svg#pt_sansbold_italic') format('svg'); font-weight: bold; font-style: italic; } .font{ display: block; font-family: 'PTSans', sans-serif; font-weight: normal; font-style: italic; font-size: 108%; text-align: center; text-shadow: 1px 1px 0px rgba(0, 0, 0, .7); text-transform: lowercase; text-indent: 25px; text-decoration: underline; line-height: 1.4; letter-spacing: 4px; word-spacing: 10px; background-color: #FFF; color: #000; } 

Related Resource CSS Typography Template

0
source

Font Squirrel will generate the well-tested @ font-face font syntax for you, and Paul Irish has a bulletproof @ font-face Explanation so you can understand the thought process behind Font Squirrel.

Font Squirrel will eventually give you CSS similar to this:

 @font-face { font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'), url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg'); } 

What you can include in the stylesheet, and then the link with the class .content as follows:

 .content { font-family: 'WebFont', Arial, sans-serif; } 
-1
source

All Articles