Web Studio Next & Web Studio - Tutorials and Add On Effects

Change font size

WSnext forum

CSS in web studio - paragraphs & text

Scripts, html and css styling in Web Studio 5

Moderators: Gordon, davemon, Surfa

Postby Gordon » October 14th, 2013, 11:07 am

DEMO & INSTALLATION PAGE

PARAGRAPH BORDER
border:1px solid grey !important;
padding:6px 6px !important;
background-color: #3d3d3b !important;
border-radius:6px;
border
1px is the size of the border and grey is the color, you can also use hex colors like #FFFFFF for white
padding
The space around the text the first 6px is top and bottom, the second 6px is left and right spacing
background-color
This one's obvious #3d3d3b is a grey color you can use HTML color names too like white for example
border-radius
The size of the rounded corners you change 6px to 10px for example for a larger radius

Note: You can use a web studio text background color but it would need to match the codes background color.
WS use two divisions on text and we can't get to the one with the background color in it.


PARAGRAPH DROPCAP
float: left;
font: 36px/36px georgia;
color: goldenrod;
margin-top:-6px;
font
36px/36px is the size of your dropcap letter larger would be 40px/40px for example
color
goldenrod is the HTML color name of the letter you could use hex colors like #FFFFFF for white
margin-top
minus 6px (-6px) adjusts the letter up and down -8px would be higher for example

DROPCAP BORDER
float: left;
font:bold 30px/30px georgia;
color: white;
margin-top:-3px; margin-right:4px;
background:goldenrod;
border:2px solid grey;
padding:0px 3px;
border-radius:6px;
Most is the same as paragraph dropcap so we won't go over those again
margin-right
This time we want a little more space to the right of the letter so 4px is that space, 6px would be more
background
goldenrod is the HTML color name of the background you could use hex colors like #FFFFFF for white
border
2px is the border size and grey the border color
padding
The space around the letter 0px is top & bottom, 3px is left & right
border-radius
The size of the rounded corners you change 6px to 10px for example for a larger radius

TEXT SHADOW
text-shadow:1px 2px 0px #000;1px
Is the X (up & down) axis, so -1px would go up, 2px down more
2px
Is the Y (left & right) axis, so -1px would go left, 2px right more
0px
Is the blur, 2px would blur the shadow more, which looks good with these too.
#000
Is a short way to write the hex black color, you can use HTML color names too like grey for example.

PARAGRAPH IMAGE
border:1px solid grey !important;
padding:6px 6px !important;
background-color: #3d3d3b !important;
background-image:url('tile1.jpg');
border-radius:6px;
This is same as the paragraph border at the top so we won't cover those parts again
background-image (the line we added for this one)
tile1.jpg is the name of the image you attached to website properties.
Make sure the extension .jpg matches your image and isn't capitalized like .JPG
What that code does is take the tiny image you are using and repeats it for the paragraph background.

PARAGRAPH IMAGE FLOAT
MARGIN: 0px 0px 0px 8px; FLOAT: right"
src="float1.png" width=50 height=50
MARGIN
That's the spacing around your image, it's top-right-bottom-left so say if you wanted to float it left
then you would change the spacing like this: 0px 8px 0px 0px putting it to the right of the image
FLOAT
You can use left as well as right, but note the margin change above.
src
That's the name of the image you attached to website properties
and it's extension, so if you use a .jpg change that too.
Make sure the extension .jpg matches your image and isn't capitalized like .JPG
width & height
This will change your image size, so make it match your image (or at least it's proportion)

note: I don't do it this way but web studio changes the code so I just went with it
User avatar
Gordon
Moderator
 

Return to HTML & CSS Tutorials

Who is online

Users browsing this forum: No registered users and 1 guest

cron