Introduction
Aesthetics, styling and responsiveness of a website form an integral part of attracting traffic to the site in today’s day and age, where the attention span of the audience is very limited. CSS (Cascading Style Sheets) is an important tool that every web developer must equip themselves with, as it gives us the ability to easily play with beautiful effects and responsive designs.
Another advantage is that it is easy to learn and grasp once you are familiar with the basic concepts. Let’s dig into the nine essential properties every CSS developer must learn to make amazing front-end designs.
Selectors:
They are used to selecting the elements in the HTML code that are to be styled using CSS. They form the base of external CSS coding and save a lot of time by helping us to apply some CSS styling to a group of similar components. They can be mainly categorized as follows:
- By using the name of the element: The element selector selects HTML elements based on the element name. In the example given below, all the elements under the <p> tag are selected and the font colour is changed to green.
- By using the class: By writing dot(.) followed by the name of a class, we can select all the elements which belong to that class. In the example given below, the <p> tag with class name as “red” is selected and changed to red.
- By using ID: By writing #(hash) followed by the id name of the element, we can select that unique element. In the example given below, the <p> tag with id as “para1” is made bold.
- Grouping Selector: Different selectors which contain the same CSS styling can be group together using a comma(,). This helps in saving time by not writing the same styling multiple times.
For Example – h6, p, h3 {color: red;} Here all the elements belonging to H6 and H3 headings and <p> tag will be assigned font colour red.
- Universal Selector (*): *(star) is used to select all elements on the page.
The following example displays the usage of the above CSS selectors at a glance. Also, note how the font colour property is overwritten in case of the different selectors due to specificity of different selectors.
2. Combinators:
A combinator combines the different CSS selectors. Unlike the grouping selector above, where the different selectors were grouped together, combinators define the relationship between different selectors. They can be mainly categorised as follows:
- Descendant: A particular type of element which is a descendant (present inside) of another element can be selected by using space between the two elements.
- Child: The child selector (>) is used to select all elements that are direct children of a specified element. The difference between the child and the descendant selector can be understood by studying the example given below.
- General Sibling: All elements that are a sibling of a specified element are selected using the general sibling selector (~). Sibling elements are those elements that have the same parent element.
- Adjacent Sibling: Unlike the General Sibling where all siblings are selected, in adjacent sibling (+) only the adjacent sibling is selected.
The following example displays how to use all the above CSS combinators at a glance.
3. Background:
Background properties are used to define aesthetic background effects for elements of the webpage. The most important background properties in CSS are background-position, background-color, background-image, background-repeat and background-attachment. As the name suggests, background-image allows to set an image as a background for an element and the background-colour allows setting a colour by using its RGB value, colour-name, or the HEX value as the background of an element.
We can also set the opacity (transparency) for the background colour. When we set the background-image, it repeats an image both horizontally and vertically, by default. We can use “background-repeat: no-repeat;” to prevent repetition and also specify the position in this case for eg. “background-position: right top;”. To repeat the image horizontally we can use “background-repeat: repeat-x; “. Another important property for the background is background-attachment. It is either fixed or scroll. In the case of fixed, the background image would be fixed even when the user scrolls the screen. Eg. background-attachment: fixed; And in case of a scroll, the image scrolls along when we scroll the page. Eg. background-attachment: scroll;
CSS makes things more simpler by allowing us to write the background properties in shorthand form itself. For example, background: green url(“coding_ninjas.png”) no-repeat right top;
4. Links:
The hyperlinks can be styled by using “a”. Eg. a { color: green; background-color: yellow; }. Also, they can be styled using CSS according to their states. Links generally have four states which are – link, visited, hover and active. a: link is an unvisited link, a: visited is a link which has already been visited by the user, a: hover is when the mouse hovers over the link and a: active is the instance when the link is clicked on. We can also remove the underlines that are present by default in case of links by using “text-decoration: none;”. Example of links in the different states are given below:
a:link {
color: black; /* normal unvisited link state */
}
a:visited {
text-decoration: none; /* visited link state*/
}
a:hover {
background-color: lightgreen; /* when the mouse hovers over the link */
}
a:active {
color: red; /* when the link is clicked on or selected */
}
5. Position:
We can easily manipulate and define how to position an element on the page using the position property. There are five types of position values, namely static, sticky, relative, fixed and absolute. Static is the default positioning of HTML elements. After the position property is set, elements are then positioned using the top, bottom, left, and right properties according to the position values. An element with “position: relative;” is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
An element with “position: fixed;” is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. This is particularly useful for creating fixed buttons for Social Media links. An element with “position: absolute;” is positioned relative to the nearest positioned parent element. Sticky is intermediary of fixed and relative and gives a sticky effect to the element when the page is scrolled. The z-index property can be useful to provide overlapped positioning to the elements.
6. Transform:
This is a useful property of CSS to manipulate layout of the elements by 2-D and 3-D transformation. We can rotate, scale, skew and move elements. It allows us to create beautiful animations using CSS. Some useful methods are listed as follows – scale, skew, matrix, translate, rotate, scaleX, scaleY, skewX, skewY. These were for doing 2-D transformations. For 3-D transformations, there are the methods – rotateX, rotate and rotate. Combining these properties with transition methods helps developers to create amazing animation effects to create interactive websites.
7. Box Model:
This is the most essential part of CSS which needs to be mastered for designing neat and responsive webpage designs. The Box model as the name suggests, is essentially a box like structure to help understand the working of margins, borders, padding, and the content or the element. The padding is the area around the content or the space between the element and the border, while the margin is the space around the border i.e. between the border of the element and other elements. Beginners should invest enough time to clearly understand and distinguish the various parts of the box model. The chrome developer tool is a handy tool to use while writing the CSS as it clearly displays the box-model structure and shows the values for padding and margin.
8. Flexbox:
This amazing property of CSS makes responsive website design much easier and quicker, without the necessity of using float or positioning properties. There are various flex container properties- flex-direction, flex-wrap, align-items, justify-content, align-content and flex-flow which become easier to understand and use after allotting a good amount of time to practise these concepts. It is useful in a wide range of scenarios. Eg. E-commerce website to display various products in a neat layout and a Portfolio website to display various skills and projects.
9. Display:
It is the most important part of CSS, as it tells the browser how an element should be layed out. The major types of display are inline and block, and the main difference between them is- an inline only takes up as much width as necessary (eg. <img>,<span>, <a>) while the block takes up the full width available (eg. <form>, <footer>, <p>, <div>). The default display properties can be overwritten, i.e. a block element can be converted to inline element and vice versa using display property. “display: none;” can be used to hide an element. Another special display property is inline-block which benefits from properties of both inline element and block element. You can set the width-height of the inline-block element and also it would take only the required space.
These were our top nine CSS properties which are essential for every aspiring web designer to create smooth, interactive and aesthetic webpages.