How to add a stroke to text in css
Hardeepcoder
11 views
9 slides
Sep 22, 2022
Slide 1 of 9
1
2
3
4
5
6
7
8
9
About This Presentation
First of all, create a HTML file inside your favorite code editor, here I am using vsCode.
Create a stylesheet file and put body background color as you want, here i am using black for body’s background Color. Link your stylesheet(css file) with your html file.
Slide Content
First of all, create a HTML file inside your favorite code editor,
here I am usingvsCode.
Create a stylesheet file and put body background color as you want, here i am using black for
body’s background Color.
here I am usingvsCode.
Create a stylesheet file and put body background color as you want, here i am using black for
body’s background Color.
Link your stylesheet(css file) with your html file.
Now add html p tag with b tag (for text) inside html code.
Now add html p tag with b tag (for text) inside html code.
It’s time to make p tag more stylish & colorful. (Color should be light because we have
dark background for body)
p{
font-size:5rem;
color:white;
font-family:arial;
margin: 10%;
text-align: center;
}
dark background for body)
p{
font-size:5rem;
color:white;
font-family:arial;
margin: 10%;
text-align: center;
}
Here is your p tag after makeup
Now we will target ourbtag and will apply text fillcolor.
b{
/* The term 'webkit' is used in the CSS syntax for rendering content
in Safari & Chrome browsers.
Webkit code may need to be added in CSS to ensure it renders
correctly on Chrome and Safari due to the lack of cross-compatibility
*/
-webkit-text-fill-color:yellow;
/* Text-Fill-color works same as color of text */
b{
/* The term 'webkit' is used in the CSS syntax for rendering content
in Safari & Chrome browsers.
Webkit code may need to be added in CSS to ensure it renders
correctly on Chrome and Safari due to the lack of cross-compatibility
*/
-webkit-text-fill-color:yellow;
/* Text-Fill-color works same as color of text */
Now we will add stroke color which will show outside of text like border, we are using yellow for
text fill color and for stroke we are using red.
-webkit-text-stroke-color:red;
/* it will show the border for text,
without width we cannot see the border so we need to add stroke
width too */
text fill color and for stroke we are using red.
-webkit-text-stroke-color:red;
/* it will show the border for text,
without width we cannot see the border so we need to add stroke
width too */
Nothing changed even after applying stroke color, (but
without width we cannot see the border so we need to
add stroke width too).
Now we will add width to stroke so we can see our stroke color too.
-webkit-text-stroke-width: 5px;
/* you can use px or rem for stroke width and you can change
amount as you want
-webkit-text-stroke-width: 0.5rem; */
without width we cannot see the border so we need to
add stroke width too).
Now we will add width to stroke so we can see our stroke color too.
-webkit-text-stroke-width: 5px;
/* you can use px or rem for stroke width and you can change
amount as you want
-webkit-text-stroke-width: 0.5rem; */
Final CompleteHTMLcode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Stroke</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Here is <b>Stroke</b></p>
</body>
</html>
Final CompleteCSSCode
body{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Stroke</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Here is <b>Stroke</b></p>
</body>
</html>
Final CompleteCSSCode
body{
background-color: #000;
}
p{
font-size:5rem;
color:white;
font-family:arial;
margin: 10%;
text-align: center;
}
b{
/*The term 'webkit' is used in the CSS syntax for rendering
content in Safari and Chrome browsers. Webkit code may need to be
added in CSS to ensure it renders correctly on Chrome and Safari due
to the lack of cross-compatibility */
-webkit-text-fill-color:yellow;
/* Text-Fill-color works same as color of text */
-webkit-text-stroke-color:red;
/* it will show the border for text, without width we cant see
the border so we need to add stroke width too */
-webkit-text-stroke-width: 5px;
/* you can use px or rem for stroke width and you can change
amount as you want
-webkit-text-stroke-width: 0.5rem;
*/
}
}
p{
font-size:5rem;
color:white;
font-family:arial;
margin: 10%;
text-align: center;
}
b{
/*The term 'webkit' is used in the CSS syntax for rendering
content in Safari and Chrome browsers. Webkit code may need to be
added in CSS to ensure it renders correctly on Chrome and Safari due
to the lack of cross-compatibility */
-webkit-text-fill-color:yellow;
/* Text-Fill-color works same as color of text */
-webkit-text-stroke-color:red;
/* it will show the border for text, without width we cant see
the border so we need to add stroke width too */
-webkit-text-stroke-width: 5px;
/* you can use px or rem for stroke width and you can change
amount as you want
-webkit-text-stroke-width: 0.5rem;
*/
}
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 11
- Slides 9
- Age 1167 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views