I want to give each word in my website name a different color or style, similar to this:
Currently, I am using:
<a href="#">James<strong>.</strong><span>Wood</span></a>
(Using "STRONG" and "SPAN" tags inside the "A" tag).
After that, I style the rest with CSS.
Is this the correct method for achieving this effect with CSS without using images?
Similar to Gianps response, but with a more streamlined CSS approach:
Check out the live demonstration:
HTML:
<a href="#" class='title'><span class='green'>James</span>.<span class='orange'>Wood</span></a>
CSS:
.title {
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
color: red;
text-decoration: none;
}
.title .green {color: green;}
.title .orange {color: orange;}
That snippet of HTML looks quite messy. It would be better to clean it up using CSS, like so:
<div class="wrapper">
<a href="#" class="f20 bold">
<span class="green uppercase">john</span>.<span class="blue uppercase">doe</span>
</a>
</div>
Then you can define the CSS classes for better styling:
.wrapper {margin: 0 auto;}
.f20 {font-size: 20px;}
.bold {font-weight: bold;}
.uppercase {text-transform: uppercase;}
I'm attempting to customize the font-family of the headings within my header section differently from the headings located elsewhere on the webpage. Unfortunately, I am encountering difficulties in ensuring that this style change only affects the spec ...
I'm working on my website blog and I need to create a specific area for images at the top of my articles. I want these images to have a maximum width so they don't exceed a certain size, but I also want smaller images to remain unaffected. Curren ...
<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...
I am using Vuetify.js and I am trying to show a single word on the right side of an image within a v-card: <v-card> <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75"> <span class= ...
OBJECTIVE: a div is { position:fixed; bottom:0% } it has a genuine height and width; the z-index is the highest in the document = so, it should always be visible! ISSUE: mobile browsers 'cut' the bottom end of the page when zooming out. ...
Struggling with styling, I am attempting to create a tree view in AngularJS. Currently, I am facing an issue aligning vertical and horizontal lines for the tree items. Check out my Codepen for reference. <html lang="en"> <head> <meta cha ...
Sorry if this is a basic question, but I'm new to this. Currently, the sidebar is on the left side. How can I move it to the right? #sidebar-wrapper { top: 52px; right: -200px; width: 200px; background-color: #27CD70; color: white; posi ...
I have incorporated a Jquery Data Table Plugin that can be found at http://datatables.net/api. This plugin comes with its own search box, which is automatically added to the page when enabled. The search box is nested within its own div structure like this ...
My header currently displays a horizontal infinite scroll of text, but I am looking to achieve a square pattern wrapping around the page. Can you provide guidance on how this can be accomplished? Below is the code snippet I am working with: .marquee { ...
My Ionic 2 input elements are not scrolling to the top when the keyboard is shown. I've tried everything I could find on Google, making sure the keyboard disable scroll is set to false. However, I still can't figure out what's causing the sc ...
My webpage is experiencing an issue. When I resize the window, the placement of all elements becomes misaligned and the layout gets distorted. ...
Issue: Browsers (FF5, Chrome12, IE9) are not recognizing css3 transforms applied to a child element inside a div when calculating the scrollHeight and scrollWidth of the containing div's scrollbars with "overflow: auto;". <style type="text/css"> ...
I have a Google visualization data table that works well, but I am facing an issue with the width of the table. When I click as shown in the image, I call the function drawTable(); and then I encounter this: As you can see, the table does not have a width ...
CSS: * { padding: 0; margin: 0; box-sizing: border-box; } body { display: flex; background-color: #F5F5F5; } body > header { display: flex; position: fixed; width: 100%; height: 60px; align-items: center; background-color: #373737 ...
Could anyone offer guidance on how to properly align text underneath responsive images within divs? The issue I'm facing is that the divs adjust smoothly based on the viewport size, but the text below them doesn't stay centered as intended. Whi ...
Currently, for my report generation process using HTML and CSS to manage page breaks dynamically. I've enabled the option for users to print multiple reports at once by combining them into different sections within a single HTML document. This helps p ...
I am currently working on developing a React component that showcases a rating percentage using a star icon with two different shades. For example, if the input rating is 79%, I want to display a star with 79% of it in gold color and the remaining 21% in ...
I'm having trouble integrating breakpoints into my web project. I have SASS, Compass, and breakpoint all installed and I've followed the installation instructions, but it seems to be causing errors. Can someone help me troubleshoot the issue? He ...
I have defined breakpoints for my MUI React-based app like so export const lighttheme = createTheme({ palette: palette, typography: typography, breakpoints: { values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536, ...
My webpage contains multiple content tabs with expand/collapse icons in each panel. To simplify the process of closing all expanded sections, I have included buttons for expanding and collapsing all panels at once. While this feature is functioning correc ...