Introduction to CSS Text Outline
Text outline in CSS is also called as text-stroke. Such as text-shadow in CSS, this can also be used in the text content to highlight some important parts or make it look different than the regular text, to attract the attention of the audience of the respective page. This is a property that is under experiment and is only supported by the browsers that extend support to ‘WebKit’. Hence, the syntax also uses the prefix of WebKit when being used in the code. (-webkit-text-stroke).
Syntax of Text-stroke in CSS
Text-stroke can be used as internal CSS or inline CSS, or External CSS. The syntax for text-stroke is:
Syntax:
-webkit-text-stroke: length | colorHere, the parameter length defines the width of the stroke, while the color defines the color of the outline. As explained before, this is an experimental property that is supported by browsers that have WebKit support. Also, while including in the CSS code, this property is prefixed with the keyword ‘WebKit’ for the same purpose.
Syntax:
-webkit-text-stroke: initialText-stroke is a shorthand property for two distinct properties, which are text-stroke-width and text-stroke-color. A shorthand property in CSS can be defined as that property that allows the user to set values for multiple properties through a single property. which is a global value, the width will default as 0, and there will be no color or the current color. The above mentioned is a global value; the width will default as 0, and there will be no color or the current color.
How Does Text Outline Work in CSS?
Let us look at some basic examples to get a bigger picture of the feature:
Example #1
Achieving text-outline through text stroke width and color property.
- For this example, we will use external CSS. So primarily, we will create a .css file. This file will have all the styles defined that we are looking forward to using in our pages.
- Once the .css file is created, we will define the paragraph tag’s styling, i.e. <p>. Since we are using the basic properties, we will define the values of both ‘text-stroke-width ‘ and ‘ text-stroke-color’ separately. The code should be like this:
p{
font-size: 30px;
color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blueviolet;
}We have also defined a class called outline, just to set values differently and use the class for any tag that is required.
.outline{
font-size: 20px;
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: red;
}Combining these two pieces of code, the final CSS file should look like this:
CSS Code:
p{
font-size: 30px;
color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blueviolet;
}
.outline{
font-size: 20px;
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: red;
}Now, we will create an HTML page with a basic structure. Since we are using an external style sheet, we will call it on the HTML page and define different tags accordingly to use the styling. The coding of the HTML page should be something as below:
HTML Code:
<html>
<head>
<title>Text-Shadow property</title>
<link rel = "stylesheet" href = "textProp2.css">
</head>
<body>
<p>Testing text outline properties</p>
<p class = "outline">testing text outline properties with the class 'outline'</p>
</body>Output:
Example #2
Using shorthand property text-stroke to achieve text-outline.
- Similar to the previous example, we will be using external CSS in this example too. We will create/modify the CSS file.
- Instead of using two separate properties to define the width and color of the text outline, we will be using the shorthand property ‘-webkit-text-stroke’ and define both properties as parameters.
- Firstly, we will write the styling for the heading tag, i.e. <h2>. The code should be:
h2{
font-size: 50px;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-webkit-text-stroke: 1px gold;
}Similar to the prior example, we can define an additional CSS class to be used with any tag which requires styling:
.outline{
font-size: 40px;
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-webkit-text-stroke: 1.5px blueviolet;
}The final CSS file should look like this:
CSS Code:
h2{
font-size: 30px;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-webkit-text-stroke: 1px gold;
}
.outline{
font-size: 30px;
color: white;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-webkit-text-stroke: 1.5px blueviolet;
}Finally, we will create an HTML page and call the external style sheet. We will make use of all the tags and classes that were styled in the .css file. The final HTML code should look like this:
HTML Code:
<html>
<head>
<title>Text-Shadow property</title>
<link rel = "stylesheet" href = "textProp2.css">
</head>
<body>
<h2>Testing text outline properties</h2>
<p class = "outline">testing text outline properties with the class 'outline'</p>
</body>Output:
Example #3
Text outlining using inline CSS.
- We are using inline CSS for this example, so there is no need to create a separate CSS file. We will create a new HTML page and style the elements using the style parameter.
- Create the HTML file and add the basic structural tags. Once done, identify the elements that you want to style using the text-stroke property. For this example, heading and paragraph tags will be styled with different text-strokes.
- We will style <h1> first. the styling should be done as below:
<h1 style="-webkit-text-stroke: 1.5px red; color: black; font-size: 50px;">HEADING OUTLINE USING INLINE</h1>We will style <p> first. the styling should be done as below:
<p style="-webkit-text-stroke: 1px blue; color:gold; font-size: 30px;">Outlining paragraph text using text-stroke property</p>The final HTML code should look like this:
HTML Code:
<html>
<head>
<title>Text-Outline in CSS</title>
</head>
<body>
<h1 style="-webkit-text-stroke: 1.5px red; color: black; font-size: 30px;">HEADING OUTLINE USING INLINE</h1>
<p style="-webkit-text-stroke: 1px blue; color:gold; font-size: 20px;">Outlining paragraph text using text-stroke property</p>
</body>
</html>Output:
Conclusion
That was some basic usage of the text-stroke feature. The option for experimenting around is always open to curious minds. However, the downside to this feature is that it is only supported in the webkit enabled browsers, for e.g. if we try opening these HTML files through internet explorer, the outline features of the text will be missing. This is because IE does not extend its support to the webkit. Hence, it is advisable to use the properties and features that do not have any such constraints or conditions.
Recommended Articles
This is a guide to CSS Text Outline. Here we discuss the Introduction and how Text Outline works in CSS and different examples and code implementation. You may also have a look at the following articles to learn more –
