Having the rules in the page head area is fine for a single web page.
KOMPOZER 2017 CODE
Switching to the Source Code view, we see that these CSS Style rule definitions are located in the head area of our web page source code. Hdere below we can see our sample text with these additional styles applied. Now we can select our text and use the Style dropdown box to apply these new class styles that we have created. example the bookman font, a larger size and a different color. highlight a font-weight of bold, a new font color and a separate background color. We can call these classes anything we want, so we'll call these two. We'll set up a style for highlighted text and another for anything used as an example. This lets us make up any class name and define its style. We can add a custom style rule for a:hover that will let us set a special color for links while the cursor is hovering over them.Īdd a style applied to all elements of a class. We'll also set up Heading 2 (h2) to be the same except a bit smaller, 22px.Īpplying these formats here below we can see that the main page heading is set to Heading 1 format the subtitle is set to Heading 2, the body of the page is using the Body format, and the page background is set, all as defined in our style sheet. The size is 28px and Font weight is Bold so that all Heading 1 text will look like this. We will use a custom font family and select Comic Sans. This will set the properties for all text that receives the Heading 1 format.
On the Background tab in the Stylesheet, we will select a page background color.Ĭlicking on the style pallet at the top left in the CSS Stylesheets window will let us create a new style rule. Now all text in the web page body will have this font and size. We have selected the predefined Arial, Helvetica, sans-serif font and set the font size at 14px (pixels). Selecting the Text tab gives us access to all of the text formats available for the body of the web page. Once we have created the body rule, we will see body in the left hand column under internal stylesheet. We'll create a New Style rule for body (Body Text) We'll begin by setting up the Body Text and Heading 1 and Heading 2 fonts. Click on to open the CSS Stylesheets window in KompoZer. We could first put in some text and then set up the CSS rules to see how they look or first set up some CSS rules and then put in the text. We will use CSS rules instead of applying these on a case by case basis. We will plan to use a background color, heading and paragraph fonts, and special text fonts for language examples in all of the pages in the site. Since this will be the first or entry page in our site, we will use the file name "index.html". We will first make a new web page in KompoZer and save it in its folder. Note that although we are using KompoZer, the basic ideas are the same in any web design program.
KOMPOZER 2017 UPDATE
Finally, any change to our Style Sheet will instantly update the style across all of the pages in the site.
KOMPOZER 2017 HOW TO
We will see how to save that style and re-use it across other pages in a site. This lesson will walk you through the basic steps of setting up a web page using CSS for style. CSS is more powerful, but it can be a bit more confusing and has a steeper learning curve than word processor type formatting. In fact, CSS can do much more, but we will be limiting our introduction to a few basics. When using CSS, you pre-define various Page (background), Format (paragraph or headings) or Style (user defined) properties for whole classes of page elements and then apply these throughout a site instead of having to format each item separately. However, they work a bit differently from formatting in your word processor where you directly apply fonts, colors, sizes, or any other style to the text or other page elements. Style Sheets are the preferred way to format your web sites.
In this lesson we will use KompoZer to create a WWW site with Cascading Style Sheets (CSS). Cascading Style Sheets (introduction to CSS in KompoZer):
0 kommentar(er)
