Web designing with HTML and CSS - How to add CSS to HTML elements

March 2020 in Information and Communication Technologies

CSS එහෙම නැත්නම් Cascading Style Sheets use කරන්නේ html tags වලට styles දමන්නත් ඒකෙන් අපිට ඕන විදිහට web pages වල html elements display කරවන්නත් කියලා මේ වෙනකොට ඔයාලා දන්නවා. මේ වැඩේ කරන්න html elements වලට css embed කරන්න වෙනවා.

HTML elements වලට CSS add කරන ආකාර 3ක් තියෙනවා.

1. Inline - html element එකක් ඇතුළේ style attribute එකක් විදිහට

2. Internal - html code එකේ head section එක ඇතුළේ <style> element එකක් විදිහට

3. External - separate external css file එකක් විදිහට

මේ ක්‍රම 3න් වැඩියෙන්ම යොදා ගන්නේ external method එක. මොකද ප්‍රායෝගික ලෝකේ තනි තනි web pages නෑ . Web site එකක නැත්නම් online system එකක pages තමයි වෙන් වෙන් වශයෙන් අපි දකින්නේ. සාමාන්‍යයෙන් web site එකක හැම page එකක්ම common theme එකකට තමයි design කරන්නේ. ඒ වගේ වෙලාවට ඔක්කොම pages වලට පොදු styles තනි css file එකක ලියලා ඒ file එක අනිත් html files වලට link කරන එකයි ඇත්තටම කරන්නේ.

මේ කිව්වේ මොනවද කියලා වැඩිය හිතන්න එපා. ඊළග discussion වෙන වෙනම මේ ක්‍රම 3 ගැන කතා කරමු.

Tagged:

HTML

or Register to comment.

Debug Trace

