CS 2205 Unit 4 Discussion Post PDF

Preview

Summary

This is the Discussion Forum post for Unit 4...

Description

When we say that style sheets are cascading, we mean “that the order of the CSS (Cascading Style Sheets) rules matter” (MDN Contributors, 2020). With all else being equal in terms of specificity, the browser will use the last CSS they come across in a stylesheet (MDN Contributors, 2019).

Other factors that can affect the order of priority of CSS is the specificity and inheritance. The more specific a selector’s selection, the higher the specificity and priority (MDN Contributors, 2020). For example, an element selector is less specific to a class selector (MDN Contributors, 2020).

Inheritance plays a part as there are some CSS property values that can be inherited from parent to child elements (MDN Contributors, 2020). Some properties that do not inherit include width, margins, padding, and borders (MDN Contributors, 2020). There are “four special universal property values for controlling inheritance” (MDN Contributors, 2020). This includes inherit, initial, unset and revert (MDN Contributors, 2020). Inherit is a little self-explanatory. Initial “sets the property value applied to a selected element to the initial value of that property” (MDN Contributors, 2020). Unset “resets the property to its natural value” (MDN Contributors, 2020). “If the property is naturally inherited it acts like inherit, otherwise it acts like initial” (MDN Contributors, 2020). Revert “reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element” (MDN Contributors, n.d., Revert). Revert works exactly the same as unset except for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side) (MDN Contributors, n.d., Revert).

!important can be used to override all the above rules governing priority in CSS (MDN Contributors, 2020). But use is not recommended as it makes it harder to debug (MDN Contributors, 2020).

The stylesheet in which the CSS declaration is specified in can also affect the order of priority (MDN Contributors, 2020). For example, important declarations in user style sheets trumps important declarations in author style sheets (MDN Contributors, 2020). Important declarations in author style sheets trumps normal declarations in author style sheets (MDN Contributors, 2020). Normal declarations in author style sheets trumps normal declarations in user style sheets (MDN Contributors, 2020). Normal declarations in user style sheets trumps declarations in user agent style sheets also knows as the browser’s default styles (MDN Contributors, 2020).

Five things that you can do with CSS, which cannot be done easily in HTML are: 1) In CSS you can control exactly how HTML elements look in the browser (MDN Contributors, n.d., What is CSS). 2) Can use element selectors to style different elements once instead of having to identify the elements separately in the HTML document and specifying the style manually for each occurrence of that element (MDN Contributors, n.d., Getting Started). By extension of the above point, you can also easily apply the same style across multiple HTML documents if you link the different HTML documents to a single CSS file (MDN Contributors, n.d., Getting Started). 3) Can be used to style things based on their state such as links (MDN Contributors, n.d., Getting Started). Links have an unvisited, visited and being hovered over state for example (MDN Contributors, n.d., Getting Started). CSS can be used to target these different states and apply different styles to the different states (MDN Contributors, n.d., Getting Started). Without CSS, they will just be styled via the default settings (w3schools, n.d.). 4) CSS supports different writing modes, which is the directionality of the text, including rightto-left, top-to-bottom (MDN Contributors, n.d., Handling Different Text Directions). 5) Styling tables – spacing and layout, fonts, graphics and colors, zebra striping and styling captions (MDN Contributors, n.d., Styling Tables).

References: MDN Contributors. (2019, December 4). CSS basics. Retrieved from http://www.w3.org/community/webed/wiki/CSS_basics MDN Contributors. (n.d.). Getting Started. Retrieved from https://developer.mozilla.org/enUS/docs/Learn/CSS/First_steps/Getting_started MDN Contributors. (n.d.). Handling Different Text Directions. Retrieved from https://developer.mozilla.org/enUS/docs/Learn/CSS/Building_blocks/Handling_different_text_directions MDN Contributors. (n.d.). Revert. Retrieved from https://developer.mozilla.org/enUS/docs/Web/CSS/revert MDN Contributors. (n.d.). Styling Tables. Retrieved from https://developer.mozilla.org/enUS/docs/Learn/CSS/Building_blocks/Styling_tables MDN Contributors. (2020, January 8).Text styling with CSS. Retrieved from https://developer.mozilla.org/enUS/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

MDN Contributors. (n.d.) What is CSS. Retrieved from https://developer.mozilla.org/enUS/docs/Learn/CSS/First_steps/What_is_CSS w3schools. (n.d.). HTML Links. Retrieved from https://www.w3schools.com/html/html_links.asp...