CSS Website Layout

The general layout of any website is mostly the same.
There are basically 4 parts:

  • Header
  • Menus
  • Content
  • Footer

This layout of websites is called the website layout. There are numerous other layouts for the websites used in different genres of websites, but this layout is pretty standard for most. So let’s take a look at these components one by one.

Header

The header is the topmost part of the page. Generally, it contains the website name and/or logo. The image showing the website name/logo is mostly set as a link to the homepage of the website.

Navigation Bar/Menus

The various pages in the websites hold different purposes. The Navigation bar contains links to these pages that will help you navigate through the website.

Content

The content is laid out as per the target audience of the website. For example, for mobile devices the screen is less wide than the laptop users, thus the content tends to be rendered in a single column. While for the laptop users, the columns may go up to 4 or more.

However, developers are now working more towards creating responsive content columns that automatically change with the change in screen size. We have the @media rule that can help us do that. We also have some layouts altogether meant for this purpose (for eg. Flexbox).

Unequal Columns

As per the content, the column size may grow or shrink. For example, the column containing cover picture and headline of any news website page can be bigger than the columns containing the detailed news. Many websites have a side column meant to serve as something similar to an additional navigation bar.

Footer

The footer is the bottommost section of the page. It contains links to pages like Privacy Policy, sitemap, copyright, contact us etc.

CSS Combinators

Sometimes a selector may not be a simple element but a group of multiple selectors being styled in a similar fashion. These multiple simple selectors may have some dependency/relationship with one another. To define such relationships. CSS uses what is called a Combinator. So, if a selector contains more than one simple selectors, we can use combinators between two simple selectors to explain their relationship.

Heres’s the list of combinators used in CSS:

  • descendant selector: Marked by ‘space’
  • child selector: Marked by the greater than (>) sign
  • adjacent sibling selector: Marked by the plus (+) sign
  • general sibling selector: Marked by the till (~) sign

Descendant Selector

This is the relationship where one element is descendent of the other. So for instance, if you put ‘div’ and ‘p’ in a selector separated by spaces then the subsequent style will be applied to all the

tags that will fall inside the <div> element.

Child Selector

The difference between descendant and child is that child selector only defines the immediate child. Therefore, if the ‘div’ and ‘p’ are separated by > sign, the style will be applicable only if the p is the immediate child of div.

Adjacent Sibling Selector

So, adjacent means on the same level in the hierarchy. So if both div and p are on same level i.e. are children of same parent or don’t have a parent at all, the div + p selector will style the p element. The keyword here is adjacent. So, the p should be immediately following the div element.

General Sibling Selector

This is different from the adjacent sibling selector in the sense that no matter the adjacency, if two elements are siblings, the style can be applied to that selector. So, div and p may be sibling but p may not be immediately following div and will still be styled for div~p selector.

CSS Functions

CSS has a list of inbuilt functions that can be used as the value for different CSS properties. Here’s the list of the functions with a small description for each one of them.

Sr NoFunctionsDescription
1
attr()Can be used to retrieve the value of any attribute for a particular element. You can give the attribute name as the argument.
2
calc()The values for CSS properties can be calculated using this function. Comes very handy while calculating the dimensional properties like height, width etc.
3
cubic-bezier()It is used to define a curve called the cubic-bezier curve. It takes 4 points as arguments and can be used define transition and animation speed curves
4
hsl()Another way of defining colors. H-S-L stands for Hue Saturation and Lightness. We can give the values for each as arguments to the hsl() function to get a desired color
5
hsla()Same as hsl() but here we also have the alpha mode to set.
6
linear-gradient()Can be used to define a linear gradient of colors. At least two colors need to be passed as arguments. The gradient, top to bottom, goes from first color argument to last color argument

7
radial-gradient()Defines the radial-gradient of colors. Here also, at least two colors are required. The gradient, center to edge, goes from first color argument to last color argument
8repeating-linear-gradient()
We can repeat the linear gradient using this function. Apart from the color arguments we can also need to give color stop values in percentage or length. The color stop values decide the the smooth transitions of the color upto a certain point.
9repeating-radial-gradient()
Similar to repeatin-linear-gradient(), except it defines repeating radial gradients. Can also use color stops.

10
rgb()The RGB mode for defining the colors
11
rgba()Along with the Red-Green-Blue of RGB, this also has the Alpha mode to define
12
var()For custom properties, the value can be inserted using this function

CSS Pagination

Pagination is somewhat similar to a navigation bar except that it has different page numbers that you can directly access. The list contains a series of page numbers (consecutive) and generally has forward and backward buttons at the end to navigate to next page. Pagination is very useful when the website containing data that is spread through multiple pages, like search engines.

Simple Pagination

