Responsive styling - CSS inheritance

BOWWE University

Responsive styling - CSS inheritance

Responsive styling in CSS refers to the practice of creating styles that look good on different types of devices and screen sizes. With the growing number of devices and screen sizes, it has become important for web developers to create sites that look and work well on multiple devices.

 

To create responsive websites, you can use a variety of techniques - in this tutorial you'll learn the basics of inheritance.

Benefits of responsive styling

1
Increased accessibility

Responsive design ensures that users on different devices can access the same content and functionality, regardless of screen size or resolution.

2

Reduced time to create and expand a website

Responsive design eliminates the need to create and maintain separate versions of a website for different devices, which can reduce development time and costs.

3

Improved user experience

By providing a layout that works properly on different devices, responsive design improves website usability and enhances user experience.

4

Increased mobile traffic

With the increasing use of mobile devices to access the Internet, responsive design helps ensure that a website is accessible to a wider range of users, and can therefore increase traffic.

5

Improved SEO

Having a single version of your website can make it easier for search engines to index your content, improving your website's search engine optimization (SEO).

Inheritance

Inheritance is the mechanism by which the properties of a styled element are passed on to its descendants. This allows you to set styles on a parent element and propagate those styles to its children. This saves the need to repeatedly set the same attributes on each element individually. The styles are applied in order of precedence, which you can check using the Widget Tree (which shows all the elements used on the page and their hierarchy) or the bar at the bottom of the page (which shows the element selected in the wizard and its ancestors).

If a child element does not have its own styles, it inherits the styles of its parents. The style imposed on the element lying lower in the hierarchy (child) will have a higher priority than the formatting given to its ancestor (parent).

Example:

A green font color has been set for this area. Inside it is a paragraph, on which no additional style has been applied, so it also has a green color - this property was inherited from its ancestor (the Area widget).

Inside the paragraph there is text with a given attribute of bold and background color, these are properties that have been assigned to this element and not received from the parent, so these properties take precedence over others. 

If there is a "collision" of properties (i.e. on the child and on the parent, the same property is applied, but with a different value - such as color), the property that was set on the child element takes precedence over the same property given on the parent element.

Breakpoints

A site created according to RWD (Responsive Web Design) principles adapts to the resolution of the screen on which it is displayed. When styling your site in BOWWE, each device has dedicated breakpoints, where both the layout of the page and the appearance of graphic elements can change (they can disappear or adjust width and height). Breakpoints are related to screen resolution and allow you to adjust the style appropriately for the devices that Internet users use.

 

 

Breakpoints in BOWWE

  • Monitor  >1200px
  • Tablet horizontal 1199px - 992px
  • Tablet vertical 991px - 768px
  • Phone >768px

Inheritance hierarchy

Changes and styles that you make to widgets in the view of one device will be transferred to all devices lower in the inheritance hierarchy.

 

Inheritance hierarchy:

  1. Monitor
  2. Tablet horizontal
  3. Tablet vertical
  4. Phone

 

In practice, this means, for example, that a style given to an element in monitor mode will overlap with corresponding elements in other modes, while a change made in the mobile version will not apply to the view of the page on a device higher up in the hierarchy.

Remember

In a parent-child relationship, not all attributes are inherited between elements in the widget tree.

Here - you will find a full list describing the inheritance of attributes. We have included some of them below.

Inherited properties - passing from parent to child:

  • color
  • font-family
  • font-size
  • font-style
  • font-weight 
  • text-align

Non-inherited properties - not passed from parent to child:

  • background
  • border
  • margin
  • padding
  • width
  • height
  • position
  • display

Congratulations!

You already know how to create a responsive website!

Dedicated to you

Didn't find the answer?

No matter what your problem is. We are here to help you find a solution