CODEWITHSUNDEEP
htmlcss
Bhagya Amarasinghe
Bhagya Amarasinghe

Reputation: 33

convert the following html inline style attributes to css

I designed a web page using bootstrap studio and all the style attributes are inline. I want to change this and add these to a separate css file. I have trouble doing that, because when i add the image as 'background-image:url('img/pic.jpg'); it doesn't show up. And i don't know how to convert all the following attributes . The following is the code.

<div class="intro-body" style="background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(&quot;assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137&quot;) right / contain repeat-x;filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);">

for example what I want is , if html code is <div class="intro" style="width:500px;height:400px;"> the code for the separate css should be

.intro
{
width:500px;
height:400px;
}

Upvotes: 0

Views: 142

Answers (5)

Tarak B Patel
Tarak B Patel

Reputation: 34

I think you have put css in seperate folder so you are having this issue.

After Separating your css, Change url to relative values.

ie. url('img/pic.jpg') to url('./img/pic.jpg')

.intro-body {
  width:500px;
  height:400px;
  background: linear-gradient(90deg, rgba(8,1,36,0.4), transparent 49%), url('./img/pic.jpg') right / contain repeat-x;
  filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<body >
    <div class="intro-body"></div>
</body>

Upvotes: 1

Holzer
Holzer

Reputation: 69

if the folder structure is : FolderProject/css/style.css for the css
FolderProject/index.html for the html
FolderProject/assets/img/

The css file:

.intro-body {
  width: 500px;
  height: 400px;
  background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(&quot;../assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137&quot;) right / contain repeat-x;
  filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}

index.html:

<html>
  <head>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="intro-body">
    </div>
  </body>
</html>

Upvotes: 0

Aalexander
Aalexander

Reputation: 5004

You can write it in your css file as you did in your question

.intro
{
width:500px;
height:400px;
}

But note to use the right class name in your example it would be

<div class="intro-body"> // and not "intro"


.intro-body {
  background: linear-gradient(90deg, rgb(8, 1, 36) 40%, transparent 49%), url(&quot;assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137&quot;) right / contain repeat-x;
  filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<div class="intro-body">"</div>

Then in your .html file you have to include the css file. Add the following line in the head section of your html document.

<link rel="stylesheet" href="yourstyle.css">

Note: Be careful at the href attribute it depends on the filestructure you have in your project.

For instance when your index.html file is in the base folder and the css file is in the directory /styles

  • index.html

  • styles

    • yourstyle.css

Then you have to write

<link rel="stylesheet" href="./styles/yourstyle.css"> inside your index.html file

Upvotes: 2

Minal Chauhan
Minal Chauhan

Reputation: 6158

just copy the inline css and paste this code in css with your class sector .intro-body

.intro-body {
  width: 500px;
  height: 400px;
  background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(assets/img/0274207612d515f49012c87803a9e631.gif) right / contain repeat-x;
  filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<div class="intro-body"></div>

Upvotes: 2

etution lanka
etution lanka

Reputation: 83

create separate css file and include your css file to html page as follows.

<link rel="stylesheet" href="mystyle.css">

add your css to that file as shown below.

.intro-body {
    /*your css goes here*/
 }

Upvotes: 0

Related Questions