CSS can be seem to be difficult at a first glance when you’re new to it. You may be confused about the different CSS properties, what they do and what they are for. Don’t worry, I got you covered.
Have you heard of the 80/20 rule where 80% of the results come from 20% of the effort? Its the same in CSS. Which is why in this post, I’m going to talk about the most highly used CSS properties you will definitely need to know.
1: Display
Display takes on many different values, but only 4 are most commonly used.
Eg-
div {
display: block;
display: inline-block;
display: inline;
display: none;
}
block: Many HTML elements are set to this mode of display by browsers’ stylesheets. They include
- and text blocks like
. Block level elements by default take up as much space as they can, and they cannot be placed on the same horizontal line with any other display modes, include other block elements. (Exception: unless they are floated)
With block elements, you gain the ability to alter the element’s width and height to your liking, which is why they are used for layouts
inline: The inline mode wraps many HTML elements tighty around them and is the defaults for all elements that are not specified with any other display values. Elements can be placed side by side on the same line as inline elements. Think about the tag that bolds elements, the tag that creates italics and tags that allow you to link to other web pages. These are all examples of inline elements. You will not be able to change an inline element’s width and height.
inline-block: This is one display value that combines the properties of both block elements and inline elements. You get the ability to set a height and width, and the element can appear on the same horizontal line as other elements.
none: Display none hides the element from the website and it will not be shown visually. This is very useful for CSS Dropdown menus where additional options appear when you hover on navigation menus. The rationale is that elements are set to a display value of none initially, and the display value is changed to block on hover.
2: Width and Height
Width and height properties are used closely with display:block and display:inline to set the width and height of HTML elements while creating a website. Common units units for Width and Height are:
px - Pixels.
em - A unit of measurement, where 1 em = current font size.
rem - Root em. Same measurement as em, but makes life much easier without the inheritance problem
% - Percentages.
auto - highly useful unit, will explain below.
Other units of measurement can be found at the W3 Schools website. If you’re wondering about the difference between px, em and rem, check out this great article on font sizing with rem by Jonathan Snook
Extremely useful properties like max-width, min-width, max-height and min-height come into play as well when you’re making responsive websites. Here’s one example of how auto and max-width can be used to make sure images fit tightly and snugly into available space:
Eg-
img {
max-width: 100%;
height: auto;
}
3: Margin and Padding
Margins are paddings are things that will definitely appear. Knowing how these things work will be extremely beneficial when writing CSS.
Margins and Paddings dictate the spaces between elements on your website. They are very similar and have the same units as Width and Height mentioned above.
The only difference between margins and paddings is the area the exert control over. Margins affect the area outside of borders whereas paddings affect areas inside the border. It is useful to refer to the box model below:
CSS Box Model
Ordinarily, margins are written in this manner:
Eg-
div{
margin-top: 20px;
margin-bottom: 20px;
margin-right: 10px;
margin-left: 10px
}
They can be written in shorthand to simplify the lines of codes and make it easier to read. In fact, shorthands are the standard practice and you should know them. Here’s a quick explanation:
div{
margin: 20px 10px 20px 10px;
/* This shorthand refers to TOP, Right, Bottom, Left. Its easier to picture a clock at 12, 3, 6 and 9 respectively */
margin: 20px 10px 20px;
/* This refers to Top, Left and Right, Bottom */
margin: 20px 10px;
/* This refers to Top and Bottom, Left and Right */
margin: 20px;
/* This refers to 20px worth of margin on all 4 sides */
}
Extra tip: margins with auto on the left and right are used to center an element with a display value of block. Its written simply as:
div {
margin: 0 auto;
}
4: Border
Borders are… borders. I’m pretty sure you don’t need an explanation of what borders are.
Borders have 3 different properties that you have take care of:
border-width – width of the border. Same units as width and height
border-style – style of the border. Usual values are solid and dashed. For a complete list, take a look at W3 Schools Website
border-color – color of the border. Hex, and rgb values can be used.
Instead of writing the longer version, you could declare the border shorthand in this way:
div{
border: 1px solid black;
/* border width, style and color */
}
Likewise to margins and paddings, borders refer to all 4 sides. If you are only interested in applying borders to 1 or 2 sides, I generally prefer to stick by border-top, border-bottom, border-left or border-right.
4: Border
Borders are… borders. I’m pretty sure you don’t need an explanation of what borders are.
Borders have 3 different properties that you have take care of:
border-width – width of the border. Same units as width and height
border-style – style of the border. Usual values are solid and dashed. For a complete list, take a look at W3 Schools Website
border-color – color of the border. Hex, and rgb values can be used.
Instead of writing the longer version, you could declare the border shorthand in this way:
Eg-
div{
border: 1px solid black;
/* border width, style and color */
}
Likewise to margins and paddings, borders refer to all 4 sides. If you are only interested in applying borders to 1 or 2 sides, I generally prefer to stick by border-top, border-bottom, border-left or border-right.
Oldest comments (2)
amazingggggggg
loved it
others also say how was it