Css types internal, external and inline (1)
Download as PPTX, PDF7 likes7,409 views
The document discusses the three types of CSS - internal, external, and inline. Internal CSS is defined within the HTML document using <style> tags. External CSS is defined in a separate .css file and linked using <link> tags. Inline CSS is defined directly in HTML elements using the style attribute. IDs and classes are also discussed as ways to target elements with CSS selectors.
Css types internal, external and inline (1)
- 1. css types internal, external and inline
- 2. Definition of CSS • CSS stands for Cascading Style Sheets and provides HTML with layout and design. Along with making things pretty and aesthetically pleasing, CSS also provides a general structure to HTML. • Some of the most important CSS properties (in my opinion) are (in no order): • Color - specifying text color. • Font-family - specifying font type. • Font-size - specifying font size. • Text-decoration - specifying text decorations, such as underline. • Font-style - specifying font styling, such as italics. • Font-weight - specifying font weight, such as bold. • Width - specifying the width of an element. • Height - specifying the height of an element. • Background - specifying the background. • Border - specifying a border. • Text-shadow - specifying a shadow for our text. • Float - specifying the float of an element, such as left or right. • Position - specifying the position of an element, such as absolute or relative. • Position - specifying the position of an element, such as absolute or relative. • Padding - specifying padding inside an element, such as padding around text. • Margin - specifying the margin between elements.
- 3. • To add CSS styles to your website, you can use three different ways to insert the CSS. You can Use an "External Stylesheet", an "Internal Stylesheet", or "Inline Style".
- 4. Internal Stylesheet • An internal stylesheet holds the CSS code for the webpage in the head section of the particular file. This makes it easy to apply styles like classes or id's in order to reuse the code. The downside of using an internal stylesheet is that changes to the internal stylesheet only effect the page the code is inserted into.
- 5. Internal CSS Stylesheet • When creating a stylesheet internally in the web page, you will need to use the <style></style> HTML tags in the Head section of your webpage. All the code for the Internal CSS stylesheet is contained between the <head></head> section of your websites code. Below is an example of what an Internal stylesheet looks like. • <head> <style type="text/css"> h1 {color:blue;} h2 {color:red;} p {color:green;} </style> </head>
- 6. • When we add CSS to HTML either; externally or in the head section, we can use selectors. • CSS can use HTML elements as selectors, such as the paragraph, anchor, em and strong tags.
- 7. External Stylesheet • The style sheet file must be saved with a .css extension. • The External Stylesheet is a .css file that you link your website to. This makes it so that what ever you change in the .css sheet, will effect every page in your website. This prevents you from having to make many code changes in each page. This is for "global" site changes.
- 8. External CSS Stylesheet • With an external style sheet, you can change the look of an entire website by changing just one file! • Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the head section: • <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> • Below is what the code looks like. • <head> <link rel="stylesheet" type="text/css" href="/support/style.css" /> </head>
- 9. Inline Styles • To use inline styles, add the style attribute to the relevant tag. • The Inline style is specific to the tag itself. The inline style uses the HTML "style" attribute to style a specific tag. This is not recommended, as every CSS change has to be made in every tag that has the inline style applied to it. The Inline style is good for one an individual CSS change that you do not use repeatedly through the site.
- 10. Inline CSS Styles • The Inline style is specific to the tag itself. The inline style uses the HTML "style" attribute to style a specific tag. This is not recommended, as every CSS change has to be made in every tag that has the inline style applied to it. The Inline style is good for one an individual CSS change that you do not use repeatedly through the site. • The inline style uses the HTML "style" attribute. This allows CSS properties on a "per tag" basis. The following is an example of how the inline style is used. • <p style="color:red;font-size:18px">This is a paragraph!</p>
- 11. Id in html • Now that we have started to semantically divide our content, it is time to introduce yet another set of attributes/values. Up until now, we haven’t been working with the look of your page, but later on you will want to be able to change the look of your webpage and this is where the id’s and classes attributes comes in handy. • This attribute assigns a name to your element. The name must be unique and cannot be used anywhere else in your document. • I said that id-elements would have to be unique and this means you cannot have two with the same value in you markup – the following example would not render correctly in the browser: • <div id="menu">This would be your menu</div> <div id="blog-entry">Your first blog-entry</div> <div id="blog-entry">Your second blog-entry</div>
- 12. class in html • that you can have several elements in your document with the same class-name. • <div class="blog-entry"> <p> Just Another Day<br /> Written by Christina<br /> On January 11th </p> <p class="content">This is my second blog entry, and I just wanted to check in on you </p> </div> <div class="blog-entry"> <p> My First Blog Entry<br /> Written by Christina<br /> On January 10th </p> <p class="content">I’m so happy to write my first blog entry – yay!</p> <div>
- 13. • The title Attribute • Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph: • Example • <p title="I'm a tooltip"> This is a paragraph. </p>
- 14. • http://www.inmotionhosting.com/support/ed u/website-design/using-css/linking-your-css- to-your-website • http://www.html5-tutorials.org/html- basics/id-and-class/ • http://ryanfait.com/articles/the-difference- between-ids-and-classes/ • http://www.w3schools.com/html/html_attrib utes.asp