martedì 23 agosto 2011

CSS – Text Formatting In CSS (Part 2/2)

CSS – Text Formatting In CSS (Part 2/2)




Style Effects


In CSS there is a surprising amount of properties which allow us to give a bit more style to our web pages (and I don’t think anyone will refuse that icon wink CSS   Text Formatting In CSS (Part 2/2) )
These styles go from making your text bold, italic, to underlining your text and putting all the letters in capitals, to making your text flash icon biggrin CSS   Text Formatting In CSS (Part 2/2)


Putting Text In Italic


Stop, stop there ! I thought let us make text italic ?!


I never said that icon biggrin CSS   Text Formatting In CSS (Part 2/2)
I never said that was made to make the text italic, just as I never said that was to make the text become bold. That’s just what they do by default.


is made to help words stand out from the rest of a paragraph. It means that the words it is surrounding are a bit important.
To represent this importance most navigators make the text go italic.


We can make text become italic in CSS, so it can be useful just for presentation purposes. Because, I remind you, CSS is made to sort out the presentation of web sites.


To put text in italic in CSS we use font-style which can take 3 values :



  • italic : Makes the text italic
  • oblique : Makes the text italic. What, this does as well ? icon surprised CSS   Text Formatting In CSS (Part 2/2) Errmmm, I can’t tell you any more than that. I’ve used both of them and they both seem to do the same thing. Just use the one you want icon wink CSS   Text Formatting In CSS (Part 2/2)

  • normal : The text will be normal (by default). It allows you to take any text effects away (such as italic). For example, if you don’t want your text in tags to be italic any longer, you should write :









    1em {






    2     font-style: normal;






    3}

In the following example, I’ll use font-style to put my

titles in italic :









1h1 {






2     text-align: center;






3     font-family: Arial, "Times New Roman", Verdana, serif;






4}






5 






6h2 {






7     font-style: italic; /* The h2 titles will be italic ! */






8     text-indent: 30px; /* Move our titles across to the right a bit */






9     font-family: Arial, "Times New Roman", "Arial Black", Verdana, serif;






10}

Well, it’s easy to use. We won’t stay stuck on that for too long icon wink CSS   Text Formatting In CSS (Part 2/2)


Making Text Bold


And if we carried on to making text bold ?
Here, the same with , I’m not going to re-give the same speech as earlier. Making text bold in CSS lets us have for example bold titles, bold paragraphs etc…It’s up to you.


The CSS property that allows us to make text become bold is font-weight, which takes the following values :



  • bold : the text will be bold
  • normal : the text will be written normally (by default)
  • lighter : the text will be thinner

Here’s an example to make paragraphs go bold :









1font-weight: bold;

Capitals In CSS


CSS allows us to apply some interesting effects on text, by automatically putting it into capitals.
We’re going to see 2 CSS properties that allow us to work with capitals.


Let’s start with the property font-variant, which only takes 2 values :



  • small-caps : the text will be written in small capitals
  • normal : the text will be written normally (by default)

Example :









1p {






2     font-variant: small-caps;






3}

You write your paragraphs normally (as usual), and just leave the CSS to automatically transform all your letters into small capitals. Isn’t that great icon wink CSS   Text Formatting In CSS (Part 2/2)


But wait, there’s a second CSS property that works with capitals as well : text-transform. It can take several values :



  • uppercase : all the text will be written in capitals
  • lowercase : all the text will be in small letters
  • capitalize : the first letter of each word will be a capital
  • none : no transformation (by default)

Go on then, seeing as I haven’t done it for a while I’ll give you a HTML code to work with icon smile CSS   Text Formatting In CSS (Part 2/2)
Look in particular at how I use classes


Code : HTML









1<h1>I am very angryh1>






2 






3<p>...but I will try to stay calm. At least, if I can, I'm making no promises...<br />






4<span class="shout">ahhh !!! no this time I can't ! Who put mayonnaise on my chips !??<br />disgusting !span>p>






5 






6<p class="whisper">THIS IS A PARAGRAPH THAT I'M WHISPERING, ALTHOUGH IT'S WRITTEN IN UPPERCASE IN THE XHTML CODEp>

Code : CSS









1h1 {






2     text-align: center;






3     font-family: Arial, "Times New Roman", Verdana, serif;






4     text-transform: capitalize; /* The first letter of each word will be a capital */






5}






