The ABCs of CSS: A Beginner’s Journey through Basic Properties

Photo by KOBU Agency on Unsplash

Let us start with basics of CSS. It provides us with syntax given below:

selector{
property:value;
}

body{
color:red;
}

This provides basic knowledge of CSS syntax. To actually apply CSS, you have to use one of the three methods of applying CSS discussed in the earlier blog. Concept of selector is also discussed in the previous blog.

You can find about all the properties of CSS here.

CSS Box Model

Box model in CSS represents the structure of the elements and how their dimensions are calculated. It consists of four core elements, i.e.

1. Content: It is the area where actual content like text or images are displayed. Its dimensions like width and height can be configured using the same properties in CSS.
2. Padding: It is spacing area between content area and element’s border. You can specify padding for all sides using padding property, or you can use specific padding properties like padding-top, padding-bottom, padding-right and padding-left.
3. Border: The border encloses the content and padding area. It can be configured using border property. Its width, color and style can be configured using border property. It can be solid, dashed or dotted line.
4. Margin: It is spacing area outside the border of the element. It provides spacing between two elements. Similar to the padding area, its value can be configured directly by using margin property or specific margin properties like margin-top.

The total width of an element is calculated by adding the content width, left and right padding, left and right border widths, and left and right margin. Similarly, the total height is calculated by adding the content height, top and bottom padding, top and bottom border widths, and top and bottom margin.

However, you can change this by modifying the value of box-sizing property. The default value of the property is content-box, i.e. specified width and height values only apply to the content area. When the value is changed to box-sizing, specified width and height also includes padding and border, which makes it easy to predict the webpage layout.

So, understanding this very concept is important for creating desired layout of the web page.

CSS Display

The CSS display property specifies how an element is rendered on the web page. It defines how the box of the element is created and how it interacts with other elements. Some CSS displays are:

1. block: They are types of elements which starts on the new line and take the width available by default. A few examples of block elements are <div>, <p>, <h1> to <h6>, and <li>.
2. inline: Unlike block elements, it doesn’t start on the new line and takes only necessary width by default. A few examples include <span>, <a>, <strong>, and <em>.
3. inline-block: As the name suggests, they are inline elements which behaves like block elements. They don’t start on the new line, but still allows other elements to be placed next to them. They only occupy the space necessary to display the content. A few examples include <img>, <input>, and <button>.
4. none: This value is used to hide the content from a web page. The space occupied by the element is collapsed when this value is used. This is useful when you want to hide the content based on the certain conditions.
5. flexbox: This value provides a flexible container for the items. Flexbox is a powerful layout container which allows you to create flexible layout and responsive websites. It provides properties like flex-direction, flex-wrap, flex-shrink, flex-grow, justify-content, align-items, etc. to make it flexible.

Display value like grid or table are not discussed here because they are either complex or unnecessary.

CSS Fonts

Fonts provide styling to your written content. They provide unique appearance and create a vibe inside web page. Font must be used according to the theme of your website.

You can use any font you want if you know the name. You can just use built-in fonts like Sanserif, Arial, etc. or import fonts like Roboto, monospace, etc. from Google Fonts Website. You can just search it and import it like this in your external css file.

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Roboto+Mono:wght@100;500&family=Roboto:wght@100&display=swap');

Here, I have imported Roboto Mono from the website. After importing the font from the site, you can use the below code to actually use the downloaded fonts:

font-family: 'Oswald', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Mono', monospace;

You can modify other properties of fonts like:

font-size:24px;
font-weight:300;
font-style: italic;
font-variant: small-caps;
text-transform: capitalize;
line-height:1.5;
letter-spacing: 2px;
text-align: center;

1. font-size: sets the size of the font in different units like pixels(px), rem, em, percent(%) or keywords like small, medium, large, etc.
2. font-weight: sets the boldness of the font to keywords like bold, bolder or units such as 100,200,…
3. font-style: sets style to the font to keywords like normal, italic or oblique.
4. font-variant: Determines the appearance of the font to normal or small caps, if supported by font.
5. text-transform: changes the capitalization of the text like lowercase, uppercase or capitalize.
6. line-height: Sets the height of the line of the text i.e. vertical space between the adjacent lines
7. letter-spacing: Gives the spacing between letters of the text.
8. text-align: Adjust the alignment of the text to right, left , justify or center.

Topics like display, fonts and box model are discussed in this blog. Other major CSS topics will be discussed in upcoming blogs.