External Styles External styles (sometimes called linked styles or remote styles) are the least important in the cascading order*, but the most powerful! An external style is simply a link placed in the HEAD section of your web page to a separate file containing your style rules. The primary advantage of using external styles is that you can change that one external file, and have that change reflected on every page of your site that links to the external CSS file. Any or all methods of implementing CSS can be used on the same page. Example: link href=”style.css” rel=”stylesheet” type=”text/css”> Embedded Styles Embedded styles are set in the HEAD section of your web page. Similar to an inline style rule, embedded styles allow you to override the rules of an external style sheet. The difference is that with an embedded rule, you don’t have to create a rule with each use of an HTML element. An H1 heading given the color red in an embedded style rule will render the H1 heading in red every time you use it on the page without having to code the rule into each heading tag as you must do with inline rules or with HTML attributes Example:
Inline Styles An inline style rule is coded directly into an HTML tag within the flow of your source code, just as an HTML attribute is used. The purpose of inline styles is to allow you to override an embedded or linked style rule, or to make a quick change of style where you don’t want a reusable rule. For example, you may have a rule that specifies H1 headings should be the color blue. If you have a place on your page where you want an H1 heading in red, an inline style rule allows you to override an embedded or external style rule. To override an embedded or linked style, an inline style must be coded into each HTML element each time you want to override the embedded or linked style Example:
Todays Update
Which method should be used and why? External stylesheet because it can be referenced by multiple HTML documents. As a result, if all HTML documents on your site reference the same external stylesheet, changes to this stylesheet will be reflected in all of the HTML pages of your site. ________________ 2 CSS is a language used in the web design and development practices. The significance of this markup language is to customize the look of web pages. It therefore plays an important role in the design of a webpage and the effectiveness of web development is based upon these standards. the abilities of design and development of the webpage are made possible through the customization of the fonts, elements of the website as well as the layouts and the colors used in the layouts thereof (Wolf et al, 2017). The use of the CSS style enables the animation as well as effects incorporation into a website under development. The external CSS is a separate file detailing the website design features which is linked to be web page code and hence adds the features to the linked web page (Hermes et al, 2019). The code of the external CSS code can be written on various separate text editors. Since it is externally linked to any web page it can have robust use and hence mostly applicable to large websites. The difference that is especially significant with this external CSS is the capability to be used for multiple pages of code. On the other hand, the HTML code which is styled using this external CSS is much cleaner as it only contains the web page content and not the style features (Budd et al, 2016). There are issues with speed of websites using this style of CSS as well as problems with rendering in case of incorrect loading. The internal CSS is used within the HTML code and is incorporated with a style tag which indicates the code is for the styling of the HTML page. It can be utilized especially when styling smaller code for instance a single page HTML code. The use of this style allows for the incorporation of ID selectors in the styling sheet. The loading time as is the case with external CSS is also increased due to this code. The code thereof is not as clean as that for the externally styled HTML code in the use of the external CSS code. This makes the HTML code a bit junkier and its interpretation as well as modification is made a little more complicated. The case of the inline CSS style is for specific elements of the HTML code. It is added by the use of style attribution technique and no need for selection. The use of this style is for specificity and reduction of generalization of website outlooks. The use of the inline CSS styling method is much easier and faster compared to the other two styling techniques hence can be effective for minute use. For purpose of testing it can be super effective as well checks for performance. it eliminates the creation of separate documents hence the loading time is greatly reduced. Since the code running is done sequentially (Meyer, 2016). The use of this style is limited and cannot be applied in large scale for styling large sizes of code as this would be extremely tedious and hence consume time which is undesirable in web design (Freeman, 2019). The use of these various styles for the customization, testing as well as modification of appearance of a web page during web design and development should be used together rather than separately to achieve optimal goals. The exclusive use of one style is not likely to be as efficient as the use of all these styles for the part that they fit most. For instance, inline CSS can be used during the testing phase then general code is later on written in external CSS for the final styling of the web page. References Budd, A., Björklund, E., & Bjorklund, E. (2016). CSS mastery. Berkeley: Apress. Retrieved from: https://www.apress.com/gp/book/9781430258636 Freeman, A. (2019). HTML, JSX, and CSS Prime