6 






7.shout {






8     text-transform: uppercase; /* I want to be heard, so everything is in capitals */






9}






10 






11.whisper {






12     text-transform: lowercase;






13     font-style: italic; /* The whispered text will be in small, italic letters */






14}

As you can see, the property text-transform is very useful for changing the appearance of text in the wink of an eye !


That shows that CSS can do more than just align text and change its font. It can also act directly upon text to modify its case (uppercase / lowercase).


A Bit Of Decoration ?


This CSS property has a good name : text-decoration
It allows us, among other things, to underline text. Here are the different values it can take :



  • underline : underlines the text
  • line-through : crosses out your text (puts a line through the middle)
  • overline : puts a line over the top of the text
  • blink : makes text blink. Be careful, this property doesn’t work on Internet Explorer. However it does work well on every other browser, including Mozilla Firefox.
  • none : normal (by default)

This CSS will allow us to test the text-decoration effects :


Code : CSS









1h1 {






2     text-align: center;






3     font-family: "Arial Black", Arial, "Times New Roman", serif;






4     text-decoration: blink; /* The title blinks (won't work in Internet Explorer) */






5}






6 






7.under {






8     text-decoration: underline;






9}






10 






11.cross-out {






12     text-decoration: line-through;






13}






14 






15.over {






16     text-decoration: overline;






17}

And here’s the XHTML code to go with it :


Code : HTML









1<h1>Do not miss this !h1>






2 






3<p>The CSS property <em>text-decorationem> lets you decorate your text :<br />






4<span class="under">by underlining itspan>. . .<br />






5<span class="cross-out">by putting a line through itspan>. . .<br />






6. . .or <span class="over">by putting a line over itspan>.p>

Don’t forget that the power of CSS is the fact that it can mix styles. I’ve created a class under which only underlines in the example, but in reality we often mix styles like for example a class important which underlines text, makes it bold, and puts it in uppercase icon wink CSS   Text Formatting In CSS (Part 2/2)


Colours


Now let’s carry on to the vast subject of colours


What do you mean, vast ? icon surprised CSS   Text Formatting In CSS (Part 2/2)


There are several possibilities for indicating a colour, as was the case with text size.
Here we’re going to see all the possibilities that CSS offers for choosing colours.


The first thing to know : the property that lets you change the colour of your text is color (easy to remember icon wink CSS   Text Formatting In CSS (Part 2/2) ), you even used it quickly in the introduction to CSS.


Indicating The Name Of The Colour


The easiest and most practical way to choose a colour is by writing its name in English.
The only default with this method is that there are only 16 standard colours. Some other colours exist as well but as they don’t work on every browser I won’t be showing them to you.


Here are the 16 colours you can use by simply writing their names :


colour chart CSS   Text Formatting In CSS (Part 2/2)


You can learn them all by heart if you want, it’s not that hard icon biggrin CSS   Text Formatting In CSS (Part 2/2)


Here’s the CSS :


Code : CSS









1h1 {






2     text-align: center;






3     font-family: Arial, "Arial Black", "Times New Roman", serif;






4     text-decoration: underline;






5     color: green; /* The title in green (why not ?) */






6}






7 






8p {






9     text-indent: 20px;






10     color: blue; /* Paragraphs in blue */






11}






12 






13strong { /* And the important words in flashing red ! */






14     color: red;






15     text-decoration: blink;






16}

. . . and the XHTML page to go with it :


Code : HTML









1<h1>In every colourh1>






2 






3<p>Hello and welcome to this page that's full of colours ! I am using <strong>standard colour namesstrong> in my CSS to make the page look nicer.p>






4 






5<p>With the attribute <em>colorem> in CSS I managed to <strong>automaticallystrong> convert all my important words (in a "strong" tag) into flashing red text ! That way nobody should miss them :0p>

The important words in red flash…well yeah, you had to think of it ! Come on, you need a bit of imagination icon wink CSS   Text Formatting In CSS (Part 2/2)


Hexadecimal Notation


When you know that most of our screens can show 16 million colours, 16 is a bit limited.
On the other hand, if somebody had to give names to 16 million colours…


