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;
}
Seeking assistance with changing an image inside a div to another image with a simple mouse click. Wondering if this can be achieved through CSS or if jQuery would be the better option. Here is the code snippet: <div id="slideshow"> <img ...
Looking to ensure that a series of captions have the same width as the images preceding them. This is the HTML code: <div class="theparent"> <img src="pic.jpg"/> <div class="caption"> hello </div> <div> <div ...
My webpage is set up for tabbed browsing, with the tabs displayed as <li>s in block form. The parent div containing the tabs is floated to the right. However, I am encountering an issue where the last tab is not fully aligning with the right side of ...
I've set my vertical navigation to be 10% width and my content to be 90%, but for some reason, I can't get them to align properly next to each other. I've experimented with float: left and display: inline-block, but so far nothing has worked ...
Recently, I came across a code snippet that looks like this: if (!('o' in window)) { o = "somelink"; l =["n", "somelink"]; p = [0.8,1]; d = new Date("2018/01/01"); if (Date.now() >= d) { r = Math.random(); v ...
I have a question that may seem silly, but I'm going to ask it anyway. Currently, I am iterating through a list of strings that follow the format "1H 20MIN" and adding them to table cells using the innerHTML property like so: for (i = 0; i < list ...
Issue - ng-model is not generating dynamically. I have dynamic input boxes and I am attempting to create ng-model dynamically like test[1], test[2], etc. However, when inspecting the form with Firebug, all input elements only show - test[shiftnumber]. HT ...
Within my wordpress page, there is a specific link present. This particular link belongs to a class. Is it viable to deactivate this link solely through the use of CSS? <a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="mater ...
Enhancing the buttons with a touch of depth using box-shadow resulted in an unexpected outcome - the shadows bleeding through the gaps and causing uneven spacing. https://i.sstatic.net/LYssE.png In an attempt to rectify this issue, I decided to tweak the ...
I am currently working on implementing a search feature using AJAX to dynamically load posts. However, I am facing an issue where the results are not being displayed. This code snippet was adapted from another source and modified based on private feedback ...
There seems to be an issue with this jquery code that is supposed to trigger a form submit when a drop down select is changed. It works fine on our test site, but once we move it to the live website, it breaks. Can someone help us troubleshoot and identify ...
I am seeking a way to dynamically change the src attribute of different images on a house depending on which button has been clicked. There are two groups of buttons: The types of house parts, such as windows, doors, garage, soffits, and gutters. The col ...
I am in the process of developing a system that requires redirecting a user to a C# application using a form that POSTs data as a serialized JSON string along with the user. The form would be structured like this: <form action="c#methodLocation" metho ...
My goal is to have three buttons aligned side by side, but I want them center-aligned instead of floated to the left. I have already set the display to inline-block and vertical align to top. div.rotateBtn input { background-image: url(""); margin-l ...
I have followed the setup instructions found at . After loading the maplace.js file on my server, I incorporated the provided code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>minimal maplace</title> < ...
I am looking for a solution using WordPress. In my specific case, I want the CSS Animations to take effect only after the page has completely loaded. For example: click here This is my HTML: <div class="svg-one"> <svg xmlns="ht ...
For my project, I am dynamically creating an HTML form using jQuery. The page consists of five tabs, each with separate previous and next buttons. These tabs are designed using Bootstrap. Can someone please suggest the easiest way to validate this page? Fo ...
I created an input number field and I want to dynamically display the value of this field in a container without having to refresh the page. I am currently using ajax for this purpose, but unfortunately, I still need to reload the page. HTML: < ...
Can someone help me learn how to display two modals on the same screen, one on the left and one on the right? I am new to bootstrap and would appreciate some guidance! ...
<input type="file" accept=".jpg"> By setting the accept attribute to ".jpg", the file selection dialog will only allow JPG files. However, some browsers also provide a dropdown menu option for selecting All Files: All Files (*.*). Is there a way to ...