How much of this code can be put into </style> tags?


#1

I've been trying to figure this out and haven't.

<style>

</style>

  <svg width="260" height="194">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
  </svg>

#2

How much of it is style information? (By that I mean style=" ...".)


#3

width="260" height="194"

width="180" height="180" 

fill="orange"

#4

No, that's not what I'm asking about. I'm asking whether you have any inline styles - style=" ..." - in your code.


#5

<style>
  #playButton4 {
    position: relative;
    border: 3px solid #0059dd;
    width: 260px;
    height: 194px;
    cursor: pointer;
    background-color: black;
  }
  
  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }
  
  .button div {
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

</style>

<div id="playButton4" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
button.querySelector('.play').style.display='none';
player.play();
} else {
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

  <svg width="260" height="194">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
  </svg>

  <div id="grad"></div>


  <div class="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
    </div>
  </div>
</div>

<audio id="player4" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
</audio>

#6

Hi there asasass,

the practical answer is none. :winky:

Only use the style element during coding, then move it to an external file and link to it....

<link rel="stylesheet" href="css/screen.css" media="screen">

coothead


#7

That's rather misleading.

That is, of course, best practice, but I'm sure you'd agree that even during initial testing, it is preferable to have the styles with <style> tags, rather than inline.


#8

Was my answer sufficient enough?


#9

Sufficient enough for what? You can sort this out yourself without step-by-step instructions.

Anywhere you have inline styles - style=" ... " you can move those rules to a <style></style> section in the head of your page. Remember that you might need to add classes so that you can target the correct element(s).


#10

Hi there TechnoBear,

I am sorry that my reply was misleading. :unhappy:

Perhaps, I should have answered rather more succinctly...

  1. Never use inline styling, it is messy and amateurish.
  2. Only use the "style element" whilst coding.
  3. On finalisation remove the CSS to an external file.
  4. Link to the file in a similar fashion to this...
    <link rel="stylesheet" href="css/screen.css" media="screen">

coothead


#11

Don't hold your breath :slight_smile:

I don't do svg's but if the above is true then you would do this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.svg1{
	width:260px;
 	height:194px;
}
.svg1 image{
	width:180px;
	height:180px;
}
#circleView circle{
	fill:orange;
}
</style>
</head>

<body>
  <svg class="svg1">
    <defs>
      <clippath id="circleView">
        <circle cx="130" cy="97" r="85"></circle>
      </clippath>
    </defs>
    <image x="40" y="7" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="40" y="7" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
  </svg>
</body>
</html>

What does the orange fill do? It seems to have no effect.

Why aren't you simply using a normal image instead of all that svg stuff?

e.g. You could just do this:

.test{
	background:url(https://i.imgur.com/BO6KOvw.jpg) no-repeat 25px 25px;
	background-size:130px 130px;
	border-radius:50%;
	width:180px; 
	height:180px;
}

<img class="test" src="https://i.imgur.com/4HJbzEq.png" alt="">


#12

You may not have to specify the width and height attributes, but IMHO, it is best to do so. They are not so much style as they are dimensions that allow a browser to reserve the area while it paints the page.

And including them could prevent errors
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

If an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the error event, that event handler will get called. This can happen in a number of situations, including:
.....
The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the element's attributes.


#13

Yes it is always best to do so :slight_smile:


#14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.