CSS Outline

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

CSS Outline

Post by Admin on Wed Oct 11, 2017 12:56 pm

CSS Outline

The CSS outline properties specify the style, color, and width of an outline.

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".



Outline Style

The outline-style property specifies the style of the outline.

The outline-style property can have one of the following values:

   dotted - Defines a dotted outline
   dashed - Defines a dashed outline
   solid - Defines a solid outline
   double - Defines a double outline
   groove - Defines a 3D grooved outline. The effect depends on the outline-color value
   ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
   inset - Defines a 3D inset outline. The effect depends on the outline-color value
   outset - Defines a 3D outset outline. The effect depends on the outline-color value
   none - Defines no outline
   hidden - Defines a hidden outline

The following example first sets a thin black border around each <p> element, then it shows the different outline-style values:

Example
p {
   border: 1px solid black;
   outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}



For any clarifications you can leave your comment below. Laughing

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Outline

Post by jennielym on Wed Oct 11, 2017 8:59 pm


Is there any outline or any kind of programming material aside from CSS?

jennielym
Newbie
Newbie

Posts : 2
Join date : 2017-10-11

View user profile

Back to top Go down

Re: CSS Outline

Post by Admin on Thu Oct 12, 2017 2:56 pm

jennielym wrote:
Is there any outline or any kind of programming material aside from CSS?

Yes dear, aside from CSS you can also use a JavaScript to your HTML document. Very Happy

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Outline

Post by JasonOmeter on Fri Oct 13, 2017 8:25 pm

is their have a shorthand property for Outline Ma'am like Border?
what is the order?
can u give example maam please ?
tnx Smile

JasonOmeter
Master
Master

Posts : 7
Join date : 2017-10-13

View user profile

Back to top Go down

Re: CSS Outline

Post by Athena on Fri Oct 13, 2017 8:31 pm

Are those the only values allowed for the Outline Property? or it can still read other values which i wanted the outline to look like?

Athena
Newbie
Newbie

Posts : 2
Join date : 2017-10-13

View user profile

Back to top Go down

Re: CSS Outline

Post by Admin on Fri Oct 13, 2017 8:34 pm

Athena wrote:Are those the only values allowed for the Outline Property? or it can still read other values which i wanted the outline to look like?

What values you should want to use? Can you give me an example?

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Outline

Post by Admin on Fri Oct 13, 2017 8:40 pm

JasonOmeter wrote:is their have a shorthand property for Outline Ma'am like Border?
what is the order?
can u give example maam please ?
tnx Smile

Hello Jason. The outline property is a shorthand property for the following individual outline properties only. For example: outline-width, outline-style which is required to use and the outline-color. In order to use the shorthand property for border you should use the border-width, border-style and border-color.

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Outline

Post by JasonOmeter on Fri Oct 13, 2017 8:55 pm

Admin wrote:
JasonOmeter wrote:is their have a shorthand property for Outline Ma'am like Border?
what is the order?
can u give example maam please ?
tnx Smile

Hello Jason. The outline property is a shorthand property for the following individual outline properties only. For example: outline-width, outline-style which is required to use and the outline-color. In order to use the shorthand property for border you should use the border-width, border-style and border-color.


ahhhh,, uhmmm why this codes for outline doesn't work maam?
{outline-bottom: 1px solid black}

not just like
{border-bottom: 1px solid black}
is working....

JasonOmeter
Master
Master

Posts : 7
Join date : 2017-10-13

View user profile

Back to top Go down

Re: CSS Outline

Post by Admin on Fri Oct 13, 2017 9:21 pm

JasonOmeter wrote:
Admin wrote:
JasonOmeter wrote:is their have a shorthand property for Outline Ma'am like Border?
what is the order?
can u give example maam please ?
tnx Smile

Hello Jason. The outline property is a shorthand property for the following individual outline properties only. For example: outline-width, outline-style which is required to use and the outline-color. In order to use the shorthand property for border you should use the border-width, border-style and border-color.


