Cascading Style Sheet: Focus on the Inline Style

Updated on May 22, 2019
Msmillar profile image

Ms. Millar has been an online writer for over eight years. She is well versed in website development with several websites she has created.

Inline Styles

With the various methods of adding styles to your web document knowing the details of each method can be confusing.

Here we will go over the inline style of using CSS. We'll also create a document, style it and view it as a web page.

When To Use It

The inline style method is reserved for small, isolated, styling of text. Inline styling would not be employed to style a page of text. For a full page you would employ the internal style sheet or an external for multiple pages. Them, if you want to alter one word or attribute on that page, you would enter the change with an inline style at the item you wish to change.

We will create two documents. The first document we create will be a plain text HTML5 document that can be observed on a web browser page. Next, we will place an inline element in the documents and view it.

The second document we create we will write in the document an internal style and also, an inline style. You will observe how the hierarchy of styles work in this document.

If you have been following the other CSS articles and already have done the following exercise you can follow along for practice or skip down to inserting the inline elements.

Let's get started with the plain text document!

  1. Open a blank page in notepad or wordpad (Any document writer will work).
  2. Copy the code I created below into your page...

Plain HTML5

<!doctype html>
<html>
<body>

<h1>Plain Text Web Document!</h1>

<p>This is an HTML5 document, or page, which is plain as can be. Boring, dull, words. Let's change all that!</p>

</body>
</html>

Save Your HTML Document

Now save it as an HTML document by clicking File -->Save As-->in the pop up window change the file type to ALL FILES-->Name your document and save it with .html . Example: mycss.html or myblankcode.html . Make not of where you saved it.

Locate the document you just saved and double click on it so it will open in your browser. It should appear like the image below...

Plain HTML
Plain HTML | Source

Inserting The Inline Elements

Now, let's add some inline elements to make this document stand out! And outstanding!

The code in the box below the quiz looks very much like what you've already written in you notepad document, but is it? Look closely at the code to see if anything has changed.

What You Know

view quiz statistics

Again, copy the below exactly into your notepad document, save it as an .html .

Inline Style Added Code

<!doctype html>
<html>
<body>

<h1 style="color:orange;text-align:center;">Inline Styled Web Document!</h1>

<p>This is an HTML5 document, or page, in which you have entered and inline style.  You have told the browser, "I want this h1 line to be colored orange and it obeys your command!</p>

</body>
</html>

Display It!

Locate the file you just saved to your computer and double click on it. Below is what you should see on your browser.

HTML5 Styled With Inline Code

Document styled with inline code.
Document styled with inline code. | Source

Further Work With Inline CSS

Let's take this inline work a little further. What if you have an internal (or external) CSS code on this document, but you decide the you would like the background to be orange instead of the h1 element orange, but the h1 will still be centered.

How do you write the code so an inline style will override an internal (or external) code while leaving the rest of the article as written by the other code?

Copy the code below into your notepad document, save it as .html . Locate it on your computer and open it.

<!doctype html>
<html>

<head>
<style>
body {background-color: orange;}
</style>
</head>

<body>

<h1 style="text-align:center;">Inline Styled Web Document!</h1>

<p>This is an HTML5 document, or page, in which you have entered and inline style.  You have told the browser, "I want this h1 line to be colored orange and it obeys your command!</p>

</body>
</html>

Inline And Internal Styles Working Together!

Inline style sheet working with an internal style sheet and an inline style code.
Inline style sheet working with an internal style sheet and an inline style code. | Source

Everything In Order

Now that is an eye catching, exciting, webpage! And the two styles work together perfectly!

When using two CSS code styles in one document the inline style must be written after the internal style code. Otherwise the inline element will not work

What Do You Know?

view quiz statistics

Questions & Answers

    Comments

    Submit a Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, owlcation.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://owlcation.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)