HomePhotoshopDreamweaverIllustrator
 
 

CSS - Cascading Style Sheets

There are many, many books and tutorials out there so we don't intend to repeat them all! 
Instead, we will add snippets of CSS code to allow you  to perform simple tasks and so grow your knowledge.

What is CSS?  Well, in the past Web pages were coded in HTML but this was a very limited code
and many of the things that you wanted to do on a web page turned out not as you wanted. 
Think a newspaper or magazine.  See the two-column layout? The drop caps? The drop shadow?
 
Simply not possible by using HTML, but with CSS, it  is possible!

Drop Cap

Copy and paste this at the top of the code in your web page:

<style>
p.introduction:first-letter { font-size : 300%; font-weight : bold;
float : left; width : 1em;
color : #c00; }</style>

then paste this into the body of your document

<p class="introduction"> This paragraph has the class "introduction". 
If your browser supports the pseudo-class "first-letter",
the first letter will be a drop-cap. </p>
Preview your page and see what happens! Note the color? It's #c00 which is a red colour.
Change this to, say #000000 and your drop cap will now be black.
Wrap Text Around an image Not possible in HTML. Sure, you can pick your image up and drag it
within the text, but this is what you'll get:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar
lectus in lectus placerat tempus. Pellentesque eu condimentum mi.
Aliquam consectetur dolor nec ipsum bibendum bibendum. Duis hendrerit,
libero sit amet mollis sagittis, orci augue tempus eros, ac convallis
metus justo nec dui. Aenean eget tellus nisi, feugiat suscipit ligula.
Quisque mattis elit eget nisi interdum adipiscing. Maecenas viverra enim
eu purus hendrerit semper facilisis odio rhoncus.

Below is the difference using CSS Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras pulvinar lectus in lectus placerat tempus. Pellentesque
eu condimentum mi. Aliquam consectetur dolor nec ipsum bibendum
bibendum. Duis hendrerit,libero sit amet mollis sagittis, orci
augue tempus eros, ac convallis metus justo nec dui. Aenean eget
tellus nisi, feugiat suscipit ligula. Quisque mattis elit eget
nisi interdum adipiscing. Maecenas viverra enim eu purus hendrerit
semper facilisis odio rhoncus.
Add the image within the body of text, switch to Code View and add: <img src="image.jpg" style="float: left; padding: 5px;" /> In other words, carefully delete anything after image.jpg" (image dimensions, alt text etc.)
and add the code from
style= to /> Obviously, you can tweak the padding dimension and whether you want the image on the left
or right of your page.

 

 

 

 

©grafikhaus 2015 | sheffield-central.com