ahhhh,, uhmmm why this codes for outline doesn't work maam?
{outline-bottom: 1px solid black}

not just like
{border-bottom: 1px solid black}
is working....

Because the border-style property can have from one to four values, the top border, right border, bottom border, and the left border while an outline is a line that is drawn around elements outside the borders to make the element "stand out".

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Outline

Post by Athena on Sat Oct 14, 2017 11:33 am

Can a value like asterisk be appliead? i mean it can also be a design for outline right? but can it be read as value?

Athena
Newbie
Newbie

Posts : 2
Join date : 2017-10-13

View user profile

Back to top Go down

Re: CSS Outline

Post by JasonOmeter on Sat Oct 14, 2017 12:46 pm

Good Afternoon M'am Kayla,
does the outline have a property of outline radius?

JasonOmeter
Master
Master

Posts : 7
Join date : 2017-10-13

View user profile

Back to top Go down

Re: CSS Outline

Post by Admin on Sat Oct 14, 2017 1:32 pm

Athena wrote:Can a value like asterisk be appliead? i mean it can also be a design for outline right? but can it be read as value?

Accoring to my research, * (asterisk) is a CSS selector. The * selector selects all elements and can also select all elements inside another element.

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Outline

Post by Admin on Sat Oct 14, 2017 1:39 pm

JasonOmeter wrote:Good Afternoon M'am Kayla,
does the outline have a property of outline radius?

As far as I know outline don't have a radius property but I guess you should try the border-radius property. With the border-radius property, you can give any element "rounded corners".

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Outline

Post by EzequielGo on Sat Oct 14, 2017 2:01 pm

What is the difference between css outline and css border?

EzequielGo
Master
Master

Posts : 13
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Outline

Post by SarahMae on Sat Oct 14, 2017 2:12 pm

Since you knew about CSS. I have a question why is it the css text shadow property does not work on my web?

SarahMae
Master
Master

Posts : 9
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Outline

Post by Admin on Sat Oct 14, 2017 2:31 pm

EzequielGo wrote:What is the difference between css outline and css border?

The CSS border properties allow you to specify the style and color of an element's border while an outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Outline

Post by Admin on Sat Oct 14, 2017 2:33 pm

SarahMae wrote:Since you knew about CSS. I have a question why is it the css text shadow property does not work on my web?

What is your code in CSS text-shadow?

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Outline

Post by joshuaB on Sat Oct 14, 2017 3:00 pm

Difference between CSS outline and border. aside from CSs outline is drawn around outside the borders..

joshuaB
Newbie
Newbie

Posts : 1
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Outline

Post by Admin on Sat Oct 14, 2017 4:10 pm

joshuaB wrote:Difference between CSS outline and border. aside from CSs outline is drawn around outside the borders..

In addition to some other answers... here are a few more differences I can think of:

First, border supports rounded corners with the border-radius property and outline doesn't
Second, border has properties to style each side with border-top:, border-left: etc. outline can't do this. There's no outline-top: etc.
Lastly, outline supports offset with the property outline-offset while border doesn't.

I hope this can help's you Smile

Admin
Admin

Posts : 28
Join date : 2017-09-15

View user profile http://kaylajem.forumotion.asia

Back to top Go down

Re: CSS Outline

Post by SarahMae on Sat Oct 14, 2017 4:18 pm

Admin wrote:
SarahMae wrote:Since you knew about CSS. I have a question why is it the css text shadow property does not work on my web?

What is your code in CSS text-shadow?

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px 2px lightgreen;
}
</style>
</head>
<body>

<h1>Sarah Mae</h1>

</body>
</html>

SarahMae
Master
Master

Posts : 9
Join date : 2017-10-14

View user profile

Back to top Go down

Re: CSS Outline

Post by Sponsored content


Sponsored content


Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum