Setting up page width: Difference between revisions

From Joomla! Documentation

← Older edit
Chris Davenport (talk | contribs)
Email Confirmed
4,043 edits
m Reverted edits by Arcturusweb (Talk) to last version by Kennyl
Cmb (talk | contribs)
956 edits
Several capitalization and markup changes.
 
(3 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{review}}
Some templates provide the opportunity to select the type of page width, through its parameter settings. In case this does not meet the requirements, the template manager also allows the modification of the cascading style sheets. It is in those files, usually with the extension ''.css'', that most, if not all, of the style (graphical) attributes are defined.
Some templates provide the opportunity to select the type of page width, through its parameter settings. In case this does not meet the requirements, the template manager also allows the modification of the cascading style sheets. It is in those files, usually with the extension .css, that most, if not all, of the style (graphical) attributes are defined.


'''What is CSS?'''
== What is CSS? ==


CSS stands for Cascading Style Sheet. HTML tags specify the graphical flow of the elements, be it text, images or flash animations, on a webpage. CSS allows us to define the appearances of those html tags with their content, somewhere, so that other pages, if want be, may adhere to. This brings along consistency throughout a website. The cascading effect stipulates that the style of a tag (parent) may be inherited by other tags (children) inside it.
CSS stands for Cascading Style Sheet. HTML tags specify the graphical flow of the elements, be it text, images or flash animations, on a web page. CSS allows us to define the appearances of those HTML tags with their content, so that other pages may adhere to. This brings consistency throughout a website. The cascading effect stipulates that the style of a tag (parent) are inherited by other tags (children) inside it.


'''CSS Statements'''
== CSS Statements ==


The definition of an html tag is as follows:  
The definition of an HTML tag is:


tagname { attribute: value; attribute: value; }
''tagname { attribute: value; attribute: value; }''


Tagname may be any html tag but for the sake of setting up page width, what is of interest to us is an html tag that gives structure to a webpage. Some webpages are constructed from div tags while others are constructed on table tags. Usually, the tag has a 'width' attribute. You set up a page width by varying the value of the 'width' attribute.
Tagname may be any HTML tag but for the sake of setting up page width what is of interest to us is an HTML tag that gives structure to a web page. Some web pages are constructed from ''div'' tags while others are constructed on ''table'' tags. Usually, the tag has a ''width'' attribute. You set up a page width by varying the value of the ''width'' attribute.


Sometimes, html tags are not defined directly. They are given an id or a class name and CSS refers to those specific tags by their ids or their class names.
Sometimes, HTML tags are not defined directly. They are given an ''id'' or a class name and CSS refers to those specific tags by their ''ids'' or their class names.


The definition of an id in CSS is as follows:
The definition of an ''id'' in CSS is:


#idname { attribute: value; attribute: value; }
''#idname { attribute: value; attribute: value; }''


while the definition of a class in CSS is as follows:
while the definition of a class in CSS is:


.classname { attribute: value; attribute: value; }
''.classname { attribute: value; attribute: value; }''


Again setting up a page width means modifying the value of the 'width' attribute of any one of these definitions.
Specifying a page width means modifying the value of the ''width'' attribute of any of these definitions.


'''Value of the 'width' attribute'''
For example, the syntax could be by not including the parenthesis,


The value of the 'width' attribute may be in pixels or percentage. Pixels are fixed values; hence in this case, the width does not vary according to window resizing or changing screen resolutions. Percentage usually means that the width is a fraction of the width of its container. So if we have a screen resolution of 1024 pixels by 768 pixels and our page width is set to 80% of the browser window container, our page would be approximately 820 pixels (80% of 1024) provided that the window browser is open at its fullest.
''div {width:50%;}''
 
This will make the width of the element 50% of its initial value.
 
== Value of the ''width'' attribute ==
 
The value of the ''width'' attribute may be in pixels or percentage. Pixels are fixed values; hence in this case, the width does not vary according to window resizing or changing screen resolutions. Percentage usually means that the width is a fraction of the width of its container. If we have a screen resolution of 1024 pixels by 768 pixels and our page width is set to 80% of the browser window container, our page would be approximately 820 pixels (80% of 1024) provided that the window browser is open at its fullest.

Latest revision as of 16:39, 3 November 2022

Some templates provide the opportunity to select the type of page width, through its parameter settings. In case this does not meet the requirements, the template manager also allows the modification of the cascading style sheets. It is in those files, usually with the extension .css, that most, if not all, of the style (graphical) attributes are defined.

What is CSS?

CSS stands for Cascading Style Sheet. HTML tags specify the graphical flow of the elements, be it text, images or flash animations, on a web page. CSS allows us to define the appearances of those HTML tags with their content, so that other pages may adhere to. This brings consistency throughout a website. The cascading effect stipulates that the style of a tag (parent) are inherited by other tags (children) inside it.

CSS Statements

The definition of an HTML tag is:

tagname { attribute: value; attribute: value; }

Tagname may be any HTML tag but for the sake of setting up page width what is of interest to us is an HTML tag that gives structure to a web page. Some web pages are constructed from div tags while others are constructed on table tags. Usually, the tag has a width attribute. You set up a page width by varying the value of the width attribute.

Sometimes, HTML tags are not defined directly. They are given an id or a class name and CSS refers to those specific tags by their ids or their class names.

The definition of an id in CSS is:

#idname { attribute: value; attribute: value; }

while the definition of a class in CSS is:

.classname { attribute: value; attribute: value; }

Specifying a page width means modifying the value of the width attribute of any of these definitions.

For example, the syntax could be by not including the parenthesis,

div {width:50%;}

This will make the width of the element 50% of its initial value.

Value of the width attribute

The value of the width attribute may be in pixels or percentage. Pixels are fixed values; hence in this case, the width does not vary according to window resizing or changing screen resolutions. Percentage usually means that the width is a fraction of the width of its container. If we have a screen resolution of 1024 pixels by 768 pixels and our page width is set to 80% of the browser window container, our page would be approximately 820 pixels (80% of 1024) provided that the window browser is open at its fullest.

Retrieved from "https://docs.sandbox.joomla.org/index.php?title=Setting_up_page_width&oldid=993911"