Marusya's School Notes

Detailed vs Shorthand

Getting into the habit of using the shorthand property might be somewhat confusing at first, but it really aids in shortening your code!

HTML file:	Displayed by browser:
<style> p.demo1 { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; } p.demo2 { border-style: dotted solid; } </style> <body> <p class="demo1">Demo1: The top and bottom sides are the dotted while the right and left sides are solid. The declaration to achieve this is done the long way.</p> <p class="demo2">Demo2: This paragraph uses the declaration, which is done with the shorthand property. As you can see, the exact same effect has been achieved.</p> </body>	Demo1: The top and bottom sides are the dotted while the right and left sides are solid. The declaration to achieve this is done the long way. Demo2: This paragraph uses the declaration, which is done with the shorthand property. As you can see, the exact same effect has been achieved.

HTML file:

Displayed by browser:

<body>
<p class="demo1">Demo1: The top and bottom sides are the dotted while the right and left sides are solid. The declaration to achieve this is done the long way.</p>
<p class="demo2">Demo2: This paragraph uses the declaration, which is done with the shorthand property. As you can see, the exact same effect has been achieved.</p>
</body>

Demo1: The top and bottom sides are the dotted while the right and left sides are solid. The declaration to achieve this is done the long way.

Demo2: This paragraph uses the declaration, which is done with the shorthand property. As you can see, the exact same effect has been achieved.

All paragraph elements have a 3px padding.