See Also: Styling Resources: Learn CSS for Free<\/a><\/strong><\/p>\n\n\n\n HTML, or HyperText Markup Language, is the standard markup language for texts intended to be displayed in a web browser. It can be aided by technology like Cascading Style Sheets and scripting languages like JavaScrip.<\/p>\n\n\n\n CSS may be introduced to HTML texts in three different ways:<\/p>\n\n\n\n The most frequent method of adding CSS is to maintain the styles in separate CSS files. However, for the sake of this article, we will utilize inline and internal styles because they are easier to illustrate and test.<\/p>\n\n\n\n See Also: Why Digital Marketers Should Learn Basic CSS and HTML<\/a><\/strong><\/p>\n\n\n\n CSS is often written in a separate CSS file (with the file extension.css) or in a <style> tag within the <head> tag. However, there is a third option that is equally acceptable. The style attribute of an HTML element is the third place you may write CSS. When CSS is written with the style property, it is referred to as “inline style.” This is not regarded as a great practice in general. However, there are occasions where inline styles are the best (or only) option.<\/p>\n\n\n\n A number of CSS property and value pairs make up the style attribute. A semicolon (;) separates each “property: value” pair, just like in embedded or external style sheets. It must, however, fit on one line, with no line breaks after the semicolon. Refer to the example mentioned below.<\/p>\n\n\n\n <h1 style=”color:blue; font-size:40px;”>This is a heading<\/h1><\/p>\n\n\n\n <p style=”color:green; font-size:20px;”>This is a paragraph.<\/p><\/p>\n\n\n\n <div style=”color:red; font-size:10px;”>This is some text content.<\/div><\/p>\n<\/div><\/div>\n\n\n\n Using inline styles is generally seen to be a bad idea. Because style rules are put directly in the HTML element, the presentation becomes entangled with the document’s content, making it harder to maintain the code and negating the purpose of using CSS.<\/p>\n\n\n\n See Also: CSS Styles: Inline vs. Internal vs. External<\/a><\/strong><\/p>\n\n\n\n Internal style sheets, often known as embedded style sheets, have no influence on the document they are contained in.<\/p>\n\n\n\n The <style> element is used to generate embedded style sheets in the <head> section of an HTML page. In an HTML page, you can declare an unlimited number of <style> elements, but they must exist between the <head> and <\/head> tags.<\/p>\n\n\n\n Embedded style sheets enable you to create styles for the entire HTML content in a single location. When you use the <style> element to embed style sheet information into an HTML page, this is referred to as embedded style sheets. This is accomplished by putting the style sheet information within <style><\/style> tags in the document’s head. Refer to the example mentioned below. <\/p>\n\n\n\n <!DOCTYPE html><\/p>\n\n\n\n <html lang=”en”><\/p>\n\n\n\n <head><\/p>\n\n\n\n <title>My HTML Document<\/title><\/p>\n\n\n\n <style><\/p>\n\n\n\n body { background-color: red; }<\/p>\n\n\n\n p { color: #fff; }<\/p>\n\n\n\n <\/style><\/p>\n\n\n\n <\/head><\/p>\n\n\n\n <body><\/p>\n\n\n\n <h1>This is a heading<\/h1><\/p>\n\n\n\n <p>This is a paragraph of text.<\/p><\/p>\n\n\n\n <\/body><\/p>\n\n\n\n <\/html><\/p>\n<\/div><\/div>\n\n\n\nWhat is HTML?<\/h2>\n\n\n\n
Integrating CSS within HTML <\/h2>\n\n\n\n
![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-890.png\")
<\/figure>\n\n\n\nInline CSS in HTML<\/h2>\n\n\n\n
\n\n\n\n
\n\n\n\n![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-891.png\")
<\/figure><\/div>\n\n\n\nEmbedded Style Sheets<\/h2>\n\n\n\n
![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-892.png\")
<\/figure><\/div>\n\n\n\n
\n\n\n\n
\n\n\n\n
![\"inline](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-893.png\")
<\/figure><\/div>\n\n\n\n