Two different font sizes one line css - html

How can I style one line of text in u nav bar with two different font sizes??
In my html I have:
<nav>
<ul>
<li><a heref="#">Home</a></li>
<li><a heref="#">About</a></li>
<li><a heref="#">Products</a></li>
<li><a heref="#">Stockists</a></li>
<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
<li><a heref="#">Contact</a></li>
</ul>
</nav>
Where I have
<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
I want Blog to be 35px and (a pinch of psalt) to be say 15px. I have used child selectors to target each of the nav elements to style for colour, font size etc but am unsure of how to target two separate elements on this one line in my css.

Just .nav ul li a and .nav ul li a em . If this is what you are looking for

Add a <span> to your HTML and give it a class which will allow you to target it with CSS. For example:
<li><a heref="#"><span class="big">Blog</span> <em>(a pinch of psalt)</em></a></li>
And CSS:
nav li .big {
font-size: 35px;
}
You already have an <em> tag around the remaining text (or you can target nav li a with a "default" text size), so that's the only HTML you will need to add. Just keep in mind that you should be consistent.

On another note.
Answer to my google search for other non situations.
The below CSS class definition
font.yellow {
color:yellow
}
works seamlessly when used like:
<p class"blue">
blue text here
<font class="yellow">yellow text</font>
still blue text here
</p>

Related

CSS to target li inside ul inside li

