How do you go about indenting a paragraph in CSS following the insertion of

My objective: To have all paragraphs indented except for the ones following the .firstCharacter class.

In some sections of my page, I utilize a drop cap to start off the first paragraph. I have configured all subsequent paragraph tags to be indented using...

.storyContainer p + p {
    text-indent: 1.5em;
    margin-top: 0
}

To style my drop cap, I am utilizing...

.firstcharacter {
    float: left;
    font-size: 80px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-family: 'Droid Serif', serif;
}

Here is how my HTML code looks like...

<div class="headline">This is a headline!</div>

<p><span class="firstcharacter">T</span>his text is NOT indented because it's the first one.</p>
<p>This text will be indented because it's the second one.</p>
<p>This text will be indented because it's the third one.</p>

<div class="someBox">This is some extra box</div>

<p>I want this to be indented but it won't happen because it is the first one after the box!</p>
<p>This text will be indented because it's the second one.</p>

<div class="headline">This is another headline!</div>

<p><span class="firstcharacter">T</span>his text is also NOT indented because it's the first one.</p>
<p>This text will be indented because it's the second one.</p>
<p>This text will be indented because it's the third one.</p>

<div class="someBox">This is another extra box</div>

<p>I want this to be indented but it won't be because it's the first one after the box!</p>
<p>This text will be indented because it's the second one.</p>

Any suggestions on how to address this issue?

Thank you!

Answer №1

http://jsfiddle.net/WRKxQ/

Here is the modified HTML code:

<div class="headline">This is a headline!</div>
<p class="firstcharacter"><span>T</span>his text NOT indented because it's first</p>
<p>This text will be indented because it's second.</p>
<p>This text will be indented because it's third.</p>
<div class="someBox">This is some extra box</div>
<p>I want this to be indented but it won't be because it is first after the box!</p>
<p>This text will be indented because it's first.</p>

<div class="headline">This is a headline!</div>

<p class="firstcharacter"><span>T</span>his text NOT indented because it's first</p>
<p>This text will be indented because it's second.</p>
<p>This text will be indented because it's third.</p>
<div class="someBox">This is some extra box</div>
<p>I want this to be indented but it won't be because it is first after the box!</p>
<p>This text will be indented because it's first.</p>

The CSS has been adjusted as follows:

p {
    text-indent: 1.5em;
    margin-top: 0
}

.firstcharacter {
    text-indent: 0;
}

.firstcharacter span {
    float: left;
    font-size: 80px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-family:'Droid Serif', serif;
}

These modifications should address your concerns. Enjoy!

Sincerely, Jascha

Answer №2

To start off with your opening sentence, apply p::first-line{} for an indentation effect. Utilize p::first-letter to highlight the initial character of your text. Remember to use a single colon for compatibility with IE versions below 9.

If you wish to style all paragraphs subsequent to the first one, consider utilizing the nth-child(n) pseudo-class selector.

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

Troubleshooting a vertical overflow problem with Flexbox

Struggling to design a portfolio page for FreeCodeCamp using flexbox layout due to vertical overflow issues. Here is the HTML: <div class="flex-container flex-column top"> <header class="flex-container"> <h1 class="logo"><i clas ...

Style the CSS exclusively to the expanded menu section

I need help with applying CSS rules to my navbar menu without affecting the collapsed menu. I came across a solution here and tried using this code: @media (min-width: 980px) { /* your conditional CSS*/ } However, the issue arises when my browser win ...

Can media queries styles be applied to a window of random size using JavaScript?

Can JavaScript be used to apply media queries style based on random window sizes? I have 5 buttons that I want to switch styles for using JavaScript according to the media queries defined in my CSS stylesheet. Is there a method to achieve this? ...

Is it advisable to set the html root at 62.5% when using rem units in CSS? Does this imply that the default font size of browsers is 16px?

