‘Style Sheets’ as the name describes, represents the layout of any kind of document. When it comes off for the HTML it means the style sheets of the HTML documents which enable you to specify the different parameters of the page describing its size, margins, color, and fonts. The most commonly used HTML style sheets today are CSS (Cascading Style Sheets) which are capable of easily setting the margins and parameters of different documents. Moreover, it also enables you to make the layout of different documents on the single screen. Some of the most important features of the HTML Style Sheets are:

  • Placing HTML Style Sheets in separate files provides flexibility to them so that they can be easily reused.
  • These style sheets are not dependent on any other Style Sheet language so that can be easily used.
  • It decreases the chances of media dependencies so that you can access different web pages on different devices.
  • HTML Style Sheets also enables you to blend them with other like CSS to get the best results.
  • It also enables you to get different types of layout styles while using the single format.

External Style Sheet

html document

External Style Sheets are the separate files which are used to declare all the styles which you wanted to have on your websites. These kinds of style sheets need to declare the styles separately. Once done explicitly on the code, remains same for each element of it. Moreover, if you wanted to update the style of your website you also need to use it once. These style sheets include links for all the HTML pages included in the layout.

These style sheets are generally used when someone wants to make changes in the multiple pages of their website. The main thing about these kinds of style sheets is that all the instruction regarding all the pages is stored in a single file which can be easily edited. The only thing you need to do is to link all the pages to the single layout by using <Link> tags on the each page and every head section. For example:

<head>

<link rel=”stylesheet” type=”text/CSS” href=”mystyle.css”>

</head>

While saving the Style Sheet, one thing that you should keep in mind is that the style sheet can be easily written in different types of text editors while it can only be saved by using the .css extension.

Internal Style Sheet

Internal Style Sheets are usually used for adding unique style to each and single page of HTML documents. This kind of style sheets needs to add code to each page of the file so that you can add uniqueness and special features in each page of it. This kind of style sheets can easily add to the document by defining in a <head> section of the HTML pages inside the >style> tag. An internal style sheet of the document usually includes the CSS code of the web page which is usually described in the header section. The main feature of this kind of style sheets is that the code once included in the single page can be easily reused for others if required.

If you are working with these style sheets you can easily use <style></style> HTML tags in the header section for describing the entire page. The entire coding of these style sheets is enclosed between the two <head></head> sections of the website code. For example:

<head>

<style type=”text/css”>

h1 {color:blue;}

h2 {color:red;}

p {color:green;}

</style>

</head>

Inline Style Sheet

Inline Style Sheets means to put Cascading Style Sheets (CSS) embedded inside the HTML files. These kinds of style sheets are usually present in the header section of each document along with <style> tags. These style sheets provide information about the current element.

These style sheets are not preferably used for professionals to develop web pages. Mostly these style sheets are used in HTML emails to make them fancy, older websites, CMS contents and dynamic content on websites that use JavaScript programming language. The inline style sheets are very much similar to CSS but still have some differences. These style sheets do not require any selectors for selecting the particular section to make changes. It has the capabilities to directly affect the tags in which they are embedded. For example:

<!DOCTYPE html>

<html>

<head>

<title>Playing with Inline Styles</title>

</head>

<body>

<p style=”color:blue;font-size:46px;”>

I’m a big, blue, <strong>strong</strong> paragraph

</p>

</body>

</html>

Where, <p style> represents the values of properties that are embedded HTML page.

CSS means Cascading Style Sheets. It is a language which is used for the making the presentation of Web pages, including colors, layout and fonts and that too on different devices. It helps in saving your hard work and time and enables you to get the layout of multiple pages on a single screen. It is sometimes misunderstood that CSS depends upon HTML that is totally wrong. It may be due to the reason that the <div> in the elements are often created by using the HTML.

Center image div element

CSS is actually a style sheet language which is independent of HTML and it can be used with XML- based markup languages. While setting margins in case of CSS the one thing that we should keep in mind is that the values of top and bottom margins should be set to 0 while the values of left and right margin should be set to ‘auto’.

Centralizing images through CSS

Centralizing images through CSS in is not a very difficult function. It can be easily done by using a few commands. While centralizing images most of the browsers use text alignment methods which is not a long reliable concept. You could also be enabled to centralize the images by without using this concept. This can be easily done with the help of explicitly using block level elements.

Now, the first question that strikes in our mind is that what exactly are ‘Blocks’. Blocks are actually elements that are present in our page with predefined widths. These blocks can be easily created by using <div> elements of HTML. You can easily centralize your images by using any other blocks in the following way:

IMG.displayed {

display: block;

margin-left: auto;

margin-right: auto;

}

When you use this command; you should also use the HTML code provided below to centralize the desired image.

<IMG class=”displayed” src=”…” alt=”…”>

The one thing that you should keep in mind is that while adding CSS commands to the various HTML codes with breaks you can’t use CSS inline functions. You can do it by just adding the following command:

<div style=”text-align: center;”>

Sometimes we have some images with fixed widths and heights in such type of images. These images need to have different codes for centralizing images.  We can use the command given below for centralizing the images:

.center {

width: 300px;

height: 300px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -150px;

margin-top: -150px;

}

If you have questions please comment below.