CSS – box-sizing property

CSS – box-sizing property

box-sizing property determines how the sizing properties are applied. It can take 2 values content-box and border-box content-box is the default value. Affects the content box of the element and padding and border are additional. The child divs have the half size, plus 10px the border. That is why the second child goes below. Div 150 px plus border 10 px both sides total 160 px border-box – the sizing properties are used to set the whole size of the element The divs have the half size 150 px, and…

CSS – box-sizing property Read More

CSS – block, inline-block and inline

CSS – block, inline-block and inline

Table with block and inline elements Block elements Inline elements p a, br, img h1, h2, h3, h4, h5, h6 span, sub, sup div, table i, b, small, big blockquote q ul, ol, li map, object, script pre, form button, input hr label, select, textarea Table with differences between block, inline-block and inline block inline-block inline ignores the vertical align property vertical-align and white-space can be used takes its children’s heigh or height if is set. You can set width and height respects width and height properties and vertical padding…

CSS – block, inline-block and inline Read More

CSS – border properties

CSS – border properties

border-color – sets border’s color border-width – sets border’s width border-style – sets border’s style. Values can take none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset Instead of using the above three properties you can use only the property border. First you specify the width, then the type and then the color. If you do not want to have all the four borders, then you can use border-left, border-top, border-right and border-bottom. border-radius – defines the shape of the…

CSS – border properties Read More

CSS – background properties

CSS – background properties

Let’s see some properties related to the background. background-color – sets the background color of an element background-image – set an image as a background background-size – specifies the size of the background image As you see from the example above, when the images is smaller than the element, then it will be repeated vertically and horizontally. background-repeat – Specifies how background images are tiled. It can take 6 different values. repeat-x 2. repeat-y 3. no-repeat 4. repeat 5. space 6. round cursor This property specifies the type of cursor…

CSS – background properties Read More