As mentioned before, the simplest form of pagination contains 2 parts:

  • List of page numbers: A list of numbers in consecutive order where each number is a link to the corresponding page.
  • Forward and Backward Button: You can navigate to the immediate next or immediate previous page using these buttons. It is also helpful when your destination page is not present on the list.

The display property for pagination is generally set to inline-block to keep the list in a horizontal line.

Active and Hoverable Pagination

To highlight the current page you can style the corresponding page number, a bit different than other page numbers in the list. This can be done by creating a .active class and using it with the anchor tag for the current page. You can also add a hover effect that for other pages to notify the mouse pointer.

Rounded Corners

For further styling, you can make the corners rounded for the highlight and hover effect on the page numbers.

Transition Effect

We can add a transition effect to be applied with the hover.

Border

Adding borders to the page numbers for a neat list. To style it more, we can make the borders rounded for the first and last link or add space between the links.

Pagination Size

We can increase or decrease the font size using the font-size property.

Center Align

To align the pagination int center you can set the text-align property to center.

Create tooltips with CSS

The tooltip element of the web-page is useful to provide some information about other elements (mostly form fields). We cannot give all the information about the element in the label due to obvious reasons. Therefore, the tooltip specifies the additional information to help the user understand the elements every time they hover the mouse over it.

Basic Tooltip

The basic tooltip is created by adding an inline element inside a container tag and making it hidden. The said inline element (like ) will have its visibility set to hidden. It will only appear when we hover the mouse over its container element, displaying the text written on it. To stylize it more, you can give desired, color, font, border-radius etc.

Positioning Tooltips

The positioning of the tooltip can be done with respect to its target element. For example, if you want the tooltip to appear at right of the containing element, you can keep the left property as >=100% so that the tooltip doesn’t hide the actual element. Also, make sure that the z-index for the tooltip is positive so that it’s not hidden by other elements on the page.

Tooltip Arrows

We can also create and arrow to specify the target element for the tooltip. In order to do this, we’ll first have to identify the side of the tooltip where the arrow has to be added. The arrow can be created on that side by adding “empty” content after tooltip using the pseudo-element class ::after and the content properties (like borders).

Fade In Tooltips

You can also animate the tooltip by giving the fade in effect. This can be done by increasing the opacity of the tooltip element over a specific duration. Thus, when you hover over the target element, the tooltip will appear in a fade in manner. You can set the speed curve for the animation as per your desire.

CSS Pseudo-Elements

Pseudo-elements can control the styling of specific parts of the elements. The pseudo-elements have a double colon before them and can be used by being added after the selectors like
selector::pseudo-element{…}
The pseudo-elements supported by CSS are:

  • ::first-line
  • ::first-letter
  • ::after
  • ::before
  • ::selection
  • ::first-line

This is to stylize the first line of the text content. You can alter the following for this element:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-letter

This element concerns the first letter of the text. In addition to above mentioned properties, first-letter can also by stylised for:

  • margin
  • padding
  • border
  • float

::before

This pseudo-element helps us to insert anything before the element content. You can insert an image before your text using ::before.

::after

It is the opposite of ::before. Here, you can add something after the element content.

::selection

The selection of text generally inverts the background and font color of the selected text. For example, if you select a black text on white background, it will turn to something like white text on black background. However, these effects can be changed in web-pages using the pseudo element ::selection. ::selection can help us set the background color as well as the font color of the selected text. The IE 8 and earlier versions don’t support this pseudo-elements.

Multiple pseudo elements

We can also combine the effects of the pseudo-elements. For example, if you want the first letter to be in one color and rest of the first line in another color, you can set both the ::first-letter and the ::first-line for that element. Similarly, you can combine the effects of first line with ::selection or add some image before or after the text using ::before and ::after.

Apart from this, you can also combine the pseudo element with the element classes. All have to do is mention the element then its class and finally the pseudo element, like:

selector.class::pseudo-element

CSS Box Sizing

The actual rendered width and height of any element is calculated by including the width and height set along with that of its padding and borders.

However, CSS has a way to include these two within the total height and width of the element. This is where Box Sizing comes in picture.

Here’s the default formula for calculating the rendered width and height of the element

width (set using width property) + padding (left and right) + border (left and right) = actual width of an element
height (set using width property) + padding (top and bottom) + border (top and bottom) = actual height of an element

In short, the height and width of the element appear to be more than what was set by you in the CSS design. This problem is solved by the Box-sizing feature of CSS.

Here, the padding and border are also included within the element’s total dimensions rather than in addition to it. To do this, we use the CSS property box-sizing property. We give the value as “border-box” to include the padding and borders within the box.

Basically, the box-sizing property helps us to control the area for which we want to set the width and height property. It can just be the content area or the padding and borders included as well.

