How to add styles to your web pages.

Lesson 5: Style Attributes 


How to add styles to your web pages.

Majorly, CSS (refer to introduction to web design) handles the styling of html pages.  To add attributes (refer to lesson 2) such as colors, height and width, font style, etc


 We will discuss more about styling your element in web pages when we get to CCS. Style is a global attribute I.e it can be used with any tag, be it h-tags, p-tags, div-tags etc

You can add styles to both block and inline elements.

Adding style to a block element 

Example:

<html> <body> <div style="color: green;"> <h3> Block style</h3> This is to show how a block style works<br /> </div> </body> </html> Result:


Note that the two elements in the block have the same attribute value which is green. In block styling, all the elements inside the block is affected.


Adding styles to single element. 

Example

<html> <body> <h3 style="color: green;"> Single Element Style</h3> This is to show how a block style works<br /> </body> </html>Result:

Note: only one element is colored while the other one does not reflect the green color attribute.

Adding style to an inline element 

<html> <body> <h3> Inline element style</h3> This is to show how a inline element <span style="color: green;"> style </span> works<br /> </body> </html> Result:


As you can see here only one word of the elements reflect the color attribute.
You can make more than just one word colored and you can add different colors to different words.


Let's have some fun

Multiple words in inline element style

<html> <body> <h3> Inline element style</h3> This is to show how an inline <span style="color: green;"> element style works</span> works<br /> </body> </html> Results:


For different colors for multiple words

<html> <body> <h3> Inline element style</h3> This is to show<span style="color: blue;"> how </span> <span style="color: grey;"> an</span> <span style="color: yellow;"> inline</span> <span style="color: red;">element </span> <span style="color: green;"> style </span> works<br /> </body> </html> Result:

No comments:

Post a Comment

Contact Form

Name

Email *

Message *

Follow by Email

Popular Posts