Zaluke
Platform Insights Analyst
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Introduction:
This is the fourth part in my CSS Styling tutorials, in which I will be covering Borders.
Order:
Borders around elements come between the elements margin and padding. So, if the element has padding, the border will be away from the element whereas if the element only has margin, the border will be next the element but away from other elements.
Basic Structure:
The basic border attribute takes three arguments; Width, Type, Colour. The below code would give a solid white border that is 5 pixels width...
Or this code would give a dashed black border of 3 pixels width...
There is also;
dotted
double
groove
ridge
inset
outset
Setting Sides:
Just like margin and padding, you can set individual sides of borders...
Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...
... to the attributes of that element if you chose a class, or...
if you chose an id.
Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...
if you chose a class, or...
(You can remove the line beginning with // if you wish).
Here's an example...
Book traversal links for Borders
This is the fourth part in my CSS Styling tutorials, in which I will be covering Borders.
Order:
Borders around elements come between the elements margin and padding. So, if the element has padding, the border will be away from the element whereas if the element only has margin, the border will be next the element but away from other elements.
Basic Structure:
The basic border attribute takes three arguments; Width, Type, Colour. The below code would give a solid white border that is 5 pixels width...
- border
:
5px
solid
#ffffff
;
Or this code would give a dashed black border of 3 pixels width...
- border
:
3px
dashed
#000000
;
There is also;
dotted
double
groove
ridge
inset
outset
Setting Sides:
Just like margin and padding, you can set individual sides of borders...
- border-right
:
3px
dashed
#000000
;
- border-left
:
1px
dotted
#ffffff
;
- border-top
:
3px
solid
#000000
;
- border-bottom
:
13px
inset
#ffffff
;
- </cs>
- <strong>
Individual Settings:
</strong>
- You can also set the properties individually...
- <css>
- border-style
:
solid
;
- border-width
:
5px
;
//or medium
etc.
- border-color
:
#000000
;
Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...
- class=
'myClass'
... to the attributes of that element if you chose a class, or...
- id=
'myID'
if you chose an id.
Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...
- .myClass
{
- //Properties go here
- }
if you chose a class, or...
- #myID
{
- //Properties go here
- }
(You can remove the line beginning with // if you wish).
Here's an example...
- <html>
- <head>
- <style>
- .strong
{
- background-color
:
#000
;
- color
:
#fff
;
- width
:
300px
;
- height
:
100px
;
- border
:
10px
solid
#000
;
- // Thick black
border
of 10
pixels
- }
- .thin
{
- background-color
:
#000
;
- color
:
#fff
;
- width
:
300px
;
- height
:
100px
;
- border
:
2px
solid
green
;
- // Thin green
border
of 2
pixels
- }
- </style>
- </head>
- <body>
- <div class=
'strong'
>
Strong/Thick Border</div>
- <div class=
'thin'
>
Weak/Thin Border</div>
- </body>
- </html>
Book traversal links for Borders
- ‹ Border Radius
- Up
- CSS @keyframes Rule ›