Inline and Internal CSS

Cascading style sheets (CSS) allows you to add style elements to an HTML script. CSS styling can be incorporated in one of three ways. Inline incorporation of CSS style elements lets you add styling elements to a single line while internal incorporation is included at the top of the HTML document, enclosed in the head tag. Internal CSS may be a better option when you wish to include many style items as including these on the lines they pertain to will clutter the HTML script.

The final way to incorporate CSS is to create a separate file with all CSS elements and link it to the associated HTML file. This is called external CSS. In this post, I will highlight the first two types of CSS style elements.

In the above HTML script, there are 3 inline CSS tags and 3 internal CSS tags. The inline tags were added to the paragraph using a div tag in order to isolate certain sections of text to apply each style element to. The tags are added after the opening div tag, and indicate a color, font-family, and font-size for a section of text. The internal tags are located between the head tag at the top of the document and include background color, alignment of text, and border style for different sections of the page. Notably, the internal tags do not require quotation marks like the inline tags, but do require the additional use of curly brackets.

The script appears as so when viewed in a browser:

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.