HTML Styling Methods: Inline, Internal & External CSS
•Download as PPTX, PDF•
0 likes•143 views
This document discusses three methods for styling HTML documents: inline styling, internal styling using the <style> tag, and external styling using a separate CSS file. It provides examples of creating shapes using inline and internal styling, and explains the syntax and benefits of CSS for controlling layout across multiple pages.
Recommended
More Related Content
Similar to HTML Styling Methods: Inline, Internal & External CSS
Similar to HTML Styling Methods: Inline, Internal & External CSS (20)
Recently uploaded
Recently uploaded (20)
HTML Styling Methods: Inline, Internal & External CSS
- 1. HTML Styles Inline, Internal, External
- 2. Objectives: Know html styling methods. Be able to style websites using inline styling method. Be able to style websites using internal styling method. Be able to style websites using external styling method.
- 3. Agenda: Introduction to CSS What are the html styling methods? Inline styling Internal styling External styling
- 4. What is CSS? CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External sheets are stored in CSS file.
- 5. CSS Syntax: A CSS rule consists of a selector and a declaration block. The selector pointes to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly brackets.
- 6. Html styling methods: Inline CSS. Internal CSS. External CSS. Multiple style sheets. Cascading order.
- 7. Inline style: It is the use of style attribute inside html tags:
- 8. Exercise: (create the following shapes using inline styling method)
- 9. Internal Styling: Using <style> tag inside the <head> or the <body> tag.
- 10. Exercise: (create the following shapes using internal styling method)
Editor's Notes
- 1-there are different size measuring units like inch, cm, but px is most commonly used unit and it depends on your screen size. 2-If we style the body tag all the tags inside will inherit the style. 3-80% width will take 80% of your screen width. 4-max-width=500px will fix the width to 500 px max when the size of the screen exceed this size it will stop maximizing to the percentage of the screen size. 5-some styles take one value some take 3 like the border for example.