Main PageIntroduction to Css3 ( CSS3 for begginers full guide )
Itroduction to css
A cascading style sheet(CSS) is use to design your website and it also allow you to separate website con HTML content from it style
of your website,
As always you use your HTML file to
arrange the content, but all of the presentation (fonts, colors,
background, borders, text formatting, link effects & so on...) are
accomplished within a CSS.
At this point we should look at the three ways or methods of applying css to our html
trese are the internal stylesheet, external stylesheey, and inline stylesheet.
Internal stylesheetThis way you are simply placing the CSS code within the <head></head< tags of each HTML file you want to style with the CSS. The format for this is shown in the example below.
<head>
<title>title of the page</title>
<style type="text/css">
Css Content Goes here
</style>
</head>
<body>
With this method each (X)HTML file contains the CSS code needed to
style the page. Meaning that any changes you want to make to one
page, will have to be made to all. This method can be good if you need
to style only one page, or if you want different pages to have varying
styles.
External stylesheet:
The next will be external method.An external CSS file can be
created with any text or HTML editor such as "Notepad" or
"Dreamweaver". A CSS file contains no HTML, only CSS. You simply
save it with the .css file extension. You can link to the file externally by
placing one of the following links in the head section of every HTML
file you want to style with the CSS file.
<link rel="stylesheet" type="text/css" href="Path To
stylesheet.css"/>
You can also use @import method to add your external css using the following
<style type="text/css">@import url(Path To
stylesheet.css)</style>
All of the above methods will be achieved by placing the following line of code in the head section
the are in green color
<head>
<title>title of the page</title>
<link rel="stylesheet" type="text/css"href="style.css"/>
</head>
<body>
or
<head>
<title>title of the page</title>
<style type="text/css">
@import url(path to stylesheet.css)
</style>
</head>
<body>
By using an external style sheet, all of your HTML files link to one
CSS file in order to style the pages. This means, that if you need to alter
the design of all your pages, you only need to edit one .css file to make
global changes to your entire website.
Inline styles are defined right in
the HTML file along side the element you want to style. See example
below.
<p style="color: #ff0000;">This is inline stylesheet with red color of text</p>
And this will be the result
This is inline stylesheet with red color of text
Inline styles will NOT allow the user to change styles of elements or text
formatted this way.
){kind=link}
Comments