During a discussion with a group, I mentioned the 62.5% trick for scalability (setting 62.5% as font size in root and using rem units throughout CSS for easier scalability when users change default browser font size) and their arguments were as follows: " ...

Display a string of text containing multiple interactive links

I have a table and I want to create an interactive effect where, upon mouseover or click of certain elements, text will appear next to it. This text may contain multiple lines and clickable links within the content. For instance, in the table generated by ...

How can I make my navbar stay fixed in place and also activate the transform scale functionality?

After fixing the position of my navbar with the class "top," I noticed that the transform property scale does not work on the div element I applied. The hover effect on the box only works when I remove the position from the navbar. This is the HTML code: ...

Surprising spacing found between CSS header elements

As I am in the process of redesigning a website, I have encountered an issue with certain elements in the header section. Specifically, the header consists of a logo, some text, and a navigation bar. There seems to be a thick gap between the bottom of the ...

Hover over an element repeatedly to trigger an action with jQuery, as opposed to just once

Is it possible to have my p tag transition whenever I hover over it? I am looking to create a hover effect on an image that displays text in a div tag with scaling transitions. Can someone assist me with this? Instead of using jQuery or JavaScript to dyn ...

Convert a form into plain text utilizing CSS with minimal usage of jQuery or Javascript

I am working on an HTML page which has a form with various tags such as checkboxes, dropdowns, and more. When a button is clicked, I want to display the same form as plain text in a popup using jQuery dialog. Currently, I have managed to show the form in ...

Placing emphasis on an object that appears following a period of waiting

I'm currently working on enhancing the accessibility of a slider that will be featured on my website. The goal is to create an effect where, after clicking (or pressing enter) on the first slide, the focus shifts to the second slide element, allowing ...

Ensuring your image matches the size of the containing div element

I am trying to create a navigation bar in the footer of my website using images. The footer should take up 10% of the total screen, and the images should also be contained within that 10%. However, I am having trouble with the images not scaling properly a ...

Using loops in Sass mixins causes errors

I have been developing a SASS code to generate CSS output that has the following format. background: -webkit-linear-gradient(top, 50%); background: -moz-linear-gradient(top, 50%); background: linear-gradient(top, 50%); This is the SASS mixin code I cr ...

CSS3 animations: the speed of transitioning between animations is sluggish

The slider I created has animations that are taking too long to transition between slides. I have tried adjusting the properties, but I can't seem to find the right one to control the speed of the transitions. /* Keyframes */ @-webkit-keyframes anim ...

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

Update the appearance of a cell if the value within it is equal to zero

I have discovered a way to achieve this using inputs. input[value="0"] { background-color:#F7ECEC; color:#f00;} Now, I am looking for assistance in applying the same concept to table cells. Can anyone provide guidance? Thank you. ...

Concerns arise regarding the implementation of an image slider using HTML and CSS

Hey guys, I've created an image slider, but I'm facing an issue where the first click doesn't trigger a smooth animation. Instead, it jumps to the target without any transition. I want a seamless change of images, but right now it's jus ...

What are some ways to customize the player for Youtube videos?

I'm looking to recreate the design of Youtube videos on my website when I embed them. The image below is just an example, but it reflects the simplicity I am aiming for. Any guidance or examples would be greatly appreciated, as I am unsure where to be ...

Transition effects in CSS when hovering

I've run into an issue where I'm attempting to create a hover transition effect on a div when the mouse hovers over it. The idea is that hovering over the main div should trigger another div to appear above it, with a smooth transitioning effect. ...

Trouble displaying portrait images in CSS slideshow

My portfolio includes an image slider called wow slider, which can be found at You can view my site with the image slider on this page: http://jackmurdock.site50.net/StudioWork.hmtl While most of the galleries display portrait and landscape images correc ...

Adding padding-top to the h1 element within a vertically aligned div

I have a div with a set height and the content inside adjusts vertically according to the height. To align it vertically, I added the property display-table; to the parent div and display: table-cell; vertical-align: middle; to the child div. The alignment ...