Here are some permissible values for the same:
content-box: This is the default value. The width and height properties can only set the dimensions for the content area and hence the rendered element will have a slightly larger appearance because of the added dimensions of padding and border.
border-box: The width and height properties set the cumulative dimensions of content area, padding, and border.
initial: Sets the default value
inherit: Inherits the whatever value is set for the parent element in this property. If no value is set in the parent element, content-box will be set by default for both.

CSS Media Query

Media query was introduced in CSS3. The feature uses the @media rule which helps us to include certain CSS properties only if some conditions are met.

Breakpoint

Firstly, we can start with the breakpoints. Even if they’re responsive, the web-pages may, sometimes, not look very good on small screens. To solve this issue, Media Query helps us add breakpoints that will make the elements behave differently for different screens.

For instance, if you put a breakpoint at, say, 700px The elements design will automatically shift at screens less and more than 700px

Mobile First

It is a standard convention to design the page for mobile first and then for desktop or any other device. Thus, instead of the styles changing at widths less than 768px, we should design them to change at widths more than 768px.

Multiple Breakpoints

We can add multiple breakpoints for different screens like phone, tablet, desktop etc. Typically breakpoints are created at 5 points i.e.:
600px (min-width)
600px (max-width)
768px
992px
1200px

Portrait / Landscape

The browser can have two different orientations – Portrait or Landscape. The portrait is the orientation where, conventionally, height is more than the width and vice-versa for landscape.

Media queries can help us change the layout based on these orientations. You can set some CSS properties that will only work for the Landscape orientation or Portrait orientation.

Hide Elements

We can also hide some elements on different screens based on their size. This helps us to organize the elements better on smaller screens where they can be too much after a certain number.

Font Size

The text on the web pages also needs to be handled for its font-size on different screens. This ensures the readability of the text by keeping it just the right size as per the screen.

CSS Flexbox Layout Module

CSS had four known layout modes before the Flexbox Layout module was introduced. We had:
Block
Inline
Table
Positioned

With the help of flexbox or the Flexible Box Layout Module we can easily design a flexible responsive layout structure that does not need float or positioning.

Elements

To start with, we need to define what is called a flex container. A flex container is, basically, a parent element whose display property is set to ‘flex’. By setting the container element as the flex container, following properties are enabled:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Let’s take an individual look at them

flex-direction:It states the direction in which the flex items will be stacked

flex-wrap: We can set if the flex items need to wrap or not, using this property.

justify-content:This is to align the flex items

align-items: This is for the vertical alignment of the items.

align-content: The flex lines can be aligned using this property

Perfect Centering: It is an issue of aligning the element in a flexbox, exactly at the center in both directions. This can be achieved by setting both, justify-content and align items to the center.

Items

Items/child items/flex items are the direct children of the flex container. Here are the properties associated with them:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
To specify the order of the items

flex-grow: Using this property, we can decide how much an item is going to grow relative to the other flex items

flex-shrink: Opposite of flex-grow. Specifies how much the item would shrink relative to other items.

flex-basis: The initial length of the flex item.

flex: Shorthand property; can be used to set the flex-grow, flex-shrink, and flex-basis properties.

align-self: You can specify what alignment an item will have in the flex container using this property.

Responsive Image Gallery

We can also create responsive image galleries using the flexbox layout. The gallery will have four, two or one full-width image(s) in a row, as per the screen size allows

CSS Multiple Columns

CSS can help you put the text content in multiple columns just like the newspapers do. This makes a large amount of text more presentable and also optimizes the space usage. The multi-column layout is used for this purpose.

To achieve the multi-column layout on the web-pages, we need to know about these following properties:
column-count
column-width
column-gap
column-rule-style
column-rule-width
column-rule-color
column-span

We will now study all these properties one by one.

column-count

It is the count as to how many columns the element is going to be divided into.

column-gap

For a presentable display, the different columns need to have a visible gap. This can be achieved by providing a suitable value to the column-gap property.

column-rule-style

The rule here is the separating lines for the different columns. We can style the column-rule with different properties. The column-rule-style specifies the style of the rule that we’ll use.

column-rule-width

The width of the columns rule can be altered using the column-rule-width property. You can specify the value according to how thick you want the rule to be.

column-rule-color

The color of the column rule is generally kept in a shade darker than the background color. The property column-rule-color helps us to set the color for the rule.

All the column-rule=* properties can be set using the short and column-rule. The values can be in any order for different properties.

column-span

An element can span for multiple columns and this is decided with the help of column-span property. Generally, we use this property for the text elements only to set the extent to which they can expand over the columns.

column-width

We can set the width of the columns using this property. An appropriate size for the column-width is essential to make the content attractive and presentable and also ensuring proper usage of the horizontal space.