The Style Integration

Styling

Well styling an element basically means what the word style means. Meaning change the text color, background color , text-size, etc. I will be using an online editor called codepen to display the input and output together.

There are 3 types of styling.

  • Inline styles

In inline style you can style inside the element tag like this

<p style=”color:blue; font-size:30px;”>hello, I am a paragraph</p>

Example.

inline

  • Internal styles

    For internal styling you use  <style></style>  tags inside the head tags of your html  and style inside that, like this:-

    <head>
    <style>
    p{
    color:red;
    font-size:30px
    }
    </style>

    </head>
    <body>

    <p>example text</p>

    </body>

    Example

internal

 

  • External styles(CSS style sheet)

External styles are written same as internal styles. except there are written on a separate page which is then saved in .css format

You can add external css style sheet to your html with a <link> tag, like this:-

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

Example.

external

 The rel attribute defines the relationship that the linked file has to the HTML file from which it’s referenced. In most cases, this resource will simply be “stylesheet“, which means, not surprisingly, “the referenced document is a style sheet.” And now you will be wondering what the href is well href stands for hypertext reference. It’s the source of the file used by the tag.

The end

In the end I would like to tell you that you can use whichever style you like to however external styling is better for a cleaner code and off course you can create one style sheet which you can use on multiple HTML pages. Inline style is wisely used when you have to target a single element  for a different style than your external style sheet.

 

Note: Now be sure to practice and follow this blog for new ways to code or just #learnsomethingnew.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s