Now we will briefly describe changing the appearance of our blog design, whether it changes the position of a block element by editing the HTML section or through CSS with the help of the Inspection Tools that are available for each browser designed for the desktop.
How To use Chrome Dev Inspector
To use Inspect mode, simply, Right Click mouse button at the desired area and then choose "Inspect". try to inspect elements below and look fordata:message Value behind Quote within inspector and then type it at the form below to see if you inputting correct value.
Inspect Me!
Declare CSS Style to an element
In this part, we are trying to add red background-color to the element below
Add A Background Color To Me!
- Right-click element above and click inspect.
- Click under
element.styleFilter text of the Styles tab. - Type
background-colorthen press Enter or : - Type red to add red color to its background.
New style rule added from inspector will be stored under inspector-stylesheet.css that we can edit directly from source pane tab. Google Chrome Developer page has aslo own Guide, see Get Started With Viewing And Changing CSS.
There are three ways of inserting a style sheet:
- Internal style sheet
this is a CSS declaration inside <style> and </style> somewhere in the same page.<head> <style> h1 { color: red; } </style> </head> - External style sheet
for example : <link rel="stylesheet" href="my-external-style.css"> In the code, we have included the link of my-external-style.css file using the link element. We then write all of our CSS in a separate stylesheet called my-external-style.css without <style> tag so that it’s easily manageable.h1 { color: red; } - Inline style
CSS style that is typed inside element.style are written directly to the element e.g <div style='background-color:red'/> we call it inline style.
CSS Selectors
CSS is a design language which is used to style HTML elements. And in order to style elements, first, we have to select them. There are different ways we can select HTML elements.
Example HTML code
<div class='container' id='id-container'> <h1 class='heading' id='id-h1'> This is heading </h1> <p class='paragraph' id='id-p'> This is text from Paragraph </p> </div>>
1. By Element
The first way to select an HTML element is by simply using the Element name.
div {
margin: 10px;
}
h1 {
font-size: 20px;
}
p {
color: green;
}
2. By Class
The way of selecting HTML elements by using the class attribute. In HTML, we can assign different classes to our elements. Each element can have multiple classes, and each class can also be applied to multiple elements as well. Selected class described in CSS by adding . (dot) prefix to its class name.
.container {
margin: 10px;
}
.heading {
font-size: 20px;
}
.paragraph {
color: green;
}
3. By ID
Like classes, we can also use IDs to select HTML elements and apply a style to them. The only difference between class and ID is that one ID can be assigned to only one HTML element, so ID must be unique and there is only one ID on the page. We can select id by adding # as a prefix.
#id-container {
margin: 10px;
}
#id-heading {
font-size: 20px;
}
#id-p {
color: green;
}
4. Select multiple elements
We can select multiple element separate by a comma.
.heading, .paragraph {
font-size: 20px; }For further reading see complete selector guide at Mozilla Developer web.
For complete CSS Reference Mozilla CSS Reference.
Nice knowledge gaining article. This post is really the best on this valuable topic.
ReplyDeleteCalibration Services
Hi to all. The blog is really good and the above information is helpful to me. Thank you so much.
ReplyDeletejavascript training in chennai
javascript course in chennai
core java training in chennai
core java training institutes in chennai
C C++ Training in Chennai
C Training in Chennai
Appium Training in Chennai
JMeter Training in Chennai
This comment has been removed by the author.
ReplyDeleteI admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
ReplyDeleteWordPress development company in Chennai
I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
ReplyDeleteCheck out my site for more tips Minnesota Web Design
Mouse clicking is something can win you game, CPS TEST Game can test your mouse...
ReplyDeleteHaving an E-commerce store that is optimized for the customer requirement is not an easy thing. I definitely do check and correct the E-commerce mistakes and boost my E-commerce conversion rate. Thanks for sharing!
ReplyDeleteWordpress Website Development
Wordpress Plugin Developer
Wordpress Development Company
Wordpress Theme Development
Wordpress Web Development
Excellent post. I always check this type of blog, and I’m impressed with Extremely useful info, I care for such information a lot. I am exploring this particular info for a long time. Thanks to this blog my exploration has ended. Singapore web designer
ReplyDeleteNice post, it was nice to see this article. It was really appreciable. Thank you so much for sharing such an informative article. Website Designer Ireland
ReplyDeleteThis is a nice and informative, containing all information and also has a great impact on the new technology. Thanks for sharing it
ReplyDeletewebsite designing consultant
Thank you very much for sharing this helpful post. Please check out this awesome website https://onlineconvertfree.com/converter/images/
ReplyDeleteHow does the various products mentioned on the list compare, and which one can be said to be the best?
ReplyDeletehttps://seogeek.sg/
Who has been able to pick out the best service among those listed on this site?
ReplyDeletesingapore google seo course
This is really easy to style a blogger theme. However, hiring a graphic design agency is also useful that can help people to have best design in hand.
ReplyDeleteNice article about how to make some awesome themes using html & css. You can get good theme customization and website development services with them.
ReplyDeleteThank you for sharing this useful information, I will regularly follow your blog.Excellent post, thanks for sharing, it’s indeed very helpful for new blogger like me Game Development Outsourcing
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you for sharing this useful information, I will regularly follow your blog.Excellent post, thanks for sharing, it’s indeed very helpful for new blogger like me Maxlearners
ReplyDelete
ReplyDeleteI have been reading for the past two days about your blogs and topics, still on fetching! Wondering about your words on each line was massively effective. Techno-based information has been fetched in each of your topics. Sure it will enhance and fill the queries of the public needs. Feeling so glad about your article. Thanks…!
selenium training in chennai
selenium online courses best selenium online training
selenium testing training
selenium classes
This comment has been removed by the author.
ReplyDeleteThe information you have posted is very useful for online dating. The sites you have referred was good. Thanks for sharing.. website designing consultant
ReplyDeleteIt is imperative that we read blog post very carefully. I am already done it and find that this post is really amazing. web hosting comparison
ReplyDeleteWonderful post. I simply stumbled upon your weblog and wanted to mention that I have
ReplyDeletetruly loved surfing around your blog posts.
You can find more information regarding software services click herebest software solution in hyderabadREPLYDELETE
Nice post. Thanks for posting and please keep us updated for more.
ReplyDeleteWebsite Development Company Singapore
Mobile App Development Singapore
Freelance Web Development Singapore
You are providing good knowledge. It is really helpful and factual information for us and everyone to increase knowledge. Continue sharing your data. Thank you. Read info about Web Design and development
ReplyDelete