Adjust the Weight of a Single Word in H1 CSS

I've been trying to figure out how to achieve the following for a while now. I know I can solve this issue by using different h1 tags and positioning them separately, but I'm curious to find out if there's a way to do it without dividing these two elements into separate h1s.

Let's dive in:

HTML:

<h1 id = "introText1">Hi, my name is Liam Shalon.</h1>

CSS:

#introText1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: -110px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 1;
}

I want:

  • "Hi, my name is" to have a font weight of 300
  • "Liam Shalon" to have a font weight of 400

Is there a way to achieve this without needing to split it up into two h1 tags?

Thank you, Liam

htmlcsstextpositioning

Answer №1

HTML

<h1 id="introText1">Hello there, my name is <span>Liam Shalon.</span></h1>

CSS

#introText1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    left: 0;
    line-height: 200px;
    margin: auto;
    margin-top: -110px;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 1;
}

span {
    font-weight: 900;
}

JSFiddle: http://jsfiddle.net/9kCeT/2/

Please keep in mind that I intentionally adjusted the font-weight to highlight the <span> tag. A difference of 100 in font-weight wasn't very noticeable on the fiddle.

Answer №2

Utilizing span tags within the H1 element is a great way to enhance your styling. It's similar to working with CSS using the id attribute, but you can try something like this:

<h1 id = "introText1"><span id="textOne">Hey there, I'm</span><span id="textTwo">Ella Smith.</span></h1>

Answer №3

One way to customize the weight of a portion is by enclosing it in a <span> element with a specific class. Here's an example:

HTML:

<h1 id = "introText1">Hi, my name is <span class="bold-text">Liam Shalon.</span></h1>

CSS:

.bold-text {
 font-weight: 400;
}

This will make the text inside the <span> element appear heavier compared to the rest of the content in the h1 tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Identify the month in which there is no data available in the database

The existing query is working perfectly, but the issue is that there is no data for the current month (April), causing it not to list the month with 0 interviews. How can I make it so that the month is listed with 0 interviews? QUERY select distinct from ...

phphtmlmysqlsql

Can I add different tags directly inside a div container in Bootstrap 3 without using .row and .col?

Should I place a tag directly inside in Bootstrap 3? or is it better to have each inside .row>.col-md-# Is this layout acceptable, or could it potentially cause issues on mobile devices? <div class="container"> <h1>Lorem ipsum dolor sit ...

csstwitter-bootstraptwitter-bootstrap-3css-frameworks

Aligning a block heading in the middle of the page

I developed a basic flex-based table. section { display: flex; flex-direction: row; align-items: stretch; width: 100%; margin: 0; background-color: green; } h2, ul { width: 50%; padding-left: 1.5em; padding-right: 1.5em; } h2 { tex ...

htmlcssflexbox

Implementing a SetTimeout Function in HTML

Is there a way to delay calling the mouseHoverTableRow() function until after hovering on tr for 3 seconds? I only want to call this function if the hover duration is at least 3 seconds, as it triggers an API request. How can I achieve this? <tr *ngF ...

htmlangular

Display HTML tags on an HTML page using TypeScript

In my angular application, I encountered an issue where I needed to call one component inside another component. Initially, I was able to achieve this by simply using the second component's selector in the HTML of the first component: html: <div&g ...

javascripthtmlangulartypescript

Nested navigation in Bootstrap

I am currently working on creating a multilevel menu using Twitter Bootstrap. Check out the code here Below is the snippet of HTML code: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ...

csstwittertwitter-bootstrap

Adjust Javascript to modify the URL by assigning a new URL without utilizing the origin as the parent

Currently, I am working on a script that is responsible for sending string values to the server in order to change the ipv4 information on a specific device. However, I am facing some difficulties and would appreciate some assistance with automatically upd ...

javascriptajaxhtmlgoogle-chrome

Creating unique identifiers and names for dynamically generated editable HTML table cells using JavaScript

Clicking the button will trigger the GenerateTable() function to dynamically create a table based on selected options from the drop-down menu as column headings. Below is the JavaScript code, along with instructions on how to assign IDs and names to each t ...

javascriptjqueryhtml

The images were uploaded, but unfortunately they are not adapting to different screen sizes

I recently created a website that is optimized for tablet screens and included images. However, I noticed an unwanted gap between the first column and third column that needs to be fixed. My plan is to adjust the layout using Bootstrap code or another meth ...

htmlcssbootstrap-5

``I'm having trouble getting the onchange event to function properly in a customized

After following a tutorial, I successfully created a custom select dropdown using the provided link. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select However, I am facing an issue with the onchange event not working for the select ...

javascripthtmlcss

Creating a Curved Border with Clip Path in CSS

Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish thi ...

javascripthtmlcss

What is the best way to insert an anchor tag into text using React?

I am working with a variable const linkElement = `Hey this is a link ${<a href="www.google.com">Click me!</a>} that can be clicked}` Currently, it displays as Hey this is a link [Object object] that can be clicked. Is there a way to ...

javascripthtmlreactjs

Linkify Method appearing in html.erb file displaying with HTML on the view

Apologies if this question seems basic, but I am encountering an issue when calling the following method on the @page instance variable. The view is displaying HTML tags instead of the desired content... module PagesHelper def linkify_page page rege ...

htmlruby-on-railserblinkify

Trouble with Selecting an un-ordered list menu item in Selenium Java's side bar navigation

Exploring a different approach to selecting a menu item in the sidebar navigation within an iframe. After switching to the iframe, I am attempting to choose a specific item from the side menu to display its respective navigational items for selection. Thes ...

javahtmlselenium

Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...

css

Utilizing CSS, Javascript, and Jquery to Toggle a DIV's Visibility Based on Clicking Either of Two Images

Need help with showing and hiding divs based on image clicks. Have 2 images (Image_A and Image_B) and 2 hidden Divs (Div_A and Div_B). If Image_A is clicked, show Div_A. If Image_B is clicked, hide Div_A and show Div_B. This should work both ways, ensurin ...

javascriptjquerycss

Establish a vertical column that matches the height of its parent element

Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...

htmlcsstwitter-bootstrap

What is the process for creating a Sass mixin that declares a selector at the base level, rather than nested within another

Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...

csssassmixins

Creating responsive images using Bootstrap CSS framework

I have been focusing on optimizing the banner below the navigation menu on this website. My goal is to make it responsive so that the player in the banner remains visible even when scaling down to iPhone size portrait. You can find the code for this secti ...

htmlcsstwitter-bootstrapresponsive

How to Build a Custom Toolbar with Left and Right Aligned Elements using React.js and Material UI

Struggling with updating the toolbar on my website. Wanting the site name and logo on the left side, while login/sign-up buttons fixed to the right. Logo and title are in place, but can't get buttons to stay on right margin. Here's the code: func ...

javascripthtmlreactjsmaterial-ui