Css types internal, external and inline (1)

css types internal, external and
inline

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.

• 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".

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.

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>

• 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.

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.

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>

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.

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>

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>

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>

• 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>

• 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

Css types internal, external and inline (1)

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Css types internal, external and inline (1) (20)

More from Webtech Learning (20)

Recently uploaded (20)

Css types internal, external and inline (1)