HTML CSS

HTML Tutorial - HTML CSS

Cascading Style Sheets (CSS) is a style sheet that is used to bring in different effects on the text of webpages.

Cascading Style Sheets (CSS) is applicable to nearly all the HTML Tags. It is usually specified in name and value pair, seperated by colon(:).

Following are the ways we can apply CSS to HTML Tags.

Inline - Using attribute "style" within the HTML Tag.
Internal - Using HTML Tag <style> within the <head> Tag.
External - Using CSS file. Linked by using <link> tag.

Inline CSS

To apply CSS to a individual HTML Tag, we can use the "style" attribute. This technique of using the CSS is called the Inline method.

HTML CSS Example - Change Color

To change the font color in any HTML tag, using the "style" attribute.

Source:	Result:
<!DOCTYPE html> <html> <body> <p style="color:blue;">Applying CSS Style Sheet </p> <div style="color:green;">CSS Style on div Tag </div> </body> </html>

HTML CSS Example - Change Font and Size

Using the "style" attribute to change the Font and Size.

Source:	Result:
<!DOCTYPE html> <html> <body> <h1 style="font-family:arial;">Heading Text</h1> <p style="font-family:verdana;font-size:24px;"> paragraph text</p> </body> </html>

HTML with Internal CSS

Using the <style> Tag to apply CSS targeted to few or all the HTML Tags in the webpage.

Source:	Result:
<!DOCTYPE html> <html> <head> <style type="text/css"> h1{color:Maroon;} p{color:Blue;} </style> </head> <body> <h1>Heading Text</h1> <p>Paragraph Text</p> </body> </html>

HTML with External CSS

Applying CSS using the External file, is most widely used rather than applying it to each HTML Tag. By using an External file, it is easy to change the CSS and apply to all the webpages in a website.

<link> tag is used to link to an external file style sheet.

Example:

« Previous Chapter

Next Chapter »