I've looked through several DBs but I haven't found the answer that matches or works for my scenarios, so I'm turning to the experts, or at least the more experienced. I'm fairly new to HTML and CSS. I'm trying to figure out how to target an li inside of a ul, that's inside of an li, under a ul. Sort of like a drop down menu, where the main header has a submenu with more options. I don't want to add more classes or id's. I've tried the following versions to apply some basic CSS to it, but I can't seem to get it to target it:
#header-nav ul li
li ul li a
li#header-nav ul li
Even descendants doesn't seem to work (or it may be that I'm not doing it correctly?)
HTML:
<ul id="header-nav">
<li>
Home
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
</ul>
I am attempting to target the Test 1 and Test 2 lines. Is there a way I can do this? I'm tapped on formats to make it work. I just want to change the font size of those two lines. I know it would be easier to add the classes or IDs but I am trying to avoid them where possible as I'm trying to understand the whole child, descendants, targeting thing better.
like that
#header-nav li > ul > li a {
background-color: red;
font-size: 80%;
}
<ul id="header-nav">
<li>
Home
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
</ul>
Problem
"...I don't want to add more classes or id's.... I am attempting to target the Test 1 and Test 2 lines. Is there a way I can do this?"
Answer
Yes. But we must know some rules. CSS is declarative and its basic foundation are rules.
Casscading
The flow of CSS is a cascade of rulesets that take higher priority than the rulestes that have preceded them. From top, (less priority but wider influence due to inheritance,) to the bottom (higher priority but less influence due to how inheritance works in the same cascading direction (parent to child.))
The closer a ruleset is to the element it represents, the higher a ruleset chances of overriding the styles of the rulesets that have preceded it.
Styles
External Stylesheets: Normal priority, most maintainable, greatest scope -- unlimited amount of pages.
Page Location: Top of <head> tag.
Example: <link href="https://style.com/path/to/style.min.css" rel="stylesheet">
Inline Style Block: Higher priority, maintainable, limited scope -- a single page.
Page Location: Bottom of </head> tag.
Example: <style> selector { propertyName: propertyValue } ...</style>
Inline Style Attribute: Highest priority, least maintainable, least scope -- limited to a single tag.
Page Location: In a tag.
Example: <div style="propertyName: propertyValue"></div>
Specificity
The rules of Specificity are the only means of avoiding the cascading rule. This is the reason when we add a ruleset with !important after the Bootstrap CSS file and still have no success in overriding any style. Here's a CSS ruleset:
selector {propertyName: propertyValue}
⎱ ⎰
Declaration Block
Each CSS Selector has a measurable quality called Specificity. It is the measure of how specific a selector's declaration is as opposed to other selectors that share one or more properties and are used by a common element or group of elements. From that conflict, it is resolved by allowing the ruleset with the selector of the greatest specificity to override the styles of the other rulesets with its own styles. Should conflicting rulesets have selectors of equal specicity, then the rules of cascading apply (which ruleset is furthest from the top).
Specificity of a selector is measured by 4 separate numbers. From left (greatest) to right (least):
Being an inline style attribute. A single point in this category overrides all other categories that follow it. The only thing that can override it is !important unless of course it has an !important as well. If that's the case, then we can use the Grand Equalizer: JavaScript.
#ID. Having an #ID in a selector overrides everything except !important and inline style attributes.
.CLASS. Having .Class(es), [Attributes], and :Pseudo-class(es) in a selector overrides <Element Tags> and ::Pseudo-elements.
<Element Tags> and ::Pseudo-elements, very general thus the least in specificity.
Go to this page for an Online Specificity Calculator
If there's no dynamic elements added in the path then this'll work:
#header-nav li:last-of-type ul li a {
font-size: 48px;
}
There's 3 identical fragments of the layout -- each using a different relative unit of measurement (rem, em, %) at the equivalent distance of 48px (3 times the default of 16px = 1rem = 1em = 100%. Each fragment also shows how specificity and !important are used to make styles from frameworks like Bootstrap CSS so invincible.
Demo
html {
font: 400 16px/1.45 Consolas;
}
body {
font-size: 1rem;
}
b {
font-size: 1.5rem;
color: tomato;
}
i {
font-size: 1.25rem;
color: #A3CF65;
}
/* A */
/* 0,1,1,4 ⭐ */
#header-navA li:last-of-type ul li a {
font-size: 3rem !important;
}
/* 0,1,0,4 */
#header-navA li ul li a {
font-size: 2rem !important;
}
/* B */
/* 0,2,1,4 ⭐ */
#header-navB#header-navB li:last-of-type ul li a {
font-size: 3em;
}
/* 0,1,1,4 */
#header-navB li:last-of-type ul li a {
font-size: 2em;
}
/* C */
/* 🟊 */
#header-navC li:last-of-type ul li a {
font-size: 300% !important;
}
<!DOCTYPE html>
<html>
<head>
<meta chrset='utf-8'>
</head>
<body>
<ul id="header-navA">
<li>
<b>A</b>
</li>
<li>
<i>!important & Specificity Test</i>
<ul>
<li> <b>3rem</b> > Test A1 </li>
<li> <b>3rem</b> > Test A2 </li>
</ul>
</li>
</ul>
<hr>
<ul id="header-navB">
<li>
<b>B</b>
</li>
<li>
<i>Specificity Test</i>
<ul>
<li> <b>3em</b> > Test B1 </li>
<li> <b>3em</b> > Test B2 </li>
</ul>
</li>
</ul>
<hr>
<ul id="header-navC">
<li>
<b>C</b>
</li>
<li>
<i>!important & Inline Test</i>
<ul>
<li> <b>300%</b> > <a href="#" style='font-size:200%;'> Test C1 </a> </li>
<li> <b>200%</b> > <a href="#" style='font-size:200% !important'> Test C2 🟊</a> </li>
</ul>
</li>
</ul>

style all the child element without classes?

I have multiple nav ul li a that i need to style different and I have no good way of doing this. I've looked around the net for quite a bit but i do not understand how to do this without using class="" in every element. My code is below. There must be a better way of doing this? Like all children that has class="loginmenu" should be like x and all children of class="dropdownmenu" should be like y. Even if they are the same element.
<nav class="loginmenu">
<ul class="loginmenu">
<li class="loginmenu">
<p>Login</p>
</li>
</ul>
</nav>
<nav class="dropdownmenu">
<ul>
<li class="gigs">
<p>Gigs</p>
<p class="subtext">Shows & Gigs</p>
</li>
<li class="music">
<p>Music</p>
<p class="subtext">Tracks & Sets</p>
</li>
<li class="booking">
<p>Booking</p>
<p class="subtext">Booking & Contact</p>
</li>
CSS:
nav.loginmenu {
position: absolute;
}
li.loginmenu{
font-size: 25px;
margin-left: 1200px;
} and so on...
You can use nav.loginmenu <element>.
nav.loginmenu li {
font-size: 25px;
margin-left: 1200px;
}
For more information see the documentation of CSS selectors or try CSS Selector tester.
CSS rules can represent a hierarchy. For instance, the following means: "Apply this rule to all li elements that are inside a nav element with class loginmenu")
nav.loginmenu li {
..
}
It's commonplace for me to add classes to one root element that has no rules of its own, but for which having that class affects behavior of its children.
When sharing functionality, it is also common to add one class to multiple elements, or multiple classes to one element (separated by spaces) if it simply represents certain behavior (eg, applying a margin to all list elements to give them a "tabbing" look)
Additionally, many properties (most of the font-... properties for instance) are inherited from parent to child unless they're overridden at a lower level, so there's no need to repeat those for further descendants.
Not exactly sure what you are trying to do here. But if I'm interpreting correctly, you want to target different elements within each <nav> element? If so you can add an id which should be unique (not repeated) to your <nav> element then target the element like so:
html:
<nav id="loginMenu">
...
</nav>
css:
#loginMenu li {
font-size: 25px;
margin-left: 1200px;
}
Or you can use Genhis answer.

Change <a>'s hover / active color within the element tag

I'm working on an e-mail signature (so obviously I don't have an attached .css stylesheet) is there any way to set a link's hover / active color (maybe within the tag?)
Thanks for taking the time to answer :)
Tombs
Duplicate here:
How to write a:hover in inline CSS?
You can't do so within HTML as active and hover are CSS selectors and not attributes. So although you could set the height and width of an object in HTML, you would have to use CSS to use the active and hover selectors.
Like such
HTML
<ul>
<li><a class="links" href="#"> Link1 </a></li>
<li><a class="links" href="#"> Link2 </a></li>
<li><a class="links" href="#"> Link3 </a></li>
</ul>
CSS
ul il a.links:hover{
color: blue;
}
ul il a.links:hover{
color: royalblue;
}
Half of the mail clients do not support this functionality.
See: http://www.campaignmonitor.com/css/
you may only be able to style the active color, with this being a recommended approach
<span style="color:#ff00ff">this is a link</span>
style the <a> tag as well as wrap it in a similar color style <span> tag for reinforcement.
you wont be able to style a hover state with in-line css unfortunately.
source:
http://24ways.org/2009/rock-solid-html-emails/
Try using
<h1 style="---">
like
<h1 style="color:red">hi</h1>

Aligning images with variable length text