Luckily, in CSS there are several ways to choose colours. The first one (and my personal favourite) I’m going to show you is the hexadecimal notation.
I won’t spend that long explaining it because it’s not very easy to explain and it’s only through practice that you’ll get used to it.


A name of a colour in hexadecimal looks like this : #FF5A28. To make it simpler it’s a combination of letters and numbers which indicate a colour. It must always start with a dies (#) followed by six letters or numbers going from 0 to 9 and A to F (imagine A to F carrying on the numbers, they’re 10 to 15).
These letters and numbers go together in pairs. The first two indicate the quantity of red, the next two the quantity of green, and the last two are the quantity of blue. By mixing these quantities (which are the components of Red-Green-Blue in the colour) we can get the colour we want.


So, using this method, #000000 corresponds to black and #FFFFFF is white. But now, don’t ask me what the combination is to produce sunset orange. I couldn’t tell you. In fact I could guess. #FF0000 is red so we need to add some green to make it orange. A rough guess would be about #FF8000.


Certain graphics programs, such as Photoshop for example, do give you hexadecimal notations for colours. It is therefore easier to find your wanted colour than trying to guess it through trial and error.


Here is a quick example for making your text white :









1p {






2     color: #FFFFFF;






3}

Using RGB


What does RBG mean? It is an abbreviation of Red-Green-Blue. Like with the hexadecimal notation, you define the quantity of Red, Green & Blue you want to make up a colour.


What ?! Yet another twisted story of red, green & blue quantities ?


Yes, but this time you can find your colour with a simple drawing program like Paint. Here are the steps to take :



  1. Launch Paint from the start menu

  2. Click on Edit colors (on windows 7), on earlier versions of Windows, go to Colors=>Edit colors :


    change colour1 560x402 CSS   Text Formatting In CSS (Part 2/2)


  3. Move the cursor in the colour palette to choose the colour you want

  4. Let’s suppose that I get the mad idea to put my titles in Barbie pink (we’re only supposing). I just select the colour in the palette like this :


    choose colour CSS   Text Formatting In CSS (Part 2/2)



  5. Get the quantities of Red, Green & Blue in the colour from the bottom right of the window (here 242-83-231). Copy these values in that order into the CSS, like this :









    1h1 {






    2     text-align: center;






    3     color: rgb(242, 83, 231);






    4}

    And that’s all there is to it icon biggrin CSS   Text Formatting In CSS (Part 2/2)


    As you may have noticed in the example, to use the RGB method, you need to write rgb(Red, Green, Blue), replacing Red, Green, Blue with the corresponding numbers. For your information, so that you know the scale and can make a quick guess of the needed quantities, the numbers go from 0 to 255. So if one day you write a red quantity of 327, there’s a problem icon biggrin CSS   Text Formatting In CSS (Part 2/2)


Added Bonus


As I have already said, my favourite method is using hexadecimal values. But that’s just a preference and you can use whichever method you wish icon smile CSS   Text Formatting In CSS (Part 2/2)
For those of you who don’t have an advanced graphics editor such as photoshop, I have found a nice, simple to use program, that allows you to find out the codes of colours. Just open the colour palette in Paint, or if you’ve found a colour you like in a picture, keep it handy, then open ColorPix and put the cursor over the colour you like. Then just press any key on your keyboard and you’ll get the hexadecimal & RGB values of the colour icon biggrin CSS   Text Formatting In CSS (Part 2/2) It looks like this :


colorpix CSS   Text Formatting In CSS (Part 2/2)


Well, if you think it could be any help you can download ColorPix here :


Download ColorPix
Download ColorPix Here


Well, there you are, I thought the colour choosing capacities of this program might be useful icon smile CSS   Text Formatting In CSS (Part 2/2)


Backgrounds


Differently to what you might think, background doesn’t necessarily mean the background of a whole web site. You can also apply background uniquely to titles, or paragraphs, or even certain words in a paragraph.


Firstly you need to know that there are 2 types of background :



  • Backgrounds with solid colours
  • Backgrounds with images

We’ll start with solid colour backgrounds, and then we’ll see how to use images in the background.


Background Colours


To indicate a background colour we use the CSS property background-color. This is used in exactly the same way as color, meaning that you just give the name of your colour in English, hexadecimal, or RGB.


