We will differentiate the generic paragraph formatting in our web page from a paragraph which we attribute a particular style (single or not), for example, the subtitle of a section. Imagine that the text which outlines the content of our web page should have: - a size defined by the user (for example 12px), - the font Times New Roman, - the height of the rows of 16px. We just mention here (but we will deepen) that the text shown in an accessible website must adapt - in its size - the users needs: - if the browser zoom is increased (eg 125%) the character will follow him (the user is approaching the content of the page itself, the text is to enlarge) - if the zoom the browser is decremented, the character must shrink in order to avoid overlapping blocks of text. For this reason, the font size should be expressed: - in percentage (eg 100% is the size defined by the settings of the native browser), - in em (corresponding to 1 px divided by 16). Personally I prefer the em as a measure. So, lets define the specific style for all sections of the page (or site), unless otherwise specified: p { font-size: 0.75em; font-family: Times New Roman; line-height: 1em; } We therefore used the selector p to locate the item whose attribute is formatted, and this is all that is contained between the and . We have established that the font size should be equal to 12px ... but the unit px has the disadvantage of not following the screen zoom in enlarging or shrinking, so we have to recalculate into em. Given that 1em = 16px, we derive an equivalence with 12px = 0.75em. The font-size attribute is followed by a colon followed by the value and separated from the other attributes by a semicolon: font-size: 0.75em; We chose the Times New Roman as font and assigned as a value to the attribute font-family. Note that font-family may include more fonts separated by commas, inverted commas are required only if the font name consists of more words. font-family: Times New Roman; But it could also be ... font-family: arial; or font-family: Times New Roman, arial; We have defined the row height in 16px (so that the character of 12px size is comfortable within and the legs of long letters do not overlap or touch each other. line-height: 1em; All these values are enclosed in curly brackets and attributed to the selector p. In the next post we will see how to display different styles for different sections ... that will be marked in the listing Html with - Text if they appear only once on the page (for example, the subtitle of a section with its own unique style); - Text if you expect that style will resort more times on the page or in some pages of the site.
Posted on: Fri, 19 Sep 2014 15:42:13 +0000
Trending Topics
Recently Viewed Topics
© 2015