1) The css fileis (the files with the .css extension, included in the
directory where the html files are, on the server) responsible for the
presentation (look) of the information (content) included in the html
file (the file with htm or html file).
2) Open your favourite text editor enter the CSS basic components, give the file a name and save it with the extension .css. The html file will include in the head tag a refernce to this CSS file.
eg. <head>
<link rel="stylesheet" type="text/css" href="jsites.css">
</head>
3) To decide on the look of the content in the html file using the CSS file, the css file would include for the tags in html a selector and a style block. The style block will include the elemnt properties and the style values.
eg. html file would include the following tags:
<h1>Building sites using Joomla</h1>
<p>Keywords: Site, menus, content, components, extensions, tools, help, add new article, article manager, front page mnanager, section manager, category manager, media manager, menu manager, language manager, user manager, global configuration, control panel, logout, mainmenu, user menu, top menu, banner, contacts, news feed. polls, search, web links, module manager, plug-in manager, template manager, clean cache, mass mail, read messages, write message.</p>
The corresponding CSS file in our example isjsites.css would include the following selectors to tell the html tags how to appear in the page:
h1 { color:red; background:yellow;}
body {background-color:tan;}
p {color:blue;}
The body colour decide on the page background colour.
4) The following topics will be covered, hereafter, how to include styling with html documents, id & class selectors, backgrounds, text, fonts, links, lists, tables, the box model (border, outline, margin & padding), plus a few advanced topics.
5) How to include styling: there are 3 methods the external style sheet, the internal style sheet and the inline styling method.
5-1) For the external style sheet, you open your favourite text editor, enter your style, how you want your web page or pages displayed in the browser, save the document with .css extension and you refer to it inbetween the head tags of the html page or pages.
5-2) For the internal the style of the page is defined in the head (between the head tags) section of the web page and it will be applicable to only this html page. The style tags are used to enclose the style defined in the head section (<style> </style>).
5-3) To use inline styles you use the style attribute in the relevant html tag (eg p, h1,...). The style attribute can contain any CSS property.
To read more, click here.
2) Open your favourite text editor enter the CSS basic components, give the file a name and save it with the extension .css. The html file will include in the head tag a refernce to this CSS file.
eg. <head>
<link rel="stylesheet" type="text/css" href="jsites.css">
</head>
3) To decide on the look of the content in the html file using the CSS file, the css file would include for the tags in html a selector and a style block. The style block will include the elemnt properties and the style values.
eg. html file would include the following tags:
<h1>Building sites using Joomla</h1>
<p>Keywords: Site, menus, content, components, extensions, tools, help, add new article, article manager, front page mnanager, section manager, category manager, media manager, menu manager, language manager, user manager, global configuration, control panel, logout, mainmenu, user menu, top menu, banner, contacts, news feed. polls, search, web links, module manager, plug-in manager, template manager, clean cache, mass mail, read messages, write message.</p>
The corresponding CSS file in our example isjsites.css would include the following selectors to tell the html tags how to appear in the page:
h1 { color:red; background:yellow;}
body {background-color:tan;}
p {color:blue;}
The body colour decide on the page background colour.
4) The following topics will be covered, hereafter, how to include styling with html documents, id & class selectors, backgrounds, text, fonts, links, lists, tables, the box model (border, outline, margin & padding), plus a few advanced topics.
5) How to include styling: there are 3 methods the external style sheet, the internal style sheet and the inline styling method.
5-1) For the external style sheet, you open your favourite text editor, enter your style, how you want your web page or pages displayed in the browser, save the document with .css extension and you refer to it inbetween the head tags of the html page or pages.
5-2) For the internal the style of the page is defined in the head (between the head tags) section of the web page and it will be applicable to only this html page. The style tags are used to enclose the style defined in the head section (<style> </style>).
5-3) To use inline styles you use the style attribute in the relevant html tag (eg p, h1,...). The style attribute can contain any CSS property.
To read more, click here.
No comments:
Post a Comment