Inspecting the webpage

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.

<Div> click on it, you will see style tab.

Copy the highlighted code, go to your wordpress website dashboard.

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.

<Span style =” color : #ffffff;”> where style is the attribute

WordPress HTML colors

How to get color of Mozilla firefox

Install color picker extension.

Open it and drag your mouse on Mozilla logo, you will be getting hexadecimal of colors.

WordPress HTML – Font Styling

<span style = “Font-size:20px;”>I am the best</span>

How to make text bold, we can use font-weight:500; (font weight value depends on the font family you
are using)

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.

DIV and lists elements

Unordered list

It is similar to <span> element.

It is block element and it is dealing with the large group of content together. Such as page, single
container, paragraph.

We can use <div> to create divisions aka sections.

<div>

<H1>content</h1>

</div>

<div><ul></ul></div>

<div> element can be within another <div> element.

We can have child <div> under parent <div> and even we can have <div> under <child div>.

We have parent <div> as well.

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.

Paddings and margins

No space between both <div>, for that we will use margin.

In case we have already applied margin in the opposite direction of 2 elements.

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

Here border has properties weight or thickness, style, and color.

Border can be left, right, top and bottom.

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.

Padding -> Borders-> Margins called hierarchy.

Hyperlinks and images tags

<a href = link>content</a> where href means source link

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.

We have height, width and alt attributes.

How to create the hyperlink from 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.

How to cache your WordPress website?

Before we make any changes to our website, make sure to disable the cache.
Child theme
If we don’t have any child theme and we have made changes such as changes to the design, adding
some extra functionality to the parent theme, you will lose the customizations you have made to the
theme when you update your theme.

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.

Install and activate this theme

And go to Tools-> Child themes

Now we are going to create a new child theme.

We need to choose the parent theme, you want to create a child theme for.
Click on Analyze

Don’t change 4,5,6 settings

Number 7, show/hide child theme attributes

Where we can provide custom values such as Child theme name,

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.

And then click on 9th step – create a new child theme.

Preview the child theme before you activate it.

Activate it.
Go to appearance – themes

You would be able to see both parent and child theme

For e.g if I want to changes to the theme such as background color, go to Editor

You should have that child theme style.css

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.

Appearance -> theme options

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

The style.css file

We can have more than stylesheets as well in the same theme.

Go to Appearance -> Editor -> parent theme stylesheet (will be shown)

Why CSS and the CSS code structure

It will apply to all <a> tag throughout the website.

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.

Classes and IDs

We can say that I want every <h3> tag to be red color.

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 have added class to <a> tag.

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.

We need to add classes separated by commas.

Here we can see 2 different classes with different elements.

. represents class. (.article-title, .article-link)

NOTE: not every property is applicable to every element.

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.

We can’t use same id for different elements on the same page.

Id is reserved only for one specific 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 we have used id with # (represents id) with property of background-color:blue.

Here though we have <3> with same classes, but different id.

Id will take precedence.

Understanding the CSS specificity – Part 1

We can’t make changes to the theme ideas because the structure was chosen by theme developers.
We need to know how to overwrite the styling chosen by theme developer. This is where specificity
comes into play.

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.

But we are going to override.

We will change the style for the second article.

What if theme already has set the background color to red, but you want to override it to blue.