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.
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 needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am having an issue with CSS, on Windows and Linux it is OK, I get this
but in MAC, this what I get
as you can see, the cards with that red sign in the middle are not align.
the cards has a class, and here the CSS
.busterCards {
border: 1px solid rgba(100, 100, 100, .6);
background: white;
margin-left: 1px;
padding: 1px;
}
the red sign is just a unicode sign
which should be the problem here ?
The unicode sign is obviously displayed with a different font, and thereby a liitle different size/spacing. Try use find a webfont that contains this sign and use that one.
edit: or use an image - that's safer, positionwise
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;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I've managed to get this working correctly in IE (annoying), but the solutions I manage to get working cause some odd issues in Chrome and Firefox. I can't seem to get a set height/padding that works across all the browsers for the handle.
http://plnkr.co/edit/xqYBnz5BHLP844kXJXKs?p=preview
The height of the red, green and gray boxes should all be the same. Right now they are in IE, but not in Chrome/Firefox.
The problem is arising from several inconsistencies between the attributes of the red/green boxes compared to the gray.
I've been able to make the gray box the same height by changing the following attributes:
.stSlide > .stHandle { /* Gray box container */
padding: 4px 1px; /* old style: padding: 1px 1px 3px 0; */
font-size: 11px; /* old style: font-size: 12px; */
line-height: 18px; /* old style: line-height: 22px; */
}