Learn how to use your browser's Inspection Tool to view the existing CSS styles and also to experiment with the styles in real-time.
Most modern web browsers have a function that allows you to see the underlying code of a page and also the CSS styles that are in place. You can use these features to view the styles used in your published HTML or HTML5 output and also to test out any changes you want to make without affecting the "live" version. Also, this cannot be seen by other users. The process is similar for the different browsers. In Google Chrome this feature is called Inspect and in Mozilla Firefox this feature is called Inspection
The various parts of the Chrome's Browser Inspection Tool are:
-
The Viewer shows your web page.
-
Elements tab shows the HTML of the page.
-
HTML of the page shows the hierarchical structure of the page. You will need to use this section to see the class names that are allocated to the various HTML5 elements. You may also need to see the hierarchy so that you can style elements only when they appear in a certain structure.
-
Styles tab shows a list of the styles that are currently in place for the selected element. You can change the styles here and the browser will show the effect of the changes. These changes are local to your browser and are not visible to other users.
-
Element selector to select part of a page. The Elements tab and Styles tab then show you the HTML elements and CSS styles for the area you selected.
Below, we provide a brief overview of Google Chrome's Inspection Tool. For this, we assume that you have already created a publication that contains content in topics.
-
Publish your publication using an HTML5 Help Center Layout, such as the built-in "HTML5 Help Center" Layout.
-
Use a web browser to open the index.html file in your published HTML5 output.
-
Browse to a page that you want to style differently.
-
Right-click on the page and select Inspect (or the equivalent option if you are not using Chrome).
-
Use the element selector (1) to select part of the article that you want to change (for example a heading).
The inspection tool highlights the code (2) for the part of the article that you have selected and it also shows you the styles that are in place (3).
-
You can make changes to the styles in the inspection tool to see how the changes will affect the article.
For example, you could change the heading color from black to dark orange.
-
Look at the Styles tab. It shows:
-
A row for each styling rule that is applied to the currently selected element. Each rule consists of:
-
Selector - This tells the browser which part of the HTML should use the style, for example, "h2, h3, h4, h5", tells the browser to apply the style to headings level 2 to headings level 5.
-
Property - The name of a styling property. Think of this as a styling category or feature, for example, margin. To learn more about CSS properties, see the CSS reference at www.w3schools.com.
-
Value - The style to apply to the content. For example, this could be an amount of spacing or a color.
Change the value of a rule. The Inspection Tool shows the effect of the change in real-time. Other users do not see the change and it is not saved. If you refresh your browser, the change is lost.
To add a new property and value, click on the line below an existing property and then start typing the name of the property you want to use. The browser will automatically suggest properties. Choose the property and then enter the value. The browser may suggest values for you or you can enter your own value.
-
-
The source of the CSS file that provides that rule. Your HTML can be styled by multiple CSS files.
-
-
If you like the change, write a new rule in your CSS file. You need to include the correct selector in full, as well as the property and value, for example:
h2 { color:##DC143C; font-size: 40px; }
-
Repeat these steps until you have created a CSS file with the styles that you want to use.
We have only shown you how to style the HTML elements that already have an ID or class name (defined by Paligo). You can also Add your Own Class Names, which is useful if you want to:
-
Style elements that do not currently have a class name or ID
-
Style some, but not all, elements of a certain type. For example, if you want to style the first paragraph in each topic, but not any of the other paragraphs.
-
-
Save your file with a
.css
file name extension. -
Publish your content using the HTML/HTML5 Layout.
Tip
For a more detailed look at editing the styles, see the Branding HTML Tutorial.
Comments
0 comments
Article is closed for comments.