Accessing CSS - Programajama!
Download
Report
Transcript Accessing CSS - Programajama!
Accessing CSS
THREE WAYS: INLINE, INTERNAL, AND EXTERNAL STYLE SHEET
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• Inline style - Defined in the <head> of the current page
• Internal style sheet - Defined in the HTML tag of a particular element
• External style sheet - Defined in a separate file that is linked to the web page(s)
CSS Inline Style
CSS Inline Style
An inline style loses many of the advantages of style sheets by mixing content with presentation.
Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain
any CSS property.
Inline styles cannot be reused, and are placed directly inside an HTML element in the code.
NOTE: Inline styles do not have a Selector since it is embedded directly inside the HTML element it
styles. Therefore, there is no need for a Selector.
For the most part, inline styles defeat the purpose of using CSS and negates most of CSS's
advantages, like the separation of content from presentation. Use of inline styles should be kept to
a minimum and only used as a last resort (or a single quick fix).
CSS Inline Style
One example of using an inline style is useful. Let's say you want to override a style that's on your
external style sheet. Using an inline style is one way to accomplish this.
Example of an inline style:
<p style="color: #0000ff; margin-left:20px;">This is a paragraph.</p>
The style is embedded inside the HTML element using the style attribute. The above style cannot be
reused at all. It will only target that one paragraph.
In order to style more paragraphs with an inline style, you'd have to make one inline style per
paragraph. That's not very efficient, can make a mess of your code, and add to the amount of markup
on your page.
CSS Internal Style
CSS Internal Style
• Internal styles are placed inside the <head> section of a particular web page via the <style> tag:
<style type="text/css"></style>
• Inline styles can only be used for the web pages in which they are embedded.
• Therefore, you would need to create these styles over and over again for each web page you
want to style. If you want to change your style throughout the site you would have to make the
changes manually on each and every web page. Not very efficient!
• Internal styles are also called "embedded" styles. We use the <style> tag to embed internal
styles in the <head> section of a given web page.
CSS Internal Style
• Example of an Internal Style:
<head>
<style>
hr {
color:#0000ff;
}
p {
margin:20px;
font-size:12pt;
font-family:"Times New Roman",Georgia,Serif;
}
body {
background-image:url("images/browngradient.jpg");
margin: 40px;
}
</style>
</head>
CSS External Style
CSS External Style
• An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look of an entire Web site by changing one file. It also means you
only have to create the style one time!
• An external style sheet is a separate page file that is linked to the web page. Therefore, the
styles are external to, or outside of, the code of that web page.
• Each web page must link to the external style sheet using the <link> tag. The <link> tag goes
inside the head section:
<head>
<title>The Cackling Crows of Cascadia</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
CSS External Style
• Example of an External Style Sheet:
/* style.css */
hr {
color:#0000ff;
}
p {
font-size:12pt;
font-family:"Times New Roman",Georgia,Serif;
margin:20px;
padding:10px;
}
body {
background-image:url("images/browngradient.jpg");
}