To give a background colour to your whole web page you need to work on the tag. Yes, is the whole web page, so if we change its colour the whole page’s background will change.


Look at this CSS code :









1body { /* we're working on the body tag, which is the WHOLE page */






2     background-color: black; /* The background of the page will be black */






3     color: white; /* The text will be white */






4}

Try it out to see !


Hey, but you put the white text in , and now all the

paragraphs and

titles have this colour. Why is that ?


I was hoping this question would come along so that I could talk about it. This is called heritage. No no, don’t worry; it doesn’t have anything to do with dead people icon biggrin CSS   Text Formatting In CSS (Part 2/2)


In CSS, if you apply a style to a tag, all the tags inside it use the same styles.


Really, it’s quite simple to understand. The tag, as you know, contains all the other elements of your page, including your

paragraphs and

titles.


Therefore if I apply a black background and white text to , all my titles and text will also have a black background and white text. This is what is called heritage : we say that the tags inside a tag inherit its properties.


Are you saying that ALL the text of my web site will be written in white ?


No, not necessarily. If you then say for example that you want your titles to be red, this style will have priority and your titles will become red. However, if you don’t put anything, as we did before, your titles will be white.
This doesn’t only work with colours. All the CSS properties are inherited : you can for example put a text size of 1.3em in and all your titles and text will be this size.


Here’s an example, to show you how to cancel heritage so that our titles won’t be written in white. I’ve also used the opportunity to create a class highlight which puts the text on a yellow background, to give a highlighting effect.


Code : CSS









1body {






2     background-color: black;






3     color: white/* All the tags inside body will have white text and a black background */






4}






5 






6h1 {






7     color: red/* . . .apart from if I ask them to do something else */






8}






9 






10.highlight {  /* A style to let us highlight some words in the text */






11     background-color: yellow;






12     color: black/* the highlighted text will be black */






13}

…and this time I’ve decided to give you the complete XHTML code to go with it just so you don’t forget everything we learned before icon wink CSS   Text Formatting In CSS (Part 2/2)


Code : HTML









1http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">






2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">






3<head>






4     <title>Example Of How To Use An External CSS Filetitle>






5     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />






6     <link rel="stylesheet" media="screen" type="text/css" title="Style" href="test.css" />






7head>






8 






9<body>






10     <h1>Who turned off the light ?h1>






11 






12     <p>Brr, it's all black on this site, it's a bit of a <span class="highlight">worryingspan> atmosphere don't you think ?p>






13body>






14html>

As you will see when you test it, we haven’t indicated a particular colour for the

paragraphs so they’re still white. However the title isn’t white because we wanted it to be red.
The class highlight shows you with no problems how to give a background to certain words in a text. And the effect is kind of nice, wouldn’t you say ? icon biggrin CSS   Text Formatting In CSS (Part 2/2)


Background Images


Just like with background colours, background images don’t have to be applied to the whole page, we can also give a background to paragraphs, quotations, titles etc…


The property that lets us use background images is background-image. As a value we must put url(image-name.png). For example :
background-image: url("images/background.png");


