welcome to the second part of the 2 chapters dedicated text formatting
The CSS you still reserve many surprises, so
do not wait: go for it! 
There are a number of CSS properties as surprising sympathetic can give a little more style to your web pages (and I think it will not be refused)
These range from bold, italic, underlined the development capital, through the ability to flash the text!
Italicize
I thought the tag <em> allowed to text in italics?!
I never said that
Head back to previous chapters if you have any doubts, but I never said that the tag <em> was made to put the text in italics (and I never said that <strong> was done to fat).
<em>, get it well in the head is done to emphasize words. It means that the words surrounding it are very important.
To represent this importance, most browsers put the text in italics (and not an obligation).
If we can put in italics in CSS, so it's useful just for presentation. Because, I remind you, CSS is only for submitting your web pages.
Specifically, to italicize using CSS font-style, which can take 3 values:
- italic, the text will be italic.
- oblique: the text will be italic. What again? Uh, to tell you I do not know myself, but all I see is that "italic" and "oblique" return to the same. So choose one of two
- normal: The text will be normal (default). This allows you to cancel italics. For example, if you want the text between <em> no longer be in italics, you write:
css code :
em
{
font-style: normal;
}
In the following example I am using eg font-style to italicize all my titles <h2>:
css code :
h1
{
text-align: center;
font-family: Arial, "Times New Roman", Verdana, serif;
}
h2
{
font-style: italic; /* Les titres h2 seront en italique ! */
text-indent: 30px; /* On décale un peu les sous-titres */
font-family: Arial, "Times New Roman", "Arial Black", Verdana, serif;
}
[URL="http://tutoriliez.eb2a.com/test%207.html"]test code[/URL]
In short, it's easy to use, do not bother to hang longer on it
Bold
And if we were to put in bold?
While there, same for <strong>, I do not redo the same speech that just now. The bolding in CSS enables the emboldening of such securities, some whole paragraphs etc. ... It's up to you.
The CSS property to bold font-weight is, and take the following values:
- bold: text will be bolded.
- normal: the text is written normally (default).
let's give a try to make a paragraph in bold:
css code:
[URL="http://tutoriliez.eb2a.com/test%208.html"]test code[/URL]
Capitalization CSS
The CSS lets you apply effects very interesting text, changing automatically capitalized.
We will see 2 CSS properties on the working capital.
Start with the property font-variant, simple, taking only 2 different values:
- Small-caps : the text is written in small capitals.
- normal : the text is written normally (default).
css code :
p
{
font-variant: small-caps;
}
You write your paragraphs normally (as usual), and you let CSS take care of converting it for you automatically in small capitals. Is not it beautiful?
But wait, there is a second CSS that works on uppercase also: text-transform. It can take these values:
- uppercase : all text is written in capital letters.
- lowercase : all text is in lowercase.
- capitalize :The first letter of each word is capitalized.
- none: no conversion (default).
allright, it's time for an example I'll put the code that goes with XHTML:
xhtml code :
<h1> I am very angry ...</ h1>
<p> ... but I'll try to stay calm. Finally, if possible, but I promise anything eh ... <br />
<span class="wp"> ahhhh! not this time I crack! that it has put the mayo on my fries!? <br /> sacrilege! </ span> </ p>
<p class="whisper"> THIS IS A PARAGRAPH THAT I WHISPER WHILE YET IN THE CODE XHTML IT IS WRITTEN IN CAPITAL LETTERS </ p>
css code :
h1
{
text-align: center;
font-family: Arial, "Times New Roman", Verdana, serif;
text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}
.wp
{
text-transform: uppercase; /* Si j'ai envie de me faire entendre, je mets en majuscules */
}
.whisper
{
text-transform: lowercase;
font-style: italic; /* Le texte chuchoté sera en minuscules et italique */
}
[URL="http://tutoriliez.eb2a.com/test9.html"]test code[/URL]
This text-transform property is very handy for changing the appearance of any text in a wink!
Like anything, CSS is not just good to align the text and change the font. It can also act directly on a text already written to alter its capitalization.
text decoration :
This CSS property is aptly named: text-decoration
It allows, among others, highlight the text. Here are the values it can take:
- underline: stressed.
- line-through: strikeout.
- overline: line above.
- Blink: Blinking. Warning, this property does not work with Internet Explorer or under Google Chrome. It works well in contrast to all other browsers, including Mozilla Firefox.
- none: Normal (default).
The CSS code allows you to test the effects of text-decoration:
h1
{
text-align: center;
font-family: "Arial Black", Arial, "Times New Roman", serif;
text-decoration: blink; /* Le titre sera clignotant ! (ne fonctionne pas sous Internet Explorer) */
}
.stressed
{
text-decoration: underline;
}
.strikeout
{
text-decoration: line-through;
}
.line_above
{
text-decoration: overline;
}
xhtml code :
<h1> Not to be missed </ h1>
<p> <em> CSS property text-decoration </em> will just decorate the text: <br />
<span class="stressed"> by underlining </span >...< br />
<span class="strikeout"> in the blocking </span >...< br />
... or <span class="line_above"> by putting a line above </span>. </p>
[URL="http://tutoriliez.eb2a.com/test10.html"]test code[/URL]
Now to the vast topic of colors:
vast? Oo how come?
ell we have several opportunities to show color, as was the case with the text size.
Here we see what are all these opportunities in the CSS to choose a color.
First thing to know: the property that can change the text color is color (easy to remember), you have also glimpsed in the introduction to CSS.
Enter the name of the color
he most simple and most convenient to choose a color is to type its name (in English, of course).
The only problem with this method is that there are only 16 colors called "standard". Other colors are unofficial, but as they do not necessarily work the same on all browsers, I'll avoid you show them.
Here are the 16 colors you can use simply by typing their name:
css code :
h1
{
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", serif;
text-decoration: underline;
color: green; /* Le titre en vert (pourquoi pas ?) */
}
p
{
text-indent: 20px;
color: blue; /* Les paragraphes en bleu */
}
strong /* ... et les mots importants en rouge clignotant ! */
{
color: red;
text-decoration: blink;
}
xhtml code :
<h1> Of all the colors </h1>
<p> Hi and welcome to this page colorful! I use <strong> standard color names </ strong> in my CSS to brighten up the page. Thus, "red" means "red", "blue" means "blue" and so on. </ P>
<p> Through <em> color </em> CSS, I (among others) could automatically convert <strong> </ strong> all my important words (in a tag "strong"
) in flashing red text! That way, you will not miss the o) </ p>
[URL="http://tutoriliez.eb2a.com/test11.html"]test code[/URL]
The important texts in red blinking ... wp! imagination rulz .
Hexadecimal notation :
16 colors, it's still a bit limited when you consider that most monitors can display 16 million.
On another side note, if he had to give a name to each of the 16 million color ...
Fortunately, there are several ways in CSS to choose a color from all existing ones. First I'll show you is the hexadecimal notation.
I will not go over because it is not convenient to handle, but it is still often used routinely. Indeed, before the CSS appears, was a common way to define a color (actually it was the only one: p).
Luckily since it was invented simpler methods.
A color name hex, it looks like this: # FF5A28. Simply put, it's a combination of letters and numbers that indicate a color.
We must always start by writing a pound (#), followed by 6 letters or numbers from 0 to 9 and A to F.
These letters or numbers work in pairs. The first 2 indicates a quantity of red, the 2 following amounts of green, and the last 2 a quantity of blue. By mixing these quantities (which are the components of Red-Green-Blue color) you can get the color you want.
So #000000 is the color black and #FFFFFF for white. But now, ask me what is the combination that produces the color orange "sunset", I absolutely got no idea xD
la method RGB
Red-Green-Blue, which are abbreviated to "RGB". As for the hexadecimal notation, one can define an amount of red, green and blue to choose a color.
there you'll see that it's much more convenient and with a drawing program simple as Paint, you can find the color you want .here how it's gonna be :
[list=1][*]Start the Paint program from the Start menu.(start=>all programs=>accessories=>paint.[*]Go to the Colors menu / edit Colors
[*]then press define custom colorsin the area that appears to the right, moves the cursor to select the color you want.[*]There are quantities of Red-Green-Blue corresponding indicated at the bottom right of the window (here 87-19-117). I copied these values in this order in the CSS file, like this:
css code :
h1
{
text-align: center;
color: rgb(87-19-117);
}
Wp job done.
As you can see from the example, to use the method you need to type RGB (Red, Green, Blue) by replacing "Red, Green, Blue" by the corresponding numbers.
For your information, these numbers range from 0 to 255. If you write one day a quantity of red 327, mean that's wrong
And Bonus Track ...
I put to you a very simple program, which specializes in choosing a color. No doubt it will be very useful to help you choose your couleurs.Ce software called "la boite a couleur" (mean colors), made with C :developped by some ppl i know (not me )
Contrary to what one might believe, the substance does not necessarily refer to the bottom of a webpage. You can also apply a background only to securities, or paragraphs, or certain words in a paragraph.
It must first know that there are 2 types of funds:
- The funds comprising a color
- Funds with a background image
We will begin our attention to the background color at first, then we will see how to have a background image.
The background color :
To specify a background color, use the CSS background-color. She used the same way as the color property, that is to say that you can type the name of a color, write in hexadecimal notation or use the RGB method.
To specify the background color of the webpage, you have to work on the <body>. Yes, <body> is any web page, so it is changing its background color that you change the background color of the webpage.
check the css code for it :
body /* It works on the body tag, so the entire page */
{
background-color: black; /* The bottom of the page will be black */
color: white; /* The text of the page is blank */
}
[URL="http://tutoriliez.eb2a.com/test12.html"]test code[/URL]
Hey, but you said a text color white to the <body>, and all paragraphs and titles <p> <h1> took this color. How come?
I just wanted to take this opportunity to speak. This phenomenon is called inheritance. No no, do not worry, there were no deaths
In CSS, if you apply a style to a tag, all tags that are inside this tag will take the same style.
cool hein?
It's actually simple to understand and intuitive. The <body>, you know, contains among others the paragraph tags and title <p> <h1>.
Applying a background color black and white text color to the <body> all my titles and paragraphs will also have a background color black and white text ... This phenomenon is called the inheritance is said that the tags that are inside another tag "inherit" its properties.
does This means that ALL the text of my webpage will necessarily written in white?
Not necessarily. If you say later that you want your titles in red, this style will take precedence and your shares will therefore be in red. However, if you do anything special (as was done earlier), then your shares will inherit the color white.
This does not work only in color, hear us well. All CSS properties are inherited: for instance you can request a text size of "1.3em" in the <body>, and all your titles and paragraphs will be of that size.
Here is an example where I show you how to "cancel" the legacy for which our securities are not written in white. I took the opportunity to create a class "highlights" which puts the text on a yellow background to give an impression of highlighting.
body
{
background-color: black;
color: white; /* All the tags in their body text will be colored in white ... */
}
h1
{
color: red; /* ... unless I specifically request to change the color result */
}
.highlights: /* A style that allows for example to highlight certain words in a text */
{
background-color: yellow;
color: black; /* The highlighted text is written in black, because white on yellow background we see nothing o) */
}
[URL="http://tutoriliez.eb2a.com/test13.html"]test code[/URL]
As you can see, we did not include a specific color for paragraphs (<p>), so they have inherited from the white. However, the title does not inherit the color white because it says they wanted it in red.
The class "highlights" shows that you can safely apply a background color for certain words in a text. And the effect is quite nice not, cool hein? xD
The background image :
Like the background color, background image does not necessarily apply to the entire page, it might as well put a background image for title, paragraphs, quotes etc ...
The property to specify a background image is background-image. As value, he should be put url( "name_of_the_image.png"). For example:
background-image: url( "bottom.png");
Of course, your background is not necessarily in PNG, it may also be in JPEG or GIF.
The address indicating where the background image can be absolute (http:// ...) or relative (bottom.png).
Be careful when you put an address on file in the CSS! The image address should be indicated against the file. Css and not from the file. Html.
Thus, if your site has 2 folders: "css" and "images", you must type: ".. / images / fond.png" to get the background image. If you do not put the correct path, your background image will not appear.
If you want to apply a background image to any page, you must again use the <body>:
body
{
background-image: url("../images/snow.png");
}
h1
{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p /* all the paragraphs within the blockquotes */
{
text-align: justify;
text-indent: 25px;
}
There is also a CSS property that can "fix" the background, it does not move along with the text. The effect is, I find interesting.
The property in question meets the sweet name of background-attachment and can take 2 values:
- fixed: the background image remains fixed.
- scroll: the background image scrolls with the text (default).
There are still 2 properties in connection with background images that I want to show you.
The first of these is that which manages the repetition of the background image. This property is called background-repeat and can take these values:
- No-repeat: background will not be repeated. The image will be unique on the page.
- repeat-x: Substance will be repeated only on the first row, horizontally.
- repeat-y: Substance will be repeated only on the first column, vertically.
- repeat: the fund will be repeated (by default).
Let us still our same XHTML file, but this time apply a gradient background that is repeated vertically only.
body
{
background-image: url("../images/degrade.png");
background-repeat: repeat-y; /* The bottom will not be repeated on the first column, vertically */
}
h1
{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p
{
text-align: justify;
text-indent: 25px;
}
Finally, the last properties on the bottom that I wanted to show you (so they will all views) on the position of the background image.
You can indicate which should be the background image with background-position. This property is interesting that if you put "background-repeat: no-repeat;" (a fund that is not repeated).
You must give background-position 2 values in pixels to indicate the position of the bottom compared to top left corner of the page (or paragraph if you apply the background to a paragraph). So if you type:
background-position: 30px 50px;
... Your background will be placed 30 pixels from the left and 50 pixels high. It is also possible to put these values into English:
- top: the top.
- bottom: bottom.
- left: left.
- Center:center
- right: right.
It is possible to combine these words. For example, to align an image in the top right, you would type: background-position: top right;
Go to the last example I'll reuse all the properties on the merits we have learned
css code:
body
{
background-image: url("../images/skieur.gif"); /* the bottom image is "skieur.gif" */
background-repeat: no-repeat; /* bottom won't be repeated */
background-position: top right; /* The bottom line is at the top right */
background-attachment: fixed; /* fix bottom */
}
h1
{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p
{
text-align: justify;
text-indent: 25px;
}
[URL="http://tutoriliez.eb2a.com/test14.html"]test code[/URL]
If you use a lot of properties in connection with the background (as in this example), you can use a kind of "mega-property" background that can take several values combined properties background-image background-repeat , background-attachment and background-position.
This is the first "mega-property" that I watch, there will be others. For all the "mega-properties" as background, he should know that:
The order of values is not important. You can combine values in any order:
- background: url ("../ images / skieur.gif ") no-repeat top right fixed;
- background: no-repeat fixed top right url ("../ images / skieur.gif ");
You do not have to put all the values. So if you do not get fixed, you can remove it without problem:
background: url ("../ images / skieur.gif ") no-repeat top right;
css code:
body
{
background: url("../images/skieur.gif") no-repeat top right fixed;
}
h1
{
font-style: italic;
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
}
blockquote p
{
text-align: justify;
text-indent: 25px;
}
One last thing: in all these examples, I applied a background to the whole page (body). But this should not forget that you can apply a background to any element (title, paragraph, some words in a paragraph etc.) ...
I advise you to train yourself to try to apply a background to your titles or paragraphs. If you have a little taste (which I did not) you will certainly give a beautiful look to your webpage.
wp, job done that's it for today thx for reading and have a nice day.
Originally Posted by Nobber708
, about the recommendation there is nothing special, almost everything u gonna need is already within the tutoriel, just read it and hf
)
Posting Permissions
Reply With Quote
