Targeting one Word on the whole Website - SMALL CAPS - html

I have a company Name that has a specific writing. The word-part "ulum" should be written in Small Caps - all over the whole website. But I don't know where to put it - and I don't know why it's not working.
I need to target every of these across the whole website.
Please help. :)
At first I tried this:
C<span style="font-variant: small-caps">ulum</span>NATURA <sup>®</sup>
But it only works if I put it in every Word across the Site.. that's toooooooo much :)
<p style="font-family: serif; font-variant: small-caps;">CulumNATURA<sup style="font-size: .6em; line-height: 2em;">®</sup></p>
Sincerely,
Rina

Have you tried moving your style into a stylesheet, then changing the HTML to be more concise and easier to update in the future with classes:
C<span class="small-caps">ulum</span><span class="caps">NATURA</span> <sup><span class="sup">®</span></sup>

Related

Show API results horizontal instead of vertical with HTML

I am building a WordPress website focused on sports and I am using a sports API to get the latest 10-15 highlights videos from different leagues (basketball, soccer, etc). I have been able to get that information, the problem comes that data is displayed vertically, while I would like it to be shown horizontally with a slider/carousel if possible.
I have been looking at Elementor (it's the builder page I am using for WordPress) and several tutorials but I haven't been able to find anything helpful.
I have the following code:
<center>
[jsoncontentimporter url=API I AM USING]
{subloop:results:-1}
{subloop-array:results:-1}
<img src="{results.strThumb}" style="width:275px;height:125px;">
<br>
<strong style="font-size: 10px;">{results.strHomeTeam}</strong>
<strong style="font-size: 10px;">{results.intHomeScore}</strong>
-
<strong style="font-size: 10px;">{results.intAwayScore}</strong>
<strong style="font-size: 10px;">{results.strAwayTeam}</strong>
<strong style="color:#C3414D;font-size: 14px;">{results.dateEventLocal}</strong>
<br>
{/subloop-array:results}
{/subloop:results}
[/jsoncontentimporter]
</center>
I am using the free version of Elementor but I wouldn't mind too pay for the PRO version if necessary, though I believe there is not any block I could use there, and also would like to know if it's possible to do it with HTML since I would like to get deeper knowledge at it.
Does anyone have any idea or any guide I could check to be able to do this with HTML ?
Here's an example of what you could do using mostly CSS
https://codepen.io/panchroma/pen/jOGGPKq
I think what you want to try and do is see if you can add extra HTML around your JSON code. For example, see if you can make some of the text italic with something like
<emphasis>{subloop-array:results:-1}</emphasis>
If you're able to do this, then the next step would be to add additional divs that wrap all of the results, each individual result, and then details within each result. As shown in this screenshot
If you can get to this point then I think you have the problem solved.
You now have some classes that you can target with CSS styling, a basic CSS example would be:
.results-wrap {
display: flex;
overflow-y: scroll;
}
.result {
padding: 5px;
min-width: 200px;
}
.details {
background-color: #fff;
}
https://codepen.io/panchroma/pen/jOGGPKq

hta: Changing font size issue using css

I have an HTA file, I put some buttons and a comboBox
When I added some text to say what to select, it was too big.
I tried to change the size in CSS
<body style="font-size: 10px;">
It didn't work.
Also tried
<body size="10">
Nothing worked, so I decided to ask here for help
I got results using span
<span style="font-size: 10px;"> Select office </span>
But I want a much elegant situation and easy to use.
Use points instead.
html, body{
font-size:10pt;
}
Add an external style or an internal style like,
html, body {
font-size: 10px;
}
It applies the style throughout the body.
Try to put your css in a separate file, it makes the code mach more understandable and prevents you from writing code twice.
Check for a without closure
If this doesn't work try sending us sum more code

CSS p {Indent} Leaving a gap

I am trying to make a website that has a contents page.
I use the go to chapter 1 as the contents part,
and when it clicks it does to the <a name="chapter1"><u>Chapter 1</u></a>
This works well, but there's 1 catch (there's always a catch)...
I want to make it look like the ones on Wikipedia:
[View Image][1]
[1]: http://crystalanalysis.anydns.com/images/wikipedia_contents.png
But I didn't want to copy the one from Wikipedia, I wanted to make my own,
I looked around, found the parts I needed and had 2 problems! The first problem I am
having has something to do with the Indent. I tried using the p.indent {text-indent:150px}
but it only did the indent for the line I put it before. So:
Indented text
But it was annoying having to put the Indented text before every single line in the
contents box, but it works:
<header>
p.contenttitle {text-indent:50px;}
p.contentsub {text-indent:100px;}
</header>
<body>
<div style="background-color:#FFFFFF;width:1024;border:solid 1px #000000;"><br>
<font class=Blackverdana><b>Contents:</b><br></font>
<div align="left">
<!-- CONTENTS a href --><font class=Blackverdana>
<p class=contenttitle>Chapter 00: First things first...
<p class=contentsub>Chapter 0.2 Finding the SDK for your game
<p class=contentsub>Chapter 0.3 Running the Hammer Editor
<p class=contentsub>Chapter 0.4 First Load<br><br>
</body>
The other problem I am having is that if you look at the contents page:
http://crystalanalysis.anydns.com/7-12-2013.html
you will see that there seems to be some sort of <br> after every line.
I did not plan to have those there, they just appeared. Maybe a connotation with the "p" tag?
Any help would be greatly appreciated
And also the website is a blog and I am making a Hammer Editor Tutorial if anyone was wondering.
So it seems that you aren't ending the tags when you first start them.. An example of this:
<p class=contenttitle>Chapter 00: First things first...
When in all reality it should be:
<p class=contenttitle>Chapter 00: First things first...</p>
That could be a possible issue, as well as you should really look into using a CSS page to reference your HTML. Creating a class/id will actually make that indentation process ten times easier. For more information on that I can provide a handy link from w3.org that can explain the entire process of using CSS and how it can make your life a lot easier!
http://www.w3.org/Style/Examples/011/firstcss.en.html

