Cascading Style Sheets or CSS, in short, is a style sheet language used for describing the presentation of a document written in a markup language like HTML. At least, we as bloggers need to have a bit of knowledge about CSS and HTML.

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.

Google Chrome Inspector GUI

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 for data:message Value behind Quote within inspector and then type it at the form below to see if you inputting correct value.

Inspect Me!

Value of data-message:


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!

  1. Right-click element above and click inspect.
  2. Click under element.style Filter text of the Styles tab.
  3. Type background-color then press Enter or :
  4. Type red to add red color to its background.
Style tab GUI has :hov button, it uses to make element state change to :active, :focus, :hover, and :visited. While .cls mean to add class to the selected element, and New Style Rule [+] automatically declare highlighted element as the selector.

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.
Using both inline or internal style, when we finished editing, maybe we need to synchronize with the CSS code that is inside the page section manually. Well, its different story if we use external CSS, after we have finished editing try to press the name of our external .CSS file from the style tab in the inspector, we will found our CSS code is updated automatically, this called live editing. so we only need to save the file and then upload it again.

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.

Share This

10 comments:

  1. Nice knowledge gaining article. This post is really the best on this valuable topic.
    Calibration Services

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. 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.
    WordPress development company in Chennai

    ReplyDelete
  4. 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.
    Check out my site for more tips Minnesota Web Design

    ReplyDelete
  5. Mouse clicking is something can win you game, CPS TEST Game can test your mouse...

    ReplyDelete
  6. This is a very amazing post for cheap web hosting services. in this post, you have provided all the basic information regarding.

    website builder for reseller

    ReplyDelete
  7. Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.

    private label website builder

    ReplyDelete
  8. Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.

    white label website builder

    ReplyDelete

About
Creative Commons License
Blogger Book is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Misc