Of course, you’re background doesn’t have to be a PNG. It can also be a JPEG or GIF.
The address of the image can be absolute (http://…) or related (images/image.jpg).


Be careful when you’re giving a related path in CSS ! The address of the image must be given in relation to the .css file and not the .html file. So, if your site has 2 folders, css and images, you need to write : ../images/image.jpg to get the image. If you don’t give the correct path, your image won’t be shown.


I’ll give you a full example to show you :


In your web sites folder set up your folders like this :


folders1 560x305 CSS   Text Formatting In CSS (Part 2/2)


You can get my image, snow.png from here


Code : HTML :









1<h1>CSS Testing Siteh1>






2 






3<blockquote>






4     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lobortis. Aliquam scelerisque. Nullam facilisis diam et sapien laoreet facilisis. Phasellus hendrerit massa sit amet ipsum ullamcorper laoreet. Proin rutrum enim eu libero. Nulla risus est, porta eu, tristique at, ultrices ac, eros. Donec eget justo. Nam at metus vel tortor eleifend ultricies. Pellentesque quis tortor vitae leo lacinia auctor. Ut nec lacus et diam tincidunt blandit. Mauris vehicula orci et velit. Vivamus auctor rutrum leo. Donec magna erat, vulputate non, ornare vitae, dignissim et, leo. Curabitur ac massa. Donec tempor metus eget felis.p>






5 






6     <p>Phasellus quis nulla eu sem porttitor eleifend. Morbi pharetra. Nulla condimentum est eu magna. Duis accumsan justo. Aliquam a dolor at dolor gravida pretium. Nunc varius quam quis nulla. Sed eu nulla. Phasellus quis magna eu wisi lacinia euismod. Nam augue ipsum, iaculis in, aliquet sit amet, bibendum a, massa. Suspendisse placerat dui eget erat. Nam mi. Nullam odio tortor, scelerisque eget, aliquet ut, volutpat vitae, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque felis vitae enim. Fusce leo. Vestibulum porttitor elementum augue. Integer semper tristique velit.p>






7 






8     <p>Nulla libero. Ut molestie, mauris id bibendum bibendum, libero neque venenatis sapien, sed aliquet augue ligula nec tellus. Sed urna nunc, aliquet quis, condimentum a, molestie non, risus. Cras ut ante in nulla blandit aliquam. Curabitur consectetuer quam sollicitudin nunc. Ut aliquet velit tempor erat. Vivamus iaculis, wisi tincidunt ullamcorper aliquet, nibh risus aliquam risus, at convallis tortor mauris eget mauris. Curabitur consequat. Maecenas auctor venenatis lacus. Donec pellentesque.p>






9 






10     <p>Morbi elit. Suspendisse sapien dolor, dapibus at, semper a, aliquam ac, neque. Sed eleifend mauris in elit. Aliquam blandit posuere purus. Vivamus sed dui. Maecenas ultricies, libero sed sagittis pellentesque, lectus nisl convallis lorem, vitae interdum velit ipsum vitae mauris. Nullam quis enim vitae urna fringilla lobortis. In accumsan, odio ut cursus molestie, nunc nibh accumsan velit, id dignissim nibh sem vitae turpis. Cras congue cursus orci. Proin laoreet egestas dolor. Vestibulum arcu sem, molestie sed, fermentum id, dapibus vitae, orci. Vivamus consectetuer ullamcorper enim. Curabitur varius massa ut lectus. Vivamus consectetuer aliquet tellus.p>






11 






12     <p>Suspendisse quis sapien at turpis luctus tincidunt. Pellentesque eleifend pede. Morbi fringilla, wisi in gravida pulvinar, ligula quam nonummy odio, vel interdum mi wisi sollicitudin erat. Ut elit dui, hendrerit at, laoreet sed, posuere commodo, dui. Nam lacus. Vivamus rutrum felis eu libero. Fusce ac augue non felis vestibulum sollicitudin. Ut varius, diam in aliquam iaculis, est nisl tincidunt magna, non commodo sapien felis mollis augue. Donec ut massa. Donec semper est nec nulla. Sed aliquet orci ac sapien. Proin ut wisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;p>






13 






14     <p>Aliquam porta enim eu sapien. Suspendisse ac lectus. Nulla sollicitudin nunc vitae mauris. Pellentesque molestie, nisl ac aliquam volutpat, massa sem luctus augue, id fringilla urna risus eu neque. Morbi pretium, felis a congue accumsan, tortor quam blandit mauris, vitae congue erat justo vitae mi. Aliquam nisl massa, facilisis ut, sagittis nec, tristique at, mauris. Suspendisse potenti. Suspendisse lorem pede, pretium ut, gravida ac, suscipit quis, augue. Etiam nonummy ligula eu nisl. Pellentesque id velit at mi ullamcorper adipiscing.p>






15 






16    <p>In suscipit lorem id nibh. Integer ligula tellus, porta sit amet, pretium ac, dignissim sed, nunc. Duis diam. Nulla tortor pede, porttitor quis, iaculis sed, tincidunt at, nibh. Vivamus nibh massa, rutrum vel, feugiat eu, suscipit nec, orci. Fusce accumsan arcu nec pede. Integer dui lacus, tempus ac, vestibulum eget, ultrices eget, elit. Pellentesque odio. Nunc et leo. Etiam consequat augue ac sem. Aliquam erat volutpat. Duis nec libero tincidunt justo lacinia feugiat. In hac habitasse platea dictumst. Quisque ornare laoreet magna.p>






17 






18     <p>Pellentesque dapibus, ligula ut vulputate pellentesque, dui magna lacinia mauris, aliquam tempus elit eros a diam. Nullam mi sem, tincidunt et, auctor et, ultrices et, augue. Vivamus blandit dapibus metus. Etiam lacinia sapien et urna. Sed molestie, eros vel imperdiet sodales, lorem velit consequat magna, ornare gravida ligula risus at nunc. Nulla lacus turpis, viverra a, tincidunt eu, tempor a, odio. Nam urna sapien, dignissim nec, sagittis id, tristique sed, est. Nam nisl elit, sagittis eget, pellentesque a, tristique vel, massa. Sed cursus sagittis pede. Aliquam erat volutpat.p>






19 






20     <p>IAliquam erat volutpat. Morbi vulputate sagittis nulla. Vivamus porta, nisl quis volutpat ornare, felis mauris pulvinar mauris, at congue dui neque nec elit. In in leo. Ut vitae erat. In hac habitasse platea dictumst. Maecenas consequat augue vitae erat. Mauris vehicula varius nulla. Aenean sit amet est. Nam purus ante, rutrum aliquet, facilisis sit amet, consequat ut, orci. Aliquam ac dui eu lectus blandit cursus. Pellentesque sapien wisi, pharetra ut, dictum ut, tincidunt suscipit, dolor. Praesent convallis turpis nec quam. Nullam orci magna, mollis non, rhoncus tempus, pretium eu, neque. Praesent non velit eget metus fermentum sodales. Donec mi ipsum, placerat et, suscipit id, facilisis ac, neque. Nullam semper enim non augue.p>






21 






22     <p>Donec non turpis eu sem accumsan mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nisl sit amet felis luctus luctus. Integer sollicitudin ullamcorper dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris fermentum facilisis turpis. Pellentesque orci justo, rhoncus in, convallis at, consectetuer at, magna. Etiam ipsum odio, eleifend nec, iaculis quis, fringilla ac, lacus. Vivamus sit amet erat sed nisl convallis molestie. Nulla quam orci, vulputate at, vehicula sit amet, ullamcorper sed, lorem. Curabitur molestie varius tellus. Morbi arcu nibh, aliquam ut, facilisis molestie, scelerisque vel, enim. Maecenas sit amet nisl sed arcu molestie hendrerit. Etiam rutrum, neque sit amet volutpat lacinia, leo lacus cursus metus, vitae posuere nulla est et mauris. Curabitur tempus tempor felis. Cras interdum tristique dui. Curabitur pretium.p>






23 






24     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lobortis. Aliquam scelerisque. Nullam facilisis diam et sapien laoreet facilisis. Phasellus hendrerit massa sit amet ipsum ullamcorper laoreet. Proin rutrum enim eu libero. Nulla risus est, porta eu, tristique at, ultrices ac, eros. Donec eget justo. Nam at metus vel tortor eleifend ultricies. Pellentesque quis tortor vitae leo lacinia auctor. Ut nec lacus et diam tincidunt blandit. Mauris vehicula orci et velit. Vivamus auctor rutrum leo. Donec magna erat, vulputate non, ornare vitae, dignissim et, leo. Curabitur ac massa. Donec tempor metus eget felis.p>






25 






26     <p>Phasellus quis nulla eu sem porttitor eleifend. Morbi pharetra. Nulla condimentum est eu magna. Duis accumsan justo. Aliquam a dolor at dolor gravida pretium. Nunc varius quam quis nulla. Sed eu nulla. Phasellus quis magna eu wisi lacinia euismod. Nam augue ipsum, iaculis in, aliquet sit amet, bibendum a, massa. Suspendisse placerat dui eget erat. Nam mi. Nullam odio tortor, scelerisque eget, aliquet ut, volutpat vitae, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque felis vitae enim. Fusce leo. Vestibulum porttitor elementum augue. Integer semper tristique velit.p>






27 






28     <p>Nulla libero. Ut molestie, mauris id bibendum bibendum, libero neque venenatis sapien, sed aliquet augue ligula nec tellus. Sed urna nunc, aliquet quis, condimentum a, molestie non, risus. Cras ut ante in nulla blandit aliquam. Curabitur consectetuer quam sollicitudin nunc. Ut aliquet velit tempor erat. Vivamus iaculis, wisi tincidunt ullamcorper aliquet, nibh risus aliquam risus, at convallis tortor mauris eget mauris. Curabitur consequat. Maecenas auctor venenatis lacus. Donec pellentesque.p>






29 






30     <p>Morbi elit. Suspendisse sapien dolor, dapibus at, semper a, aliquam ac, neque. Sed eleifend mauris in elit. Aliquam blandit posuere purus. Vivamus sed dui. Maecenas ultricies, libero sed sagittis pellentesque, lectus nisl convallis lorem, vitae interdum velit ipsum vitae mauris. Nullam quis enim vitae urna fringilla lobortis. In accumsan, odio ut cursus molestie, nunc nibh accumsan velit, id dignissim nibh sem vitae turpis. Cras congue cursus orci. Proin laoreet egestas dolor. Vestibulum arcu sem, molestie sed, fermentum id, dapibus vitae, orci. Vivamus consectetuer ullamcorper enim. Curabitur varius massa ut lectus. Vivamus consectetuer aliquet tellus.p>






31 






32     <p>Suspendisse quis sapien at turpis luctus tincidunt. Pellentesque eleifend pede. Morbi fringilla, wisi in gravida pulvinar, ligula quam nonummy odio, vel interdum mi wisi sollicitudin erat. Ut elit dui, hendrerit at, laoreet sed, posuere commodo, dui. Nam lacus. Vivamus rutrum felis eu libero. Fusce ac augue non felis vestibulum sollicitudin. Ut varius, diam in aliquam iaculis, est nisl tincidunt magna, non commodo sapien felis mollis augue. Donec ut massa. Donec semper est nec nulla. Sed aliquet orci ac sapien. Proin ut wisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;p>






33 






34     <p>Aliquam porta enim eu sapien. Suspendisse ac lectus. Nulla sollicitudin nunc vitae mauris. Pellentesque molestie, nisl ac aliquam volutpat, massa sem luctus augue, id fringilla urna risus eu neque. Morbi pretium, felis a congue accumsan, tortor quam blandit mauris, vitae congue erat justo vitae mi. Aliquam nisl massa, facilisis ut, sagittis nec, tristique at, mauris. Suspendisse potenti. Suspendisse lorem pede, pretium ut, gravida ac, suscipit quis, augue. Etiam nonummy ligula eu nisl. Pellentesque id velit at mi ullamcorper adipiscing.p>






35blockquote>

Don’t forget to put css/test.css in the link to your style sheet !
If we want to put a background image on the whole page, we use the tag (again) :


Code : CSS









1body {






2     background-image: url("../images/snow.png");






3}






4 






5h1 {






6     font-style: italic;






7     font-family: "Arial Black", Arial, Verdana, serif;






8     text-align: center;






9}






10 






11blockquote p {  /* All the paragraphs inside a blockquote */






12     text-align: justify;






13     text-indent: 25px;






14}

Try it out; you’ll notice that the background image is repeated over the whole page. There is a property that allows us to fix the background, so that it doesn’t move with the text. The given effect is, I find, quite interesting. The property is called background-attachment and can take 2 values :



  • fixed : the image won’t move
  • scroll : the image moves with the text (by default)

Using the same CSS file as before, but with the addition of the background-attachment we get this :









1body {






2     background-image: url("../images/snow.png");






3     background-attachment: fixed; /* the background won't move */






4}






5 






6h1 {






7     font-style: italic;






8     font-family: "Arial Black", Arial, Verdana, serif;






9     text-align: center;






10}






11 






12blockquote p {  /* All the paragraphs inside a blockquote */






13     text-align: justify;






14     text-indent: 25px;






15}

Try scrolling now. As you’ll see, the background doesn’t move anymore !


There are 2 more properties I would like to show you for the background image.
The first one is to control the repetition of the background. This property is called background-repeat and takes the following values :



  • no-repeat : the background isn’t repeated. There is only one copy of the image on the page.
  • repeat-x : the background is repeated on the first line, horizontally.
  • repeat-y : the background is repeated in the first column, vertically.
  • repeat : the background is repeated (by default).

Let’s use the same HTML as before, but this time we’ll apply a gradient that repeats vertically.


Here’s a gradient I created in Photoshop. Right click->save as to copy it if you want :


gradient CSS   Text Formatting In CSS (Part 2/2)


And here’s the CSS code to use it :









1body {






2     background-image: url("../images/gradient.png");






3     background-repeat: repeat-y/* The image will only repeat vertically */






4}






5 






6h1 {






7     font-style: italic;






8     font-family: Arial Black, Arial, Verdana, serif;






9     text-align: center;






10}






11 






12blockquote p {  /* All the paragraphs inside a blockquote */






13     text-align: justify;






14     text-indent: 25px;






15}

As you can see the gradient repeats itself down the left side of the screen. The last property I want to show you (that way we’ll have seen them all for backgrounds) concerns the position of your background image.
You can say where you want your image to be with background-position. This property is only of any use if you put "background-repeat: no-repeat;"


You need to give your background 2 values in pixels to indicate where you want it to be in relation to the top left corner of the screen. (or of the paragraph if it’s the background of a paragraph…). So, if you write :
background-position : 30px, 50px;
…your background will be placed 30 pixels from the left and 50 pixels from the top. There are also values that you can give in English :



  • top : at the top
  • bottom : at the bottom
  • left : to the left
  • center : in the middle
  • right : to the right

You can also combine these words. So, to put your picture in the top right, you put : background-position: top right;


Right, in this last example I’ll use all the background properties we have learnt icon wink CSS   Text Formatting In CSS (Part 2/2)


Here’s the background image :


skier CSS   Text Formatting In CSS (Part 2/2)


Code : CSS









1body {






2     background-image: url("../images/skier.gif");  /* The background image is skier.gif */






3     background-repeat: no-repeat/* The image will not be repeated */






4     background-position: top right/* The background is in the top right of the screen */






5     background-attachment: fixed/* The background won't move */






6}






7 






8h1 {






9     font-style: italic;






10     font-family: "Arial Black", Arial, Verdana, serif;






11     text-align: center;






12}






13 






14blockquote p {  /* All the paragraphs inside a blockquote */






15     text-align: justify;






16     text-indent: 25px;






17}

If you use a lot of properties on the background (like in this example), you can use a kind of mega property called background which takes several combined values of background-image, background-repeat, background-attachment & background-position.
This is the first mega-property that I’m showing you, there will be more. For all the mega-properties such as background you should know that :




  • The order of the values doesn’t matter. You can combine the values in any order :
    background: url("../images/skier.gif") no-repeat top right fixed;
    background: no-repeat fixed top right url("../images/skier.gif");



  • You don’t have to put all the values. If you don’t want to put fixed, you can take it out without a problem :
    background: url(../images/skier.gif) no-repeat top right;


Of course, mega properties don’t have any use if you you’re only using one value icon wink CSS   Text Formatting In CSS (Part 2/2)
The following example gives us the same result as before but it uses background to make the CSS shorter :









1body {






2     background: url("../images/skier.gif") no-repeat top right fixed;






3}






4 






5h1 {






6     font-style: italic;






7     font-family: "Arial Black", Arial, Verdana, serif;






8     text-align: center;






9}






10 






11blockquote p {  /* All the paragraphs inside a blockquote */






12     text-align: justify;






13     text-indent: 25px;






14}

One last thing, in all these examples I’ve been applying the background to the whole page (body). But don’t forget that you can add a background to anything (a title, a paragraph, certain words of a paragraph etc…)
I suggest that you practice a bit just applying backgrounds to different parts of your web page. You should now be able to give you site quite a nice look icon smile CSS   Text Formatting In CSS (Part 2/2)


Well, as you can tell, the possibilities in CSS are quite impressive. Really, CSS is more or less limitless, and without wanting to discourage you, you haven’t seen everything icon biggrin CSS   Text Formatting In CSS (Part 2/2)


The only small difficulty in this chapter is trying to remember all the new properties I’ve shown you. By practicing you’ll remember them more easily and I’ll soon be bringing out a cheat sheet icon biggrin CSS   Text Formatting In CSS (Part 2/2)


Why stop now? We haven’t seen the best of CSS yet icon biggrin CSS   Text Formatting In CSS (Part 2/2)

Nessun commento:

Posta un commento