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

Applying CSS styling to PHP documents

I am a beginner, so please go easy on me. I am looking to style variables like $product_name, $author, and $details. I was thinking of styling the echos, but in this scenario, the only echo is: <?php // Establish connection with the MySQL database ...

phpcsswhile-loop

Craft a unique parallax effect using Framer Motion's clipping feature

To help visualize my concept, I have sketched it out using Figma. This idea involves a slide transitioning between pages. The goal is to cover the entire page with a sliding effect, and then place a sticker (dubbed the Parallax Box) on top of it. However ...

cssreactjsnext.jsframer-motion

How to Create Smooth Transitions for Text Arrays using jQuery's Fade In and Fade Out Features

I need to loop through an array of text and apply jQuery's fadeIn and fadeOut functions to each element. var greetings = ["hi, I'm", "bonjour, je m'appelle", "hallo, ich heiße"] The HTML structure I want is as follows: <h2><span ...

javascriptjqueryhtmlcssfadein

Maintain the fixed position of the Google Map <div> while allowing background <div>s to scroll

I'm having trouble keeping a Google Map div fixed on the screen while allowing my background, consisting of multiple scrolling divs with content inside, to scroll as normal. My attempt to wrap the map div in another fixed div resulted in the map disa ...

htmlcss

Alter the color of textbox text using JavaScript

I have a text input field. When clicked, I want to change the text color style using JavaScript. Previously, I successfully achieved clearing the inner content of the textbox when clicked and reverting to the default version on blur. This code is currently ...

javascripthtmlcsstextbox

Unable to Trigger Jquery Scroll Event

I'm trying to figure out why a div is not appearing when the page is scrolled down. The issue is that my page body and most other elements have overflow hidden, except for a table that appears at a certain point on the page when a button is pressed. T ...

jqueryhtmlcssscroll

Loading Kendo JS on the client side proves to be rather time-consuming

Working on my project, I have encountered a problem with the kendo ui scheduler where the downloading of the kendo js and css files on the client side is causing slowness on our website. To address this issue, we are attempting to download the kendo js and ...

cssangularjsuser-interfacekendo-uischeduler

Preserving distance between absolute elements

I'm facing an issue with my menu animation using jQuery. In order to achieve the desired effect, I am forced to use position: absolute. My challenge is maintaining consistent spacing between each text string, especially since they vary in width. Unfor ...

jquerycssanimation

Creating a Form in a Popup with Bootstrap

I have implemented Bootstrap on my website. Check it out at: hubb.tekkkz.com I am facing an issue where, when clicking on the login/register button on the right, the modal pops up. However, the user input elements within the modal are not taking up the ful ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adding a CSS class to an HTML element using JQuery

I have a collection of tabs, and I want to dynamically add an <hr> element with the class "break-sec" when a certain class is active. This element should be placed within a <span> element with the class "vc_tta-title-text" after the text. Here ...

javascriptjqueryhtmlcssvisual-composer

What is the best way to arrange the second div in the second row, while the first and third div are displayed on the first row within the MUI appbar

I have 3 components in the appbar, 1. Logo 2. Search Input 3. Login Buttons When viewing on desktop, all three components will be in a single row as shown below https://i.stack.imgur.com/FYMEH.png Below is my code snippet: export default function NavBar ...

cssreactjsflexboxmaterial-ui

Does the CSS :not() selector function properly when used with distant descendants?

Check out the official documentation for the CSS3 :not() pseudo-class at this link: http://www.w3.org/TR/css3-selectors/#negation Additionally, you may be interested in the proposed enhancement for CSS Selectors Level 4 found here: http://dev.w3.org ...

csscss-selectors

Tips for creating a section that perfectly stretches to cover the entire view port in HTML

After browsing through this website, I was inspired by its design and wanted to replicate something similar. The unique approach they took to ensure each section fits 100% of the viewport caught my eye. They utilized a "div section-background" within each ...

htmlcssbackgroundviewport

Focusing on a specific image using Jquery

I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".hero1project3 img"? HTM ...

javascriptjqueryhtmlcss

How to position elements within a content block in HTML with a CSS stylesheet

Looking for guidance on how to align text and image within a block in HTML using only a .css file. Specifically, I need the text to be on the left side and the image on the right. Since I am new to CSS, I could use some direction on where to start. Any t ...

htmlcss

Evaluating CSS Specificity

Is there a recommended approach for automatically testing css selectors? I am in the process of developing a SCSS framework and I want to integrate automated tests. Specifically, I aim to verify that the css selectors are functioning correctly. For examp ...

cssunit-testingseleniumtestingcss-selectors

When utilizing the ::first-letter pseudo-element on <sub> and <sup> tags

Why is the <sub> and <sup> not supporting the ::first-letter CSS pseudo-element? Any solutions? p:first-letter, sub:first-letter, sup:first-letter { color: red; font-weight: bold; } <p>This text contains <sub>subscript</su ...

javascripthtmlcss

Animating a dotted border path in SVG for a progress bar effect

I am attempting to create an animation for a dotted SVG circle that resembles a progress bar, where it fills itself over a duration of 3 seconds. However, I am facing difficulties in achieving this effect with the dotted border. The current code I have doe ...

javascriptjquerycssanimationsvg

Two nested divs positioned below text within a parent div

I am styling a content div with text and two child divs positioned next to each other within the content div. My goal is to have the child divs display below the text, rather than beside it. body { text-align: center; } #first, #second { border: so ...

htmlcss

Included adaptable background-images in the upload

Recently, I developed a RoR based app/website that allows clients to upload their own background image to the cover page. Although the current setup works well with a single image, I am aiming to enhance the site's responsiveness by enabling clients t ...

ruby-on-railscssamazon-s3paperclipbackground-image