How to Fix & Remove Inline CSS

How to Fix & Remove Inline CSS

How to Fix & Remove Inline CSS

Learn how to fix inline CSS in your code, and speed up both your development time and website in the process. Test your site for free at www.seositecheckup.com.

In this video, you’ll hear some of the following:

” In this video, we’ll show you how to improve your site’s SEO score and loading time by fixing a common issue – using too much inline CSS. After running the diagnostics of our site on seositecheckup, we can see that it’s failed a few common checks. In this case, our site has 36 instances of inline CSS styles, which slows down its loading page time quite dramatically.

Now, CSS if you’re not fully aware, stands for for Cascading Style Sheets. Your CSS file describes how HTML elements are displayed on your site. CSS saves a lot of redundant code as it controls the layout or styling of multiple web pages all at once.

If we click here, we can see the details on each instance. And if we click “how to fix”, we see some general guidelines on how to code this properly, so we can have all of our CSS used in one external style sheet, instead of sprinkled throughout the code of our main page. In this case, we should locate each issue, remove it, and point the code towards our one external CSS file. ”

Hear more by watching the full video!

#removeinlinecss #externalstylesheet #searchengineoptimization


Content

0.03 -> hey everybody how's it going in this
1.979 -> quick video we're going to show you how
3.389 -> to improve your site's SEO score and
5.13 -> loading time by fixing a common issue
6.72 -> using too much inline CSS after running
10.59 -> the Diagnostics of our site on SEO site
12.57 -> checkup we can see here that it's failed
14.49 -> a few common checks in this case our
19.65 -> site has 36 instances of inline CSS
22.08 -> styles which slows down its loading page
24.51 -> time quite dramatically
26.779 -> now CSS if you're not fully aware stands
30.06 -> for cascading style sheets your CSS file
32.91 -> describes how HTML elements are
35.04 -> displayed on your site CSS saves a lot
38.04 -> of redundant code as it controls the
40.05 -> layout or the styling of multiple web
42.09 -> pages all at once so if we click here we
47.399 -> can see the details on each instance and
56.25 -> if we click how to fix we see some
58.59 -> general guidelines on how to code this
60.21 -> properly so we can have all of our CSS
63.3 -> used in one external stylesheet instead
65.79 -> of being all sprinkled throughout the
67.14 -> code of our main page in this case we
70.53 -> should locate each issue remove it and
72.81 -> then point the code towards our one
74.939 -> external CSS file so let's jump right in
78.45 -> and look at a few examples here let me
80.909 -> click on the results list again and we
83.549 -> have one issue here with this div so
86.549 -> let's use the general guidelines to fix
88.049 -> the issue first we'll check our sites
91.77 -> source code which we can do by right
93.45 -> clicking inspect source in your browser
95.81 -> and here we can find the offending code
98.39 -> then in your text editor let's remove
101.31 -> this style the margin right 35 pixels
103.619 -> and quotes and in our CSS stylesheet
106.829 -> we'll come to our button row for word
109.049 -> height attribute and then here we'll add
111.09 -> that margin right 35 pixels without
113.49 -> quotes all right now of course this is
115.71 -> assuming that your CSS file already
117.659 -> contains that particular style attribute
119.579 -> in this case this button row for word
121.68 -> hide if it isn't in your CSS yet but
124.59 -> it's a style attribute that we use often
126.299 -> enough in our HTML pages we can always
128.55 -> add it
129.42 -> done with that one now let's do the same
132.15 -> for another issue this suggestion box
134.31 -> div in the code of our index page will
137.61 -> simply remove the display:none style
139.319 -> attribute and then again in our external
144.63 -> CSS we'll come to our suggestion box
146.94 -> parameters and add display:none to it
149.94 -> and so on you get the picture
152.34 -> so by avoiding this inline CSS wherever
155.19 -> we can we can avoid redundant code we
158.22 -> can make global changes to our website
159.9 -> once instead of combing through all of
161.88 -> our pages and changing lines one by one
163.92 -> and then most importantly for the
166.14 -> purposes of SEO and for the overall user
168.45 -> experience of our site our pages will be
170.76 -> leaner and meaner and load much faster
173.209 -> feel free to check out our other videos
175.62 -> so you can keep fine-tuning and getting
177.36 -> the most out of your SEO and click
179.37 -> subscribe to stay updated with new tips
181.26 -> and tricks to get you to the top of the
182.85 -> search engine results pages

Source: https://www.youtube.com/watch?v=DX3mSZmuFoE