Issue in my HTML/CSS email

I know that when i come to HTML email i have to use the Table Layouts. This is what i have done here Unfortunately when i make some tests with this online tool to my Hotmail and gmail, the layout is not exactly the same. In the email the difference from my HTML code is that it does not get the same H2 font style and family in the text <h2>"Responda correctamente a las preguntas y gane un viaje a Roma!"</h2> and the second image is separated from the one on the top and the one on the bottom. What's the best solution to figure it out the issue? How can i achieve the same layout?
Thanks for your time
Do not rely on external (<link rel="stylesheet">) or embedded style sheets (those contained within the <style> tag above the <body> tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets. That said you can include a few embedded CSS statements (such as link color) as long as you're ok with them not rendering in some email clients.
Taste this post: http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters
Try to add style="display:block;" to all your img tags and instead of an h2 use a font tag with a style attribute:
<font style="color:#202020; font-family: 'Georgia',serif; font-size: 14px; line-height: 20px;">
<b>Some title</b>
</font>
<br>

<font> tag deprecated now so what is the correct way

I have an old version of frontpage I am toying around with. I planned to use django in the background to do the heavy lifting but thought using this old Frontpage software I have would be good for the front end but I am finding it is writing code in an out of date fashion. I was reading that the tag has been deprecated and we should be using "style" now. the example I was reading has it inside the paragraph or header tag. However the code I have from frontpage is using the font tag inside of a table cell tag so I am wondering what is the correct way to write it.
Here is the code generated by Frontpage
<td width="190" align="center" bgcolor="#000080" height="18"><b><a href="index.htm">
<font title="return to main page" color="#00FFFF" face="Verdana">Home</font></a></b></td>
would I just change it so the styles
<td width="190" align="center" bgcolor="#000080" height="18" style="color:#00FFFF;font-family:Verdana">
<b>Home</b>
</td>
My problem with that is now all text in the table cell would be that font right? So if I wanted more things in the table cell than just the link where would I put that? Also I just tried that and the font-family is working but not the color...?
You need to look up and spend some time learning CSS.
You can do something like this with it:
CSS:
.linkstyle
{
font-family: verdana;
color: #00FFFF;
}
CODE:
<span style="linkstyle">Home</span>
Using inline styles like you've posted, this would work.
<td style="width: 190px; height: 18px; text-align: center; background-color: #000080;">
<strong>Home</strong>
</td>
As a side note, you have several very bad practices. Using tables to lay out your website is very outdated and hard to work with (which is why it is outdated). Using inline CSS is confusing to everyone (including yourself). In addition to the references others have posted, I recommend http://htmldog.com/
Why are you using Frontpage?
Grab a free editor (search for one), or just create it yourself using something like Notepad++. The amount of time you will spend cleaning up code will be a total waste of your time when using Frontpage (gui).
Also use CSS styles instead of inline bgcolor / font, etc;
You could use a combination of <span> tags with class attributes and css.
Here are some good references on that stuff:
HTML: http://www.w3schools.com/tags
CSS2: http://www.w3schools.com/css/css_reference.asp
CSS3: http://www.w3schools.com/css3/css3_reference.asp