Cascading Style Sheets or CSS is a style language that defines the layout of HTML documents. For example, CSS covers fonts, colors, margins, lines, height, width, background images, advanced positions and many other things. CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today. In this section will see how CSS works with the of an example. You can connect your CSS with HTML in three ways,

  • External style sheet (In header pointing to your CSS file)
  • Internal style sheet (In header with your CSS code)
  • Inline style (In HTML tag)

Here we are taking an example of the Internal style sheet.

Code :

<!DOCTYPE html>
<html>
<head>
<style>
.test{
height: 200px;
width: 50%;
background-color: powderblue;
border: 5px solid red;
}
</style>
</head>
<body>

<div class=”test”></div>

</body>
</html>

Output :

Here we can see that without touching the HTML code I can able change the style property of the “div”. CSS contains many properties related to style, you can reffer them from  W3schools .

 

Categories: UXUX Terms