Tutorial CSS in PDF
- Short Description:
- This tutorial contain a brief overview about HTML5 and CSS3 , a free training document in PDF under 45 pages by Jason Clark.
- Submitted On:
- 2015-11-20
- File Size:
- 1,475.43 Kb
- Downloads:
- 526
- Short Description:
- This document explain the CSS page composition with example code ,training courses in PDF under 27 pages designated to beginners.
- Submitted On:
- 2015-11-20
- File Size:
- 398.89 Kb
- Downloads:
- 255
- Short Description:
- Download free Cascading style sheets (CSS) course material and training (PDF file 34 pages) designated to beginners.
- Submitted On:
- 2016-12-26
- File Size:
- 3,908.20 Kb
- Downloads:
- 275
- Short Description:
- CSS Notes,free pdf tutorial about Cascading Style Sheet, complete training document in 16 pages designated to beginners.
- Submitted On:
- 2016-12-26
- File Size:
- 316.22 Kb
- Downloads:
- 174
What is it ? How to use them?
CSS (Cascading Style Sheets) are used to define the presentation of web pages.
From now on, your HTML code will only serve you to define the structure of your contents while the CSS will allow you to create your styles and your layout.
Those articles were originally published at the following purpose: Getting Started with CSS
How CSS work
CSS is a new and very effective way to apply styles to (X) HTML elements.
They allow you to define any style property such as border, type of character, background color, space between letters, and so on. (we will come back later on how to do this).
There are three main ways to apply CSS styles:
- In the body of the code (X) HTML;
- In the header of the page;
- In a style sheet completely separate from (X) HTML code.
CSS in the header of the page
Rather than the previous method, it's best to define your CSS styles once and for all in a particular section of your web page (we normally use the <head> section).
<head>
<style type="text/css">
div
{
background-color:#339;
color:#fff;
padding:15px;
border-bottom:5px solid red;
margin-bottom:15px;
}
</style>
</head>
<body>
<div>
Your Text
</div>
<div>Your Text
</div>
</body>
With this new way of doing things, you only need to define your style once. In our example, the defined style will automatically apply to all <div> tags on the page.
With this method, you can apply the same style multiple times in the same page, but not multiple pages at once. To go further in the standardization of your pages, you will have to use the third method.
CSS in a style sheet completely separate from (X) HTML code
The ideal way to define CSS is to save it as a document independent of your (X) HTML pages. With this method, all pages that refer to this external style sheet will inherit all its definitions.
Another advantage of this method is to be able to define several stylesheets for the same content and to switch from one sheet to another depending on the medium on which the content is displayed (screen, printer, etc.). We will come back to this later.
An (X) HTML page can refer to several style sheets at the same time. In this case, the definitions contained in these different sheets will be combined together.
Here is an example of styles defined in a separate document:
style.css :
body
{
background-color:#ccf;
letter-spacing:.1em;
}
p
{
font-style:italic;
font-family:times,serif;
}
page.html :
<head>
<link href="styles.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<p>This is an example of paragraphe.</p>
<p>Second example of paragraphe.</p>
</body>
- You are here:
-
Home
