HTML & CSS Image alignment

[Krygore]

I have two issues that I am currently facing.
First, I'm having issues getting an image to align to the right hand side of the page with the text to the left, capable of wrapping underneath the image. Like a standard web page would show.
Second, I would like to change the color of linked text so that it is more visible against a darker background. I'm unsure if this is done within the <a> tag or if it is something done within CSS.

Here's where I'm at...

[CODE lang="html" title="Image alignment"] <section>
<div class="container">
<img id="whoareyoujpg" src="images/who_are_you.jpg">
</div>
<p>Here, you will begin the creation of your Dragonborn character. There are ten different <strong><em><span color="goldenrod">races</span></em></strong> to choose from;</p>
<ul id="race-list">
<li>Altmer (High Elves)</li>
<li>Argonian</li>
<li>Bosmer (Wood Elves)</li>
<li>Breton</li>
<li>Dunmer (Dark Elves)</li>
<li>Imperial</li>
<li>Khajiit</li>
<li>Nord</li>
<li>Orc</li>
<li>Redguard</li>
</ul>
</section>[/CODE]
[CODE title="Link text color"] <section>
<h3>Table of Contents</h3>
<table id="table-of-contents">
<tr>
<td><a href="a_new_beginning.html" target="_blank">A New Beginning</a></td>
</tr>
</table>
</section>[/CODE]

  /*A New Beginning*/

#whoareyoujpg{
    align-content: right;
    height:200px
}
#race-list{
    color:goldenrod;
    text-decoration: underline;
}
}
#table-of-contents{
    color:rgb(216, 189, 35)
}

Hope this coding helps.

 

[Antero360]

I have two issues that I am currently facing.
First, I'm having issues getting an image to align to the right hand side of the page with the text to the left, capable of wrapping underneath the image. Like a standard web page would show.
Second, I would like to change the color of linked text so that it is more visible against a darker background. I'm unsure if this is done within the <a> tag or if it is something done within CSS.

Here's where I'm at...

[CODE lang="html" title="Image alignment"] <section>
<div class="container">
<img id="whoareyoujpg" src="images/who_are_you.jpg">
</div>
<p>Here, you will begin the creation of your Dragonborn character. There are ten different <strong><em><span color="goldenrod">races</span></em></strong> to choose from;</p>
<ul id="race-list">
<li>Altmer (High Elves)</li>
<li>Argonian</li>
<li>Bosmer (Wood Elves)</li>
<li>Breton</li>
<li>Dunmer (Dark Elves)</li>
<li>Imperial</li>
<li>Khajiit</li>
<li>Nord</li>
<li>Orc</li>
<li>Redguard</li>
</ul>
</section>[/CODE]
[CODE title="Link text color"] <section>
<h3>Table of Contents</h3>
<table id="table-of-contents">
<tr>
<td><a href="a_new_beginning.html" target="_blank">A New Beginning</a></td>
</tr>
</table>
</section>[/CODE]

  /*A New Beginning*/

#whoareyoujpg{
    align-content: right;
    height:200px
}
#race-list{
    color:goldenrod;
    text-decoration: underline;
}
}
#table-of-contents{
    color:rgb(216, 189, 35)
}

Hope this coding helps.

I do believe you are looking for the float attribute:
( https://www.w3schools.com/css/css_float.asp )

As far as your second question is concerned.. you can do either or..
so CSS, which stands for Cascading Style Sheets... has 2 main ways of working.. a css file (style.css), or what we call inline-styling. Inline-styling is added right on the html tag itself see below:
<div id="myId" style="float: left; height: 200px;">
</div>

WARNING: be careful how you style lol.. order on the stylesheet link does indeed matter.. as well as inline vs .css...
any styling done to a given element in multiple stylesheets, may not take effect.. the last stylesheet will take precedence.. any inline-styling will override any .css styling.

 

[Krygore]

I do believe you are looking for the float attribute:
( https://www.w3schools.com/css/css_float.asp )

As far as your second question is concerned.. you can do either or..
so CSS, which stands for Cascading Style Sheets... has 2 main ways of working.. a css file (style.css), or what we call inline-styling. Inline-styling is added right on the html tag itself see below:
<div id="myId" style="float: left; height: 200px;">
</div>

WARNING: be careful how you style lol.. order on the stylesheet link does indeed matter.. as well as inline vs .css...
any styling done to a given element in multiple stylesheets, may not take effect.. the last stylesheet will take precedence.. any inline-styling will override any .css styling.

So I should add an id to all specialized images to prevent messing with the defaults I have set in css stylesheet?

 

[LTomy]

So I should add an id to all specialized images to prevent messing with the defaults I have set in css stylesheet?

Yep. And give classes to images that have common attributes.

 

[Krygore]

As far as the coding goes, how's this look? Easy enough to understand or too easy to confuse?

 <section>
        <div class="rightalignimg">
            <img id="whoareyoujpg" src="images/who_are_you.jpg">
        </div>

.rightalignimg{
    float:right;
}

#whoareyoujpg{
    width:40%;
}

 

[LTomy]

Looks good

Two little things:

1. I thing you should use camelCase naming: rightalignimg -> rightAlignImg.
2. Maybe you should rename 'whoareyoujpg' to 'width40perc', or something like that, and make it a class so it can reused.

Note that you can give many classes to an element, like that:

<img src="img.png" class="class1 class2, class3">