Download to read offline
Uploaded bySomaia Gaber
HTML Styles.pptx
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.
![Cascading style sheet (css)]](https://cdn.slidesharecdn.com/ss_thumbnails/cascadingstylesheetcss-130819011155-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML Styles.pptx
- 1. HTML Styles Inline, Internal,External
- 2. Objectives: Know htmlstyling 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 toCSS 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: ACSS 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: Itis the use of style attribute inside html tags:
- 8. Exercise: (create thefollowing shapes using inline styling method)
- 9. Internal Styling: Using<style> tag inside the <head> or the <body> tag.
- 10. Exercise: (create thefollowing shapes using internal styling method)
Editor's Notes
- #8 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.