XtGem Forum catalog

p _ x
Bookmark Weezywap
JarApkBmkOpera
(GMT+1)
Saturday June 15th 2024
+
Always Post weezywap.xtgem.com on your facebook, twitter, 2go, whatsapp and instagram status! If you love WEEZYWAP and enjoy unlimited services here!
»Css Basics
You are viewing Chapter 16 of 18 Chapters for Css Basics/Tutorials. View all Chapters
Chapter 1: Introduction to CSS
Chapter 2: CSS Syntax
Chapter 3: CSS Classes
Chapter 4: CSS IDs
Chapter 5: CSS Divisions
Chapter 6: CSS Spans
Chapter 7: CSS Margins
Chapter 8: CSS Padding
Chapter 9: CSS Text Properties
Chapter 10: CSS Font Properties
Chapter 11: CSS Anchors, Links and Pseudo Classes
Chapter 12: CSS Backgrounds
Chapter 13: CSS Borders
Chapter 14: CSS Ordered & Unordered Lists
Chapter 15: CSS Width and Height Properties
Chapter 16: CSS Classification
Chapter 17: CSS Positioning
Chapter 18: CSS Pseudo Elements
Chapter 16: CSS Classification

Inherited: No

Clear
You can control if an element allows floated elements to its sides with the clear property

clear: value;

Values:

none
both
left
right

Now, what does all that mean?

None
This is the default setting, floated elements can appear on either side of the element set to clear: none;

Both
Setting the value to both, causes no floated elements to appear on either side of the element set to clear: both;

Left
Setting the value to left, causes no floated elements to appear to the left side of the element set to clear: left;

Right
Setting the value to right, causes no floated elements to appear to the right side of the element set to clear: right;



Clip
You can control how much of an element is visible with the clip property

clip: value;

Values:

auto
shape

Currently the only shape recognized by the clip property is rect (rectangle)

clip: rect(10px, 10px, 10px, 10px);



Cursor
You can control the style of cursor to be used in an element with the cursor property

cursor: value;

Values:

auto
crosshair
default
help
move
pointer
text
url
wait
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize

If you choose to use a custom cursor, it is always a good idea to declare a generic one after the custom value.

cursor: url("image.cur"), default;



Display
You can control how an element is displayed with the display property

display: value;

Values:

block
inline
list-item
none

Now, what does all that mean?

Block
Creates a line break before and after the element

Inline
No line break is created

List Item
Creates a line break before and after the element and adds a list item marker

None
Makes an element not display on the page



Float
The float property changes how text and or images within an element are displayed

float: value;

Values:

left
right
none

Now, what does all that mean?

Left
The image/text is displayed to the left of the parent element

Right
The image/text is displayed to the right of the parent element

None
There is no change in the way the image/text is displayed



Overflow
You can control what an elements contents will do if it overflows it boundaries with the overflow property

overflow: value;

Values:

auto
hidden
visible
scroll

Overflow Example

As you can see, with this property you can mimic an iframe. This box is set to an overflow value of "auto". Meaning that if the contents of the element break the boundaries it should add a scrollbar.


Here is what I have in my CSS file.

#overflow_box {width:200px; height:200px; border-top: 1px solid
#eee; border-left: 1px solid #eee; border-bottom: 1px solid
#eee; padding: 10px; overflow: auto;}


Then in the (X)HTML file I have this:

<div id="overflow_box">Contents</div>



Visibility
You can control if an element is visible or not with the visibility property

visibility: value;

Values:

hidden
visible



Z-Index
You can control the layer order of positioned elements with the z-index property

z-index: value;

Values:

auto
number

The higher the number the higher the level. Negative numbers are allowed.
« PreviousJump to Chapter:
Next »

Translate
Pages
Copyright © 2024 WEEZYWAP
facebook twitter whatsapp google plus
Home | About Us | Advertise | Frequently Asked Question | Contact Us | Partners | Disclaimer | Terms of Services | Invite Friends | Credits



Online: 1 , Today: 4, Hits: 33204
Last modified: 19-01-2017 9:11:03 pm