DEV Community 👩‍💻👨‍💻

elinabey
elinabey

Posted on

CSS Inline Styles

CSS Inline Style. Cascading Style Sheet (CSS) is a style sheet language, that represents how an HTML page should be presented. It primarily styles the performance of a particular part of the markup language code. There are three methods to include CSS in any HTML code, which are, Internal, External, and Inline. While we call the externally described style sheet in our page in the External method, we represent the style within <style >  in the same HTML code in the Internal method. It does style attributes for styling elements. Internal CSS is held in the same HTML page, as it is used for styling the elements being used in the code.In my last post we discussed CSS Attribute Selectors

CSS Inline Style

There are two examples of Inline style single inline CSS and multiple inline CSS.

<!---CSS Inline Style for single Elements ---->
<h1 style="color:hotpink; font-size:50px; font-style: italic;">CSS Inline Style For Single Element</h1>
<!---CSS Inline Style for Mutiple Elements ---->
<h1 style="text-decoration: underline;color: hotpink;border:2px solid #eee; font-weight: 400px;">CSS Inline Style For Multiple Elements</h1>
Enter fullscreen mode Exit fullscreen mode

Note: In the above two examples, In the HTML example is separated with comments. we have utilized many assets on style attributes, such a font-weight, color, and border, etc. There are many other assets that can be looked upon. It will be a good idea to create a sample HTML page, and try as many style properties as possible, for the purpose of awareness and ease.

Inline CSS for an Image Element.

<img style=" border: 5px solid #eee; padding: 10px;" src="Image Source (URL)" height="300px" width="600px">
Enter fullscreen mode Exit fullscreen mode

So, in this article, there were several parts discussed, which explain, how CSS inline style can be performed into one's HTML Markup. However, if the Markup is a large level and needs severe styling, it is advised that one must use an external style sheet. That not only helps the performance but also structures the scheme properly.

I shared this post from CSS Inline Styles (https://softcodeon.com/css/css-inline-style.htm) you can read in detail from there.

If you have any question please discuss below help to improve. Thank you.

Top comments (0)

50 CLI Tools You Can't Live Without

>> Check out this classic DEV post <<