HTML
HTML
Right click
Add on on firefox browser (firebug)
How to change the background color of the website.
Right click on the page you want to change the background and inspect element.
Appearance -> Editor -> paste the code at the end and make changes to the color.
And click on update the file. You will see the difference in the background.
Inspect element with Firebug.
Block and inline elements
We can see Mukherjee is bold and italic at the same time. Cause <Strong> and <em> are call inline
elements.
SPAN and Inline styling
<SPAN> element is an inline element that is used to add some styling to the specific content. For e.g a
word or a sentence, etc.
Open it and drag your mouse on Mozilla logo, you will be getting hexadecimal of colors.
Note: when you are applying styling to your block elements, you don’t need <span> elements such as
<H1>, but <H1 style (attribute>), <span> element is used with inline elements.
It is block element and it is dealing with the large group of content together. Such as page, single
container, paragraph.
<H1>content</h1>
</div>
<div><ul></ul></div>
We can have child <div> under parent <div> and even we can have <div> under <child div>.
The style we apply to the parent div, will be applied to all children div automatically.
Here we have applied background color property to the parent div, it will affect all div as well.
Background colors
Now for e.g we have different style for child div than the parent div the child div precedence will be
there.
As we have given parent <div> is grey but one of its children <div> is green.
If we have more than one values of the same attribute such as background color, then it will take child
first.
Here we have applied margin-bottom to the first div and it created 20px space (bottom of the first div
and will be top for the bottom div) and if we try to use margin-top for the second <div>, it won’t make
any difference.
So here both margins are facing each other’s and both margins are equal, only one will be used.
If we have difference margin such as for one element is 20px and for the other one it is 10px, it will
apply the higher value.
Here we can see margin left and margin right.
Space between content of the elements and around background and borders– padding is used.
Border
Relationship between padding, margin and border is used to create the space between the content and
its border. The border is used to create the space between content and its margins.
If we want to open the link in the another windows not on the same window (by default)
<img> has src attributes that points to the source of the image.
<img> tag will be used after <a> hyperlink tag. (image will have the link on it)
<a href=””><img></a>
Caching
It can really affect you to make changes to your website.
This requested data will be stored in cache.
So next time, browser won’t go all the way long to the server, but it will get the information from the
cache.
Most SEO people use cache because content will be loading quicker on user’s screen.
For e.g if you have made changes to your website, your browser, web host and web server won’t
recognize the CSS changes when they are in the cache state.
Child theme allows us to customize our main theme as many times we want to and it will keep all those
changes when we update the theme that’s what the child themes are.
We need to choose the parent theme, you want to create a child theme for.
Click on Analyze
Take care of the 8th step, Copy Menu, Widgets, and other customizer settings from the parent theme
to the child theme – check this box
If you have any changes to the child theme, they will be replaced by the parent theme settings.
Activate it.
Go to appearance – themes
For e.g if I want to changes to the theme such as background color, go to Editor
We can remove the plug in if we want to because we are done with our work to create the child theme.
Most of the premium themes have the option to add custom CSS.
If we have that custom CSS option to use, we don’t need to use a child theme.
For e.g if you want to change the background color, no need of the child theme but if changes are
extensive then we need to use the child theme
HTML tells about the structure of the page such as how many elements are there <div>, <aside>, and
classes, tags, etc.
Id and class is used by the HTML so that we can style them. CSS is the way to identify the elements we
want to style.
And we can say every <div> that has the class of “blog-article” will have background of blue color.
Here “.” represents the class and we have added style to the class.
We can see here we have <h3> with the same class, but for another <h3> we don’t have any class.
Here we can see yellow color for all elements that have class called article-title.
Here now we have added Element. Class, this style will be applied to only <h3> element that has class
called article-title.
Now we want different elements having the same properties added for instance – red color. Like we
have <a> and <h3> with different class.
For e.g you can give color property to <a> or <h1>, but it doesn’t mean you can give this is to <img> tag.
Here on link and h2 we have applied the same property that is text-align:center; but it didn’t apply to
both of them, because text-align property is not applicable to link <a> tag.
Here we are targeting only <div id=”first-article”> not any other element.
For e.g we have same element with same class such as <h3> with class .article-title and we want to have
a unique property for one element, then we use id.
Here though we have <3> with same classes, but different id.
It defines the styling that has been chosen when multiple values are offered.
Id is specific than the class that is why id always override the class.
We need to understand Inspect on browser to understand the styling so that we can make changes
accordingly.
We will have 2 <div>, one controls the left bar and the second one control the sidebar.
By default, inspector will choose class before the id.
What if theme already has set the background color to red, but you want to override it to blue.