Info	Could not find file 'oauth2.css' in folder 'oauth2'.
Notice	Trying to access array offset on value of type bool #0 /home/xtreabfi/kuppiya/cache/Smarty/compile/vanilla^8d148c5e1b13e8d27851611d20a380b18401257f_0.file.default.master.tpl.php(45): gdn_ErrorHandler(8, 'Trying to acces...', '/home/xtreabfi/...', 45, Array) #1 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_resource_base.php(123): content_6594354daaee31_19788427(Object(Smarty_Internal_Template)) #2 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #3 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #4 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 1) #5 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(134): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, 'vanilla', NULL, 1) #6 /home/xtreabfi/kuppiya/library/core/class.smarty.php(146): Smarty_Internal_TemplateBase->display('/home/xtreabfi/...', NULL, 'vanilla') #7 /home/xtreabfi/kuppiya/library/core/class.controller.php(2232): Gdn_Smarty->render('/home/xtreabfi/...', Object(DiscussionController)) #8 /home/xtreabfi/kuppiya/library/core/class.controller.php(1595): Gdn_Controller->renderMaster() #9 /home/xtreabfi/kuppiya/library/core/class.pluggable.php(217): Gdn_Controller->xRender() #10 /home/xtreabfi/kuppiya/applications/vanilla/controllers/class.discussioncontroller.php(336): Gdn_Pluggable->__call('render', Array) #11 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->index('45', 'web-designing-w...', '') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #13 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #14 {main}
Notice	Trying to access array offset on value of type bool #0 /home/xtreabfi/kuppiya/cache/Smarty/compile/vanilla^8d148c5e1b13e8d27851611d20a380b18401257f_0.file.default.master.tpl.php(125): gdn_ErrorHandler(8, 'Trying to acces...', '/home/xtreabfi/...', 125, Array) #1 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_resource_base.php(123): content_6594354daaee31_19788427(Object(Smarty_Internal_Template)) #2 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #3 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #4 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 1) #5 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(134): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, 'vanilla', NULL, 1) #6 /home/xtreabfi/kuppiya/library/core/class.smarty.php(146): Smarty_Internal_TemplateBase->display('/home/xtreabfi/...', NULL, 'vanilla') #7 /home/xtreabfi/kuppiya/library/core/class.controller.php(2232): Gdn_Smarty->render('/home/xtreabfi/...', Object(DiscussionController)) #8 /home/xtreabfi/kuppiya/library/core/class.controller.php(1595): Gdn_Controller->renderMaster() #9 /home/xtreabfi/kuppiya/library/core/class.pluggable.php(217): Gdn_Controller->xRender() #10 /home/xtreabfi/kuppiya/applications/vanilla/controllers/class.discussioncontroller.php(336): Gdn_Pluggable->__call('render', Array) #11 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->index('45', 'web-designing-w...', '') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #13 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #14 {main}
Notice	Trying to access array offset on value of type bool #0 /home/xtreabfi/kuppiya/cache/Smarty/compile/vanilla^8d148c5e1b13e8d27851611d20a380b18401257f_0.file.default.master.tpl.php(219): gdn_ErrorHandler(8, 'Trying to acces...', '/home/xtreabfi/...', 219, Array) #1 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_resource_base.php(123): content_6594354daaee31_19788427(Object(Smarty_Internal_Template)) #2 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #3 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #4 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 1) #5 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(134): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, 'vanilla', NULL, 1) #6 /home/xtreabfi/kuppiya/library/core/class.smarty.php(146): Smarty_Internal_TemplateBase->display('/home/xtreabfi/...', NULL, 'vanilla') #7 /home/xtreabfi/kuppiya/library/core/class.controller.php(2232): Gdn_Smarty->render('/home/xtreabfi/...', Object(DiscussionController)) #8 /home/xtreabfi/kuppiya/library/core/class.controller.php(1595): Gdn_Controller->renderMaster() #9 /home/xtreabfi/kuppiya/library/core/class.pluggable.php(217): Gdn_Controller->xRender() #10 /home/xtreabfi/kuppiya/applications/vanilla/controllers/class.discussioncontroller.php(336): Gdn_Pluggable->__call('render', Array) #11 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->index('45', 'web-designing-w...', '') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #13 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #14 {main}
Notice	Trying to access array offset on value of type bool #0 /home/xtreabfi/kuppiya/cache/Smarty/compile/vanilla^8d148c5e1b13e8d27851611d20a380b18401257f_0.file.default.master.tpl.php(235): gdn_ErrorHandler(8, 'Trying to acces...', '/home/xtreabfi/...', 235, Array) #1 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_resource_base.php(123): content_6594354daaee31_19788427(Object(Smarty_Internal_Template)) #2 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #3 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #4 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 1) #5 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(134): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, 'vanilla', NULL, 1) #6 /home/xtreabfi/kuppiya/library/core/class.smarty.php(146): Smarty_Internal_TemplateBase->display('/home/xtreabfi/...', NULL, 'vanilla') #7 /home/xtreabfi/kuppiya/library/core/class.controller.php(2232): Gdn_Smarty->render('/home/xtreabfi/...', Object(DiscussionController)) #8 /home/xtreabfi/kuppiya/library/core/class.controller.php(1595): Gdn_Controller->renderMaster() #9 /home/xtreabfi/kuppiya/library/core/class.pluggable.php(217): Gdn_Controller->xRender() #10 /home/xtreabfi/kuppiya/applications/vanilla/controllers/class.discussioncontroller.php(336): Gdn_Pluggable->__call('render', Array) #11 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->index('45', 'web-designing-w...', '') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #13 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #14 {main}
Notice	Undefined index: internal #0 /home/xtreabfi/kuppiya/library/core/class.router.php(70): gdn_ErrorHandler(8, 'Undefined index...', '/home/xtreabfi/...', 70, Array) #1 /home/xtreabfi/kuppiya/library/core/class.theme.php(92): Gdn_Router->getRoute('DefaultControll...') #2 /home/xtreabfi/kuppiya/library/SmartyPlugins/function.breadcrumbs.php(24): Gdn_Theme::breadcrumbs(Array, true, Array) #3 /home/xtreabfi/kuppiya/cache/Smarty/compile/vanilla^8d148c5e1b13e8d27851611d20a380b18401257f_0.file.default.master.tpl.php(332): smarty_function_breadcrumbs(Array, Object(Smarty_Internal_Template)) #4 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_resource_base.php(123): content_6594354daaee31_19788427(Object(Smarty_Internal_Template)) #5 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #6 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #7 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 1) #8 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(134): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, 'vanilla', NULL, 1) #9 /home/xtreabfi/kuppiya/library/core/class.smarty.php(146): Smarty_Internal_TemplateBase->display('/home/xtreabfi/...', NULL, 'vanilla') #10 /home/xtreabfi/kuppiya/library/core/class.controller.php(2232): Gdn_Smarty->render('/home/xtreabfi/...', Object(DiscussionController)) #11 /home/xtreabfi/kuppiya/library/core/class.controller.php(1595): Gdn_Controller->renderMaster() #12 /home/xtreabfi/kuppiya/library/core/class.pluggable.php(217): Gdn_Controller->xRender() #13 /home/xtreabfi/kuppiya/applications/vanilla/controllers/class.discussioncontroller.php(336): Gdn_Pluggable->__call('render', Array) #14 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->index('45', 'web-designing-w...', '') #15 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #16 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #17 {main}