Archive

Archive for the ‘CSS’ Category

Interesting difference between CSS Padding and Margin tags and innerText and innerHTML function

Have you ever wondered the difference between CSS Padding and Margin tage?

Padding defines the spacing between your element and the boarder, while the margin defines the spacing between your border and any other outer elements in your CSS layout.

Here is an example that should help further clarify:

1) Border = 0, padding = 0, margin = 0

Sample Text

2) Border = 10px, padding = 0, margin = 0

Sample Text

3) Border = 10px, padding = 10px, margin = 0

Sample Text

As you can see the margin defines the space outside your border and between other elements, while the padding defines the space between your element and the elements border. Hopefully by understanding the difference you can more effectively utilize your CSS margin and CSS padding properties.

It will be worth to add another commonly miss understood difference between innerHTML and innerText.

innerHTML returns all of the markup and content within a given element.

innerText returns all of text content within a given element.

Hi There

InnerHTML of H1 would be: Hi There

InnerText of H1 would be: Hi There

Hope this bit code is helpful for you.

Happy styling 🙂

Categories: CSS Tags:

Types of stylesheet and it’s priority level

There are three types of CSS styles:

  • inline styles
    Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.

    <a href="" style="text-decoration: none;">
  • embedded styles
    Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in.

    <style type="text/css"> p { color: #00f; } </style>
  • external styles
             External styles are styles that are written in a separate document and then attached to various Web documents.
             External style sheets can affect any document they are attached to.
<link rel="stylesheet" type="text/css" href="styles.css" />

CSS best practices recommends that you use primarily external style sheets for styling Web pages so that you get the most benefit.

It’s priority level is followings.

Inline styles  has high priority then embedded styles and external styles has the lowest priority.

Happy styling. 😉

Categories: CSS Tags: ,
%d bloggers like this: