Looking to organize all the CSS code on my website in a specific manner. I want to define the type with details such as size, weight, and color. For example:
<h1 bold blue>Hello world</h1 blue bold>
So essentially, the CSS file will include:
h1 {
font-size:20px;
}
bold {
font-weight:bold:
}
blue {
color:blue;
}
This way, during the design process, I can easily mix and match colors and sizes as needed. Is it possible to implement something like this?
It may not be possible exactly as you envision, but there is a workaround:
<h1 bold blue>Hello world</h1 blue bold> // your idea
<h1 class="bold blue">Hello world</h1> // correct html, slightly shorter
Additionally,
h1 {
font-size:20px;
}
.bold { // added . for being a class
font-weight:bold:
}
.blue { // added . for being a class
color:blue;
}
CSS variables can be used with tools like lesscss, but this differs from the method you mentioned and requires valid HTML markup.
EDIT:
Please consider that using blue and bold as classnames in a real project may not be ideal. It's best to follow edem's advice or tim's explanation, focusing on semantical markup guides instead of combining different sets of CSS rules through classes.
Using colors and font-weights as identifiers can be unreliable. Imagine if "blue" no longer represented the color blue, but now stands for red instead?
Instead of relying on specific styling properties, consider the purpose of your style (such as article byline or picture caption) and name them accordingly to ensure clarity.
By combining classes and focusing on semantic meaning, you can achieve your desired design without being limited by changing styles.
This goes against best practices. Consider this scenario: you have an article header type that appears on every article page, and a main header that is displayed on every page:
.mainHeader {
font-size:20px;
font-weight:bold:
color:blue;
}
.articleHeader {
font-size:15px;
font-weight:bold:
color:red;
}
Now, what if one day you decide to change the color of your article header from blue to something else. If you modify
.blue {
color:blue;
}
to
.blue {
color:red;
}
this wouldn't be ideal. It's important to name your classes/ids based on their semantic meaning.
The goal of CSS is to be concise so that you can alter the appearance of your entire page with just a few lines of code. The approach suggested here is not concise and therefore not considered good practice.
I recommend using Less CSS as mentioned in the previous answer. Additionally, if you are utilizing a scripting language like Python or PHP on your website, consider using a template engine that supports inheritance. This way, you can generate your own CSS code and utilize variables, which goes beyond traditional CSS capabilities.
Absolutely! Utilize classes for styling.
<h1 class"bold blue">Hello world</h1>
h1 {font-size:20px;}
.bold {
font-weight:bold:
}
.blue {
color:blue;
}
There is a radio button on my webpage that looks like this: <div id="someId"> <label class="radio-inline"> <input name="x" type="radio" onchange="GetSelectedVal();">Yes</label> <label class="radio-inline"> ...
My text fields have server-side validation messages. The field 'title' is a required field on the server side with a '[Required]' data attribute in the class, but it only seems to be checked on a postback or form submit. I am saving the ...
While I know this question has been asked before, I can't seem to locate the posts I remember reading about it. I apologize for any duplication, but I am trying to implement a "click anywhere BUT here to close element overlay" effect on my personal we ...
Looking to provide users with the ability to construct a table where they can create expressions. For example, in the expression shown below (((c1 A/O c2) A/O C3) A/O C4), where A/O represents 'And' and 'Or' conditions selected by the u ...
Let's dive in, I may be completely off track here. I am currently working with Wordpress. On a page I am creating an HTML select menu (Main Menu) with options that correspond to each page on the site. This menu is visible on the page. In addition, ...
Recently, I initiated a new Next.js 13 application, Within this project, there exists a file named main.modules.scss .heading { font-size: 4rem; color: #000; } .dark .heading { color: #fff; } My intention is to utilize this file for styling ...
I'm currently working on adding a button to my website portfolio that allows users to download my CV when clicked. The functionality works perfectly fine on my localhost, but after deploying it to AWS Amplify, I encountered an error. The error occurs ...
I have been working on creating an onclick dropdown menu for mobile devices that should disappear when viewed on wider screens, but I've encountered an issue where the links in the menus are not clickable even though the @media query is set up correct ...
I have a modal window that includes a keyboard, but I'm encountering some issues. Despite adding overflow:'hidden' as inline CSS, the scrollbar refuses to disappear. Furthermore, even when utilizing container-full padding-0 in Bootstrap, th ...
Is it possible to modify the styles of two different divs using CSS when hovering over one div? #down-icn { position: absolute; bottom: 0; right: 25px; color: #fff; -webkit-transition: color 0.25s ease; border-color 0.5s ease; -moz-transition: colo ...
I have a primary layout file that is utilized in the majority of views. Within this layout, I am integrating a module using the Grails resources plugin. <r:require module="core"/> The definition of modules can be found in the conf/ApplicationResour ...
Is there a way to align two buttons in the center on the same line, and then position a selector to the right of those centered buttons? How can I achieve this arrangement? Essentially, how do you position an element in relation to a centered div? UPDATE: ...
Can you help me troubleshoot why my css triangle isn't displaying before my span? I've tried everything but it just won't show up. .triangle:before { width: 0; height: 0; border-top: 3px solid transparent; border-right: 6px solid ...
After upgrading my project from NextJS 10 to NextJS 12, everything is functioning normally except for Storybook, which is now missing its styles. I utilize the styled-jsx library to create embedded css, implementing it in this way: const SearchResult = ({ ...
I am currently working on a responsive design project and I need two columns of equal height. I do not want to rely on JavaScript for this, and I prefer having some whitespace between the columns to enhance readability. I have tried two different layouts; ...
I'm wondering why the columns.render method is not part of the execution flow when using DataTable().draw(). For instance: HTML <table id="data"> <thead> <tr> <th>TimeColumn</th> < ...
I am trying to customize my context menu, but I'm having trouble with the white space between the menu item and the context menu border. Here is an example: view the rendered context menu with CSS styles What I want is for the color to fill the entir ...
Can the font size of text in the native view be retrieved using appium? I am aware of using driver.findElement(By.id("by-id")).getCssValue("font-size"); for web views. Is there a similar method for native views? ...
Encountering some challenges with jQuery while attempting to utilize the same function and iterate over select boxes that are dynamically generated with jQuery's clone() method. Here is a snippet of the content being cloned: <select name="expense ...
Trying to design a front page layout for a takeout restaurant. Encountering an issue where the last row doesn't align properly due to a double-height element. Here is the code snippet: <div class="row"> <a class="col-md-3 img-box img-h ...