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
Responsive design ensures that users on different devices can access the same content and functionality, regardless of screen size or resolution.
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.
Improved user experience
By providing a layout that works properly on different devices, responsive design improves website usability and enhances user experience.
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.
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:
- Monitor
- Tablet horizontal
- Tablet vertical
- 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
