- Header font style
- What is the commonly used Header font in technical documentation?
- How to change the Header font style in Document360?
- Using Custom CSS
- font-style
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- How to style a header using CSS?
- CSS properties to style header
- Example: Style header using CSS
- Output
- Example: Style header using CSS
- Conclusion
Header font style
Header fonts are an important part of any online content, as they lead the reader with the introduction and set the tone for the rest of the content. Document360 allows users to customize their header font style using CSS Snippets. To do this, open Settings > Knowledge base site > Custom CSS and JavaScript, click on Custom CSS tab and select Heading tag font style from the Snippets window. Save it and view your changes by hovering over View site at top right.
Header fonts are the captain of the main content as it leads the reader with the introduction for the main content. They are usually large and generally considered the higher-impact text in the content.
All these paramount things make choosing the right header font style more important when taking your content online.
The header fonts are usually the , , and tags that you mostly use for your titles and headings.
What is the commonly used Header font in technical documentation?
The most common Header font for technical documentation is Sans-serif. Document360 provides this font and the freedom to customize Header fonts according to your preference.
How to change the Header font style in Document360?
Using Custom CSS
- In the Knowledge base portal, click Settings → Knowledge base site → Custom CSS and JavaScript
- You can find the Custom CSS and Custom JavaScript tabs, click the Custom CSS tab → and click the Snippets button right underneath it
- A blade window opens on the right side, preloaded with seven basic snippets that you can use to customize your knowledge base site. Click the Heading tag font style ( The snippet will be added to your Custom CSS code block) → ctl+S to save it.
- Hover over to View site at the top right to view the changes
Red Hat Display is the default Header font style for all the tags. You can modify the custom font style and color in the header font style snippet, which applies to the entire knowledge base.
font-style
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.
Синтаксис
font-style: normal | italic | oblique | inherit
Значения
normal Обычное начертание текста. italic Курсивное начертание. oblique Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-style
Объектная модель
[window.]document.getElementById(» elementID «).style.fontStyleБраузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Браузеры текст со значением oblique всегда отображают как курсив ( italic ).
How to style a header using CSS?
The headers are the first thing that the viewers see when visiting a website. So, styling the header is very important in web designing. We can style the header using CSS properties.
CSS properties to style header
To customize the header elements using the CSS properties, we can change the font size of header text using font-size property, change the background color of the header container using background-color property, set the width and height of the header container, add padding between the header components and so on.
Example: Style header using CSS
In this program, we have used various CSS properties to style the header.
.header < width: 100%; height: 200px; background-color: teal; text-align: center; >h1 Styling the header
Here we have used list of properties to style header
Output
Here is the output of the above program.
Example: Style header using CSS
We can customize the header in various ways using CSS properties. In the example given below, we are going to add background-image to the header element. We have also added the opacity to the header text.
Conclusion
In this tutorial, we have learned to style the headers using CSS properties. The most common properties used to style headers are back-ground color , font-size , text-align , padding , margin , etc. You can practice your own to make the header more customize using CSS.