What would be the best way to accomplish something like this, but where the icons are vertically-aligned with the middle of the text (which has variable length)?
The icons are CSS sprites, with the background moving over 26px when hovering on the icon or associated text
New answer compatible with CSS sprites
In response to #Octavian's feedback, here's a different way of dealing with the issue that still allows the use of CSS sprites. The solution here is to use display:table on the li and display:table-cell on its children, in order to vertical align them. Then, instead of an image, a placeholder div with a background-image can be used for the sprites. Here's a jsFiddle, and the code is below:
CSS
ul {padding-left:0;}
li {display:table;margin-bottom:20px;}
.image-holder {
display:table-cell;
width:26px;
height:26px;
vertical-align:middle;
background-image:url('http://placehold.it/52x26');
background-repeat:no-repeat;
background-position:left center;
}
li:hover .image-holder {background-position:right center;}
.text {padding-left:30px;display:table-cell;}
HTML
<ul>
<li>
<div class="image-holder"></div>
<span class="text" style="display:table-cell;">www.website.com</span>
</li>
<li>
<div class="image-holder"></div>
<span class="text" style="display:table-cell;">742 Evergreen Terrace<br/>Springfield, SP 12345<br/>United States</span>
</li>
<li>
<div class="image-holder"></div>
<span class="text" style="display:table-cell;">T) (800) 555-5555<br/>F) (800) 666-6666</span>
</li>
</ul>
Old answer, more elegant but incompatible with sprites
Another option would be to use each image as a background-image positioned in the top middle of each li. The key piece of CSS here is background-position, the first argument of which represents the horizontal alignment (top in this case) and the second argument of which indicates vertical alignment (center in this case). Documentation here. Here's a jsFiddle, and the code is below:
CSS
li {
background-position:left center;
background-repeat:no-repeat;
padding-left:40px;
padding:5px 0 5px 60px;
margin-bottom:20px;
list-style-type:none;
background-image:url('http://placehold.it/30x30');
}
HTML
<ul>
<li id="website">www.website.com</li>
<li id="address">742 Evergreen Terrace<br/>Springfield, SP 12345</li>
<li id="phone">T) (800) 555-5555<br/>F) (800) 666-6666</li>
<li id="email">info#website.com</li>
<li id="share">Share via email</li>
</ul>
Edit 1 In response to #cimmanon's comment (thanks!) example now works with images larger than text, and I've posted an accompanying demo.
Edit 2 Altered in line with #Octavian's comment indicating a need for middle-aligning rather than top-aligning.
Edit 3 New answer compatible with CSS sprites
You want to set the line-height to the height of the image (or 50% for double lines)

How to give a space between href?

I wrote my code here but it won't give space
<font color="red"><h3>Recommendation</h3></font>
<font color="red"><h3>Review Mining</h3></font>
<font color="red"><h3>Generate Graph</h3></font>
<font color="red"><h3>Sign out</h3></font>
i need a output like this
Recommendation Review Mining Generate Graph Signout
There are several problems in your code:
The font tag - Don't use this, it's ugly, deprecated and altogether useless. Style your elements with css.
A block-level element h3 inside an inline element a*. This is invalid HTML and makes no sense semantically.
A h3 is meant to be a headline, it does not logically fit into an anchor element.
h3 produce linebreaks and thus all your links are put on a single line each.
Depending on what exactly you want to do, this markup is more suited:
<!-- Use an unordered list for your anchor elements-->
<ul class="mylinks">
<li>Recommendation<li>
<li>Review Mining<li>
<li><a href="rank.jsp" >Generate Graph</a><li>
<li><a href="index1.jsp" >Sign out</a><li>
</ul>
and the css accordingly
<!-- put this in the <head> of your html document -->
<style type="text/css">
.mylinks li{
float:left; /* Fit all your links nicely in one line*/
margin:0 5px; /* Give them to the left and right a little room to breathe */
/* You can adjust the space by modifying the 5px value, */
/* the 0 modifies the top/bottom spacing */
}
.mylinks a{
color:red; /* fancy red color for your links*/
}
</style>
*: well at least in HTML4. The question still remains whether such a kind of tag nesting makes sense.
The problem is that you are using heading tags, which by default have a line wrap after them.
To change this, you can set the display CSS property which will align the element in with other elements:
h3 {
display: inline;
}
You might reconsider using the <h3> altogether. It is appropriate as a heading for other content, not for navigation, in general. I also recommend dropping the <font> tag. You don't need it. You can, and should, use CSS for styling.
Try Using: unordered listed inside a div.
<!--HTML-->
<div id="Navigation">
<ul>
<li>Recommendation</li>
<li>Review Mining</li>
<li>Generate Graph</li>
<li>Sign out</li>
</ul>
</div>
<!--CSS-->
#Navigation
{
color: #9000A1;
font-family:"Times New Roman", Times, serif;
}