CSS (Cascading Style Sheets) – define the looks of html element, server as the solution in HTML 3.2 where the web developer use styling tags like tags, using those style tags like tags was a straggle to the part of web developer in which it was add line by line into the html document.
Three ways of implementing CSS into HTML page:
- Internal Style Sheet
- External Style Sheet
- Inline Style
Internal Style Sheet
From its title internal style, literally this type of CSS was embedded inside your HTML page. This was place inside your
<head>section, and you must use the
<style>tag to declare and recognize it by the HTML page as internal CSS. Example of internal CSS:
<p>DRESS ME UP</p>
In example bellow I place the internal CSS inside the
<body>section, placing it to the
<body>section is improper. But still it dresses the
<p>element. Remember styles are always place on the
<head>section of HTML.
<p>DRESS ME UP</p>
What is the reason of applying and not applying internal style sheet?
The main reason of applying the internal style sheet is when the HTML page has unique design or appearance. It’s not advisable to apply inline CSS if the page is common, why? Imagine there are hundreds of HTML page, suddenly modification of font is needed, and internal CSS method was applied. Can you imagine how long it takes before you modify it all?
External Style Sheet
The External style contradicted to the idea of internal style. Internal CSS focus on unique page design, while external CSS apply for several html pages. Changing one property’s value inside the external CSS can result of changing the entire website. But before doing that, all of HTML page must have
<link>tag in order to locate the external CSS and to define that the style source is external and again it must be place inside the
<head>section. Example of link tag:
<link rel="stylesheet" type="text/css" href="external_style.css">
"external_style.css" notice the “.css” file extension, meaning it is CSS. Remember external CSS should not have html code or tags inside. Any text editor can be used in writing external CSS, and always save the file with “.css” extension name. Example of external style sheet:
Advantage of External style sheet
By using External CSS the bandwidth requirement cost is dramatically reduce, and the modification is easy. Internal CSS, the webserver download the style every time it loads / reloads, while in external CSS the downloading of the style is done only once, the reason is, you just link the same CSS with many HTML pages. In that case external CSS contributes to decrease website loading time.
Combine the CSS into the html tag. The inline style inserted into an html tag with the use of ‘style’ attributes. The value of ‘style’ tag, is the CSS declaration of property and value, it must be separated or terminated by semicolon. Example:
<span style=’margin-top:40px;color:#cccccc’>Inline style</span>
Advantage and disadvantage of inline style
One of the advantages using inline style is when quick fix is needed, meaning there’s no need to create or to trace external or internal CSS, just locate the html tag that requires modifications and put the ‘style’ attribute, then define the property and value of the style and that’s it. Another reason, it helps the user and the service provider of the small website that has limited number of web pages (example the blog sites). Lastly many website designer use inline CSS for testing, because it is more convenient rather than open a new or existing external CSS file, or scrolling up the page until they reach the head where in the
If inline style has advantage then let’s faces the inline style disadvantage. One of these is overriding the styles that you declare in external or internal CSS. Lastly the most important, Pseudo-elements is impossible to apply.
THINGS SHOULD AVOID IN WRITING A CSS
Avoid putting spaces into the property value’s unit (
margin-top:40 px;), the property is margin-top, the value is
40px, and the value’s unit is px (pixel). Removing space between the value and unit is the correct way (margin-top:40px). Remember in each declaration of property and value it must be terminated by semicolon. Lastly don’t forget to close your open curly brace.
I hope I answer the question What is css and how to implement?, thank you for reading and Good luck for you web programming journey!