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

asasass · November 4, 2017, 2:41pm

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>

TechnoBear · November 4, 2017, 2:47pm

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

asasass · November 4, 2017, 2:49pm

width="260" height="194"

width="180" height="180" 

fill="orange"

TechnoBear · November 4, 2017, 2:58pm

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

asasass · November 4, 2017, 3:03pm

<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>

coothead · November 4, 2017, 3:04pm

Hi there asasass,

the practical answer is none.

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

TechnoBear · November 4, 2017, 3:08pm

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.

asasass · November 4, 2017, 3:13pm

Was my answer sufficient enough?

TechnoBear · November 4, 2017, 3:17pm

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).

coothead · November 4, 2017, 3:21pm

Hi there TechnoBear,

I am sorry that my reply was misleading.

Perhaps, I should have answered rather more succinctly…

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

coothead

PaulOB · November 4, 2017, 3:22pm

Don’t hold your breath

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="">

Mittineague · November 4, 2017, 3:44pm

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.

PaulOB · November 4, 2017, 3:59pm

Yes it is always best to do so

system · February 3, 2018, 10:59pm

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

Topic		Replies	Views
How much of this code can be put into CSS and how would I do it? HTML & CSS	77	3285	May 1, 2017
How come Blogger doesn't respect closing tags? HTML & CSS	9	1323	February 1, 2018
I have a question, I want to know if this is good practice or not HTML & CSS	24	3496	October 7, 2016
Background color for button HTML & CSS	6	3829	January 4, 2018
Which is a better code and why? Design & UX javascript , html	10	3040	February 3, 2018

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

Related topics