The first character of a paragraph to another design

Only one character at the beginning of the paragraph by design

And reading books and magazines, only the first character in the paragraph is great character design may be seen. And even on the homepage like realized design like that don’t you?

Does not, of course, to create a single character at the beginning of picture, etc.. But even with images, but not impossible to

• Takes effort to make
• Troublesome when the need for modifications, such as changing the design
• The words at the beginning of paragraph don’t hit search
• Issue is read aloud during speech, degrade the accessibility

… Various problems like that.

That is where in the style sheet. It is can easily even with style sheets to decorate only the first character of the paragraph.

Our disadvantage is that eliminates’s design in the style sheet.

• Hassle-free to make
• Fix effortlessly, so plain text
• Text is to hit search
• No problem even in the speech read out loud

Only when the want to stop good delete the style definition, so no need to add hand no text is. So, feel free to can try would be.

To design the first character in the paragraph style sheet?

So what you want me to introduce how to design the first character in the paragraph just about style sheets.

How to >> to decorate the back one character paragraph Page.2

To design the first character in the paragraph style sheet?

So what you want me to introduce how to design the first character in the paragraph just about style sheets.

first-letter pseudo elements

To apply a style to only one character at the beginning, use the first-letter pseudo elements. For example, to increase the leading character of the p element represents a paragraph written.

first-letter: p {font-size: 200%;} is to double (200%) the size of the first character in the paragraph style.

Of course, can also be used outside of the paragraph. For example, the first character of headings (h1 elements) to red, write.

h 1 letter pseudo-element to create {color: red;}

(Increasing the single character at the beginning of background color to red, white to color design) design using this article is possible to write the following.

first-letter: p {font-size: 200%; color: white; background-color: cc0000; padding: 1px; } Double size ( font-size: 200%; ) The color is white ( color: white; ) The background color is red ( background-color: cc0000; ) It has. “padding: 1px;” The add so that doesn’t wanted to established 1px margin around the character.

Can be applied is only for block-level elements. So, you can use etc. for p elements, divs, h1 elements, blockquote elements, and a (link), strong, and span elements please note because you cannot use any inline element.

It is possible to apply only to specific classes. For example, apply only to the p element of orange class, write:

Part of the style sheet:

< style type = “text/CSS” > p.orange letter pseudo-element to create {color: white; background-color: orange; 200% font-size:; } </style>

HTML portion:

< p class = “orange” > big orange inverted character is at the beginning of this paragraph. </p>

The end

We introduce the methods to achieve the design, only the first character of the paragraph has become significant characters seen in books and magazines, including the Please stay in touch.