Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
How would you put emphasis on text? I'm talking design wise, is it easiest on the eye just to change the colour to a slightly darker shade on a word?
Example: in a chatroom there's the format "Joe Message". I'd like "Joe" to stand out more.
Technically, if you want to maintain semantic markup, you should use the em tag for 'emphasis':
More from MDN
The HTML element (or HTML Emphasis Element) marks text that has
stress emphasis. The element can be nested, with each level of
nesting indicating a greater degree of emphasis.
Then its up to you- typically it depends on the kind of emphasis you wish to provide as to whether you'd use bold, italic, or different coloured or sized text...or a different font.
You have to separate the name and the message to get what you want by css
<span class="">Name</span><span class="message">Message<</span>
.name{
display: inline-block;
font-weight: bold;
color: red;
}
.message{
display: inline-block;
}
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
there is a problem that I have had since I started using CSS everything selector [*] with multiple [:not()].
Examples below does not work as I tried:
.post-body *:not(.has-color):not(.has-bg){
color: red
}
.post-body *:not(.has-color)*:not(.has-bg){
color: red
}
.post-body *:not(.has-color .has-bg){
color: red
}
.post-body *:not(.has-color , .has-bg){
color: red
}
Imagine something like WordPress post content; I can not change the content whole structure but I do need to set a primary color for texts which do not have a specific background or text color. So I am trying to set Red Color to any element except elements that contain ".has-color" or ".has-bg" that is it there is no relation between them.
Has somebody solved this issue or even seemed to something like this?
Your first example should work, as shown in this CodePen, but as Louys notes, it’s hard to tell without any markup.
.post-body *:not(.has-color):not(.has-bg) {
color: red;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I have the following text displayed on a website
<h2 font-weight="33">H2 Heading which I want thinner</h2>
The above doesn't work.
<h2><font-weight="33">H2 Heading which I want thinner</font></h2>
I know I can use the CSS like so:
h2 {
font-weight: bold;
color: #fff;
font-size: 24px;
}
but I have several complex and different internal and external existing css already in place, hence the requirement to override it in-line.
What is the best way to make the H2 tag thinner. I also ask the question because I read that font-weight is depreciated in html5.
Best practices and a solution in line with modern requirements would be appreciated.
try this it:
<h2 style="font-weight: 33">H2 Heading which I want thinner</h2>
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I have following snippet
.global-oxygen-font{
font-family: $font-oxygen;
font-size: 16px;
line-height: 31px;
letter-spacing: 0.32px;
}
And I am extending it whenever it is used like this
line 100. div{#extend .global-oxygen-font}
line 200. p{#extend .global-oxygen-font}
So as you can see among different sections, I am extending the font-snippet. But during a code review I was told that put that
div,p{
font-family: $font-oxygen;
font-size: 16px;
line-height: 31px;
letter-spacing: 0.32px;
}
on the line 100 itself. Extending global-oxygen-font would essentially copy the code those places. I was like, but div and p exists in line 100 and 200 for a reason, as they are in order of the structure of the markup. And if I make the change as suggested, it won't be good for maintenance. Whose approach is correct?
Extending global-oxygen-font would essentially copy the code those places
No, that's not how #extend works. Instead it works by adding div and p to the list of selectors for .global-oxygen-font. (Compile it and view the result to verify this yourself.)
Therefore, if pressed I would say you are right, they are wrong. Your approach clearly isolates the rules and then assigns them to p and div, and therefore I would say it is also more maintainable.
You might want to designate .global-oxygen-font as a virtual class (using % IIRC) so no rules are generated for it (unless you want to be able to use that class explicitly).
I'm curious, though, why you would apply these rules to all p and div elements. It would seem to be better to write the class explicitly on those elements. Or, since all the properties are inheritable, it could make sense to apply them at a higher level.
Another comment:
as they are in order of the structure of the markup
There is no particular need to order your CSS so as to match the structure of the markup.
At the end of the day, it is often not a good idea to push back against code reviewers. They may have their own point of view, which they are allowed to assert because they are more senior. For instance, they might not even like the entire idea of #extend, and there are legitimate reasons some people avoid it.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm thinking about css refacto in my job, and i'm wondering if it's a good idea (considering best practices) to create css class with only one property.
A simple example, is it usefull to create many classes this way
.center-text {
text-align: center;
}
What's the best between doing this or using small libs like Knacss (if you know it) for example.
BIGGEST PROBLEM WITH CSS CLASSES: THEIR LOCATION INSIDE YOUR FILE / CODE MATTERS!!
lets assume we have this html element:
<div class="test altr">some text</div>
this css file:
.test
{
color: red;
}
.altr
{
color: blue;
}
will result in a blue text (the div has those 2 classes). BUT this file will result with a red color:
.altr
{
color: blue;
}
.test
{
color: red;
}
the order of command in css is determine by the css file (and not the order inside the html class attribute)
not to mention that the physical order between and tags inside your html alo affects the order of commands in css (last command override all previous commands)
so.. whatever you do - please be careful with that
One minor drawback I see is the amount of text in your HTML will increase slightly due to pile up of classes. Not best SEO practices, but it's minor.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
For an assignment i have to create a website. I have a homepage where i have a large chunk of text explaining what the business is about etc. Although it is very plain looking. How can I make this plain chunk of text more appealing?
This is my CSS that affects the text.
Body{
font-size: 16px;
font-family: 'Open Sans', sans-serif;
width: 100%;
max-width: 1000px;
letter-spacing: -.5px;
}
It's hard to say without seeing what it looks like currently but you could try playing around with:
Custom fonts with #fontface
(http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp)
Line-height (line-height: 19px)
Letter-spacing (letter-spacing: 0.5px)
Text color (color: #000000)
Text Shadow (text-shadow: 1px 1px 3px #000)
I personally don't like using text-shadow but depending on what you're trying to achieve it may be appropriate.
You could go find a website with text that you find appealing and take a look at their CSS file (press F12 if you're using Chrome). That'll give you an idea of what kinds of fonts, colors, spacing etc. they use.