Introduction to CSS Inline Style
Cascading Style Sheet or CSS is a style sheet language, which defines how an HTML page should be presented. It basically styles the presentation of a particular piece of markup language code. There are three ways to include CSS in any HTML code, which are, External, Internal and Inline. While we call the externally defined style sheet in our page in the External method, we define the style within <style /> in the same HTML code in the Internal method. It uses style attributes for styling elements. Internal CSS is included in the same HTML page, as it is used for styling the elements being used in the code.
How does CSS Inline Style Work?
In Inline style CSS, we style a particular element of the HTML code. In the case of Inline Style CSS, ‘style ‘is treated as an attribute of any particular element, which has various properties and is used for the unique styling of any HTML element. We will demonstrate the use of inline CSS through some examples:
1. Using Inline CSS for Styling a Single Element
- Code for a basic HTML page
- Include HTML, head, body tags in accordance with the structure.
- Within <body> tag, define a paragraph tag <p> and use style attribute to style the paragraph. This can be done like:
<p style="color:blue; font-size:50px; font-style: italic;">This is test for Inline CSS</p>
HTML Code:
<html>
<head>
<title>Inline CSS</title>
<h1>Demonstration Of CSS Inline Style</h1>
</head>
<body>
<p style="color:blue; font-size:50px; font-style: italic;">This is test for Inline CSS</p>
</body>
</html>
Output:
2. Using Inline CSS for Multiple Elements
- Similar to example 1, we will create an HTML page with basic HTML tags.
- Within body, we first define heading tag, i.e. <h1>. We style the <h1> tag using various properties like text-decoration, text-decoration-style, color, font-weight.
<h1 style="text-decoration: underline;text-decoration-style:double; color: crimson; font-weight: 400px;">Inline Styling for multiple elements</h1>
- Next, we style the paragraph tag i.e. <p>, where we define the color, font-size, and font-style.
<p style="color:red; font-size:30px; font-style: italic;">This is test for Inline CSS</p>
HTML Code:
<html>
<head>
<title>Inline CSS</title>
<h1>Demonstration Of CSS Inline Style</h1>
</head>
<body>
<h1 style="text-decoration: underline;text-decoration-style:double; color: crimson; font-weight: 400px;">Inline Styling for multiple elements</h1>
<p style="color:red; font-size:30px; font-style: italic;">This is test for Inline CSS</p>
</body>
</html>
Output:
3. Using Inline Style CSS for Styling a list in HTML
- In this example, we will style an unordered list and customize each list item for a better understanding of the inline style in CSS.
- Once we have created a basic structure for an HTML page, we will create a list within the body. Since it is an unordered list, we will use the tag <ul>. By default, each list item in an unordered list appears as a round bullet point. We will style this to be square bullet point:
<ul style="list-style:square;">
- Now, we will customize each list item, i.e. <li> tag. Please note, when trying the code, more properties can be added to each element for trying out different styles.
<li style="color:blue; font-style: italic;">Styling first list item</li>
<li style="color: purple; font-size: 25px;">Styling second list item</li>
<li style="color: green; font-weight: 400px;">Styling third list item</li>
HTML Code:
<html>
<head>
<title>Inline CSS</title>
<h1>Demonstration Of CSS Inline Style</h1>
</head>
<body>
<h1 style="text-decoration: underline;text-decoration-style:double; color: crimson; font-weight: 400px;">Inline Styling for multiple elements</h1>
<h2 style="background: royalblue; color: white; font-size: 40 px; margin: 100px; text-align:center;">Using Inline Style CSS in a list</h2>
<ul style="list-style:square;">
<li style="color:blue; font-style: italic;">Styling first list item</li>
<li style="color: purple; font-size: 25px;">Styling second list item</li>
<li style="color: green; font-weight: 400px;">Styling third list item</li>
</ul>
</body>
</html>
Output:
4. Using Inline Style CSS for Styling an Image
- We can set various properties for an image, using inline style CSS.
- In this example, we will be setting a border for the image. There are many more properties that can be explored while practicing.
- After writing the basic elements of the HTML page, we will style<img> and use additional attributes to size the image according to our requirement.
<img style=" border: 5px solid royalblue; padding: 5px;" src="image.jpeg" height="425px" width="600px">
HTML Code:
<html>
<head>
<title>Inline CSS</title>
<h1>Demonstration Of CSS Inline Style</h1>
</head>
<body>
<h1 style="text-decoration: underline;text-decoration-style:double; color: crimson; font-weight: 400px;">Inline Styling for multiple elements</h1>
<h2 style="background: royalblue; color: white; font-size: 40 px; margin: 10px; text-align:center;">Using Inline Style CSS for an image</h2>
<img style=" border: 5px solid royalblue; padding: 5px;" src="image.jpeg" height="425px" width="600px">
</body>
</html>
Output:
So, in this article, there were various examples discussed, which show, how inline style CSS can be worked into one’s HTML project. However, if the project is a high level and requires strict styling, it is recommended that one must use an external style sheet. That not only eases the work but also structures the project appropriately. Inline CSS can be used if the project is small and very few elements, which are not dynamic in nature, require styling. Inline style CSS is a local level change which is limited to that element of that HTML page only. For defining styles on a global level, using External style sheets will be a better idea.
Recommended Articles
This is a guide to CSS Inline Style. Here we discuss the introduction and how does CSS inline style works along with the examples and code implementation. You may also look at the following articles to learn more –
- Top 5 Features of CSS3
- Different Types of CSS Pagination
- Types of CSS Selectors
- CSS Font Properties
- Working Principle of text-align in CSS
- How to Work CSS Triangle Generator?
- Complete Guide to HTML Inline-Style
- Examples and Working of CSS Position
- Implement CSS Text Underline
- Guide to CSS Margin Color
