Can you explain the distinction between Declared Values and Specified Values?

I found myself confused by the distinction between Declared Values and Specified Values.

Initially, I believed that the Declared Values were set by the author.

These values then filter down to a single value, known as the "winning value", which becomes the Cascaded Value.

However, the specification later defines the Specified Values.

The specified value is the intended value of a property for an element according to the style sheet authors.

This led me to question whether Declared Values represent default values for elements. If so, there should only be one default value, but it seems that multiple values and cascading rules are applied to determine the final "winning value."

css

Answer №1

To better understand, let's consider a simple example. Imagine we have the following HTML code:

<!DOCTYPE html>
<title>My demo</title>
<style>
  #foo { color:orange }
  .content { color:red }
  div { color:blue }
</style>
<div class="content">Lorem ipsum dolor sit amet</div>

In this scenario, there are three rules to consider.

#foo { color:orange }

This rule does not affect our div as it lacks the id "foo". The color property value of orange is not assigned to our div.

.content { color:red }

This rule impacts our div because it possesses the class "content". The color property value of red is specified for our div.

div { color:blue }

Similarly, this rule applies to our div since it is a div element. The color property value of blue is also set for our div.

Following this, the cascade comes into play. With both declarations having equal origin and importance, specificity helps in deciding. The rule .content { color:red } has higher specificity, hence providing the ultimately selected value.

As a result, the color property of our div is defined with the value red.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for positioning two divs side by side in block formation

I'm attempting to display two distinct div elements as blocks, one for the name and the other for the names. Here is the Fiddle The names block should be displayed as a separate block next to the name div, regardless of screen responsiveness. How ca ...

htmltwitter-bootstrapcss

Is there a way to incorporate a responsive side menu using JQuery or CSS3 that can shift the entire page layout?

Hey there, I'm currently trying to incorporate a responsive side menu into my website using either JQuery or CSS3. What I need is a side menu that will smoothly shift the page content when a link is clicked, and also adds a close button (X) to the men ...

javascriptjquerycssmenuresponsive-design

Creating a Multilevel Dropdown Menu: A Step-by-Step Guide

I am curious about how to create a multilevel dropdown menu using Bootstrap 5 and vanilla JavaScript. I created an example based on the Bootstrap 5 dropdowns component documentation, but it did not display when I clicked on it. The issue seems to be relat ...

javascripthtmlcssbootstrap-5

Can Glychicons be utilized in form submission buttons?

While I can easily create buttons with glyphicons using the <a class="btn...", I'm facing an issue when trying to do the same with <input type="submit" class="btn btn-default" value="" />. Instead of displaying the button, it appears blank. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Adjusting Column Placement in Bootstrap Grid System

I am struggling to achieve a specific bootstrap grid system and could use some guidance. Here is the grid system I am trying to create: https://i.sstatic.net/fhEHU.jpg I have attempted to implement the grid system using the code provided in this JSFiddl ...

csstwitter-bootstrapbootstrap-4grid-layout

Achieving equal height rows in Bootstrap to fill the page height

I'm facing a challenge with my code that consists of 8 bootstrap row elements. I want these rows to have equal height so that when combined, their height is equal to the screen height. Additionally, I need all the rows to be visible without any scroll ...

htmlcssbootstrap-5

sliding to the right gets jammed

I am encountering a peculiar issue with Multi-page slide functionality. Whenever I attempt to switch pages, the new page gets stuck on the left before sliding out into position. Feel free to test this problem using my JSFiddle This is the JQuery code that ...

javascriptjqueryhtmlcssslide

How can we stop Vuetify from overwriting Bootstrap3's classes when using treeshaking?

I am currently in the process of transitioning an app from jQuery/Bootstrap3 to Vue/Vuetify. My approach is to tackle one small task at a time, such as converting the Navbar into its own Vue component and then gradually updating other widgets. Since the n ...

cssvue.jstwitter-bootstrap-3vuetify.js

Maintaining the active status of section 1 after the page is refreshed using Javascript and CSS

I have a total of 3 buttons and 3 hidden sections available, which can be seen in the image below: click here for image description Whenever one of the buttons is clicked, the respective section transitions from being hidden to becoming visible: click he ...

javascripthtmlcss

Attempting to utilize JavaScript in order to reset a text input field

I'm having trouble clearing a text field using this function. The alert is working but the field remains unchanged. What could be the issue? This function is designed to work on any text field. <!DOCTYPE html> <html> <head> ...

javascriptcss

Enhance data table by displaying a set number of rows that do not completely fill the table's height

I'm currently attempting to implement a v-data-table with fixed header and footer. However, I've encountered an issue where if I set the table height to be larger than the row height, the table takes on the defined height and the footer ends up b ...

javascriptcssvue.jsvuetify.jsvuetify-datatable

What is the process for eliminating the hover effect on a Bootstrap button?

I have customized a Bootstrap button in my stylesheet to make it dark, but it still has a hover effect from Bootstrap that I want to remove. How can I get rid of this hover effect? Take a look at the code snippet below for reference: .btn-dark { min-w ...

htmlcsstwitter-bootstrap-3

Adding a three-dimensional perspective to an HTML5 canvas without utilizing CSS3 or WebGL

Here is a canvas I am working with: http://jsbin.com/soserubafe Here is the JavaScript code associated with it: var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var w = canvas.width; var h = canvas.height; var cw=canvas. ...

javascriptcsshtmlcanvas3d

Tips on eliminating the top margin on my webpage

I am in need of assistance with removing the margin at the top of my page. Take a look at the screenshot for reference: As shown in the image, there is a red arrow pointing to the problematic margin. Can someone guide me on how to eliminate this margin? B ...

htmlcssmargin

Tips for centring navigation horizontally and making it responsive using CSS

Is there an effective way to horizontally center the navigation within a div using responsive CSS? HTML: <nav id="centermenu"> <ul> <li><a href="#">Business</a></li> <li><a href="#">Spec ...

css

Monitoring changes within the browser width with Angular 2 to automatically refresh the model

One of the challenges I faced in my Angular 2 application was implementing responsive design by adjusting styles based on browser window width. Below is a snippet of SCSS code showing how I achieved this: .content{ /*styles for narrow screens*/ @m ...

cssangulartypescriptsassrxjs

Is there a different method like Calc() to create a static sidebar alongside content?

Is there a way to achieve a fixed sidebar on the left and a content area on the right without using calc() in CSS? I'm looking for a more universally supported method that works across different browsers. .left-sidebar { width: 160px; ...

css

Is there a sophisticated CSS compressor that can eliminate unnecessary code and separate identical rules with commas?

Consider this input{margin:0}body{margin:0;background:white} can also be written as input,body{margin:0}body{background:white} or like this input,body{margin:0}body{margin:0;padding:0} and simplified to input,body{margin:0}body{padding:0} Bottom Li ...

csscompiler-constructionminify

Why does the div inside the tbody element get automatically shifted outside of the tbody during rendering?

Below is a snippet of my code: <body> <table> <tbody> <div>test</div> </tbody> </table> </body> Upon executing the code mentioned above, it transformed automatically in ...

htmlcsshtml-table

Close button situated at the top-right corner overlapped by HTML/CSS styling

Currently attempting to position a button overlapping and extending outside of its parent div, much like the illustration provided. However, my current efforts result in the button being contained within the parent DIV. The visual reference below showcases ...

htmlcss