css preparation

css preparation

box model

Boxes are used to lay out elements on the page. An element’s box has four sides: margin, border, padding, and content. The margin is the area outside of the border. The border is right up against the edge of the element’s content. Padding, in turn, is just inside of the border; it separates the element’s content from its border.



  • Margin is a property you can use to create space around an element.
  • You can use it to create space between elements.
  • You can also use margin to push an element away from its container (ie: pushing an element away from the body).
  • And lastly, you can use margin-top, margin-right, margin-bottom, and margin-left to push an element away from other elements.


The padding property gives you the ability to adjust the space between an element and its content.

Suppose you have a paragraph that is 10em wide, but you want to give it some breathing room. For example, maybe you want it to be 12em wide with padding on the left and right. You can do this by using padding:

p { width: 10em; }

p { width: 12em; padding-left: 1em; padding-right: 1em; }

The shorthand property for this would be as follows: p { width: 10em; padding: 0 1em; }


Borders are lines that you can draw around an element.

You can use borders to make the shapes of elements look more interesting, or to separate your content from the rest of the page.

There are many different ways to use borders in CSS:

  • border-style: determines the style of border around an element. The possible values are solid, dotted, dashed, double, groove, ridge and inset. Each property sets a different style for the border.
  • border-width: determines the width of a border around an element in pixels.
  • border-color: determines the color of a border around an element in HEX or RGB values.


In the previous section, “Cascading Style Sheets,” you learned what CSS is, how to write it, and when and where to use it. In this section, we’ll move from theory into practice with a look at one of the most basic ways to apply styling: setting display properties.

An element’s display property determines how the element displays on your page—whether as a block-level or inline element. The default display value for most elements is set to block or inline.

Block elements start on new lines (think paragraph or heading tags). When using CSS, you can also make any item a block-level element by setting its display property to block (or adding `display: block` in your CSS).

The opposite of a block level element are inline elements which do not cause line breaks after or before them (like anchor tags). You can set any item to an inline element by setting its display property to “inline” (or adding `display:inline` in your CSS).

Setting a span tag’s display property to “block” will typically have a noticeable effect on the layout of your page—often resulting in paragraphs being broken up into lines that contain words and spans. This is because when you add `display:block`, all default margin and padding values are removed from that item; thus, only spaces between words will be displayed as white space on your screen.


Position is a crucial concept in CSS, describing the way an element behaves inside the context of other elements. The position property and its values interact with several other important properties and concepts, including z-index , float , display , overflow , margin , padding and more. When it comes to positioning elements on a page, there are four different types of positioning: static, relative, absolute, and fixed. Each type has its own specific purpose that makes them better for use cases than others.

The most common value for position is static, which means that the element is positioned according to where it appears in the document’s hierarchy (in this case, immediately after the nav ). This is also the default value for position . Even though you haven’t explicitly set an element’s position to static , all elements have an implicit static position until you declare otherwise.

Relative positioning will allow us to move an element relative to where it should be positioned normally by shifting its top , bottom , left or right positions as needed (e.g., if we wanted our hero image section to shift up by 50 pixels). As with fixed positioning, any subsequent elements will not be affected by this change in position because it doesn’t affect their flow within their containing block.

floating property

  • The float property makes the HTML element floating on left or right side of the web page.
  • It is most commonly used when working with layouts and inline elements (paragraphs and images).
  • The clear property is used to specify that an element should not be floated.


Styling a website is an art, and you can’t have the ink without the inkwell. A mistake made by beginners is that they assume their HTML/CSS is up to par; so they just slap some CSS on it and call it a day. It’s not good enough, as every page needs structure to be cohesive and well thought out. This article will teach you how to make your site look like a professional one without going crazy with complicated rules.

Add a Comment

Your email address will not be published. Required fields are marked *