Lesson 2: The Inline Style

❮ Previous Lesson Next Lesson ❯

In lesson 1, we have learned about the concepts of CSS and its basic structure. In this lesson, we shall learn how to incorporate CSS in a webpage.

inline style, embedded style sheet and external style sheet. In this lesson, we shall examine only the inline style method first. We shall explore other ways in coming lessons.

Inline style means that we apply CSS styles to individual elements in an HTML document, it will only change the style of the parts of the document specified by those elements.

The syntax to apply inline CSS is by using the attribute style as shown below:

style=" property1:value1; property1:value2;..."

Example

<h1> style="font-family: Arial; color:blue; font-size: 14px"</h1>

Example 2.1

<!Doctype html>

<html>

<head>

<title> Inline CSS Style</title>

</head>

<body style="background-color: #ffffcc;">

<h1 style="font-family: verdana; color: blue; font-size: 18px"> Inline CSS Style</h1>

<h2 style="font-family: arial; color: red; font-weight: bold; font-size: 18px">What is CSS</h2>

<p style="font-family:  "Times New Roman", Times, serif;">

What is Cascading Style Sheet (CSS)? HTML was the earliest mark-up language for the world wide web that presents text and multimedia contents to the Internet users, a mark improvement on the earlier text-only navigators or data distribution systems such as Gopher, FTP and WAIS.</p>

<h3 style="font-family: Comic Sans MS, cursive, sans-serif;font-size:16px; text-decoration: underline; color: #cc00ff">HTML vs CSS</h3>

< p style=” font-family: Courier New, Courier, monospace ; color: rgb(153,0,76)”> HTML has now evolved into more recent and more powerful HTML5 and CSS(Cascading Style Sheet). CSS has made formatting and presenting web documents easier and more systematic. CSS is a W3C technology that allows webmaster to specify the presentation of elements on a webpage separately from the structure of the documents. The separation of structure from presentation makes creation and maintenance of web pages easier. Instead of formatting a website page by page, CSS allows web developers to create a style for all the pages using an external CSS file. Besides, you can create a unique style for an individual page or a section of a page.</p>

</body>

</html>

The Output

Inline CSS Style

What is CSS

What is Cascading Style Sheet (CSS)? HTML was the earliest mark-up language for the world wide web that presents text and multimedia contents to the Internet users, a mark improvement on the earlier text-only navigators or data distribution systems such as Gopher, FTP and WAIS.

HTML vs CSS

HTML has now evolved into more recent and more powerful HTML5 and CSS(Cascading Style Sheet). CSS has made formatting and presenting web documents easier and more systematic. CSS is a W3C technology that allows the webmaster to specify the presentation of elements on a webpage separately from the structure of the documents. The separation of structure from presentation makes creation and maintenance of web pages easier. Instead of formatting a website page by page, CSS allows web developers to create a style for all the pages using an external CSS file. Besides, you can create a unique style for an individual page or a section of a page.

❮ Previous Lesson Next Lesson ❯