Skip to main content

CSS Tutorial – Lesson 1 Part I

What is CSS?

CSS refers to Cascading Style Sheets, In general styles define how to display elements on the web page.

Why CSS?

By CSS, we can define a style for a web page and make it standard for all web pages on the website, changes to the style will be applicable to all pages on the same time. another point of view, CSS responsible for formatting elements of a page, this feature makes the HTML/XHTML responsible on defining the content of the page, and does not have a role in formatting the elements.

CSS created by W3C to solve a problem of HTML/XHTML, suppose you want to design your page in some specifications for fonts and colors used, then without using CSS, you have to write these specification for each page you want to apply this design to it, moreover, you might need to apply same design specifications on two different places on the same page, without CSS, you have to write it where ever you want it, this will make page design more complex and poor.

Syntax:

A CSS rule consists of two parts, first one is the selector, and the second one is the declaration part.

Normally, the selector is an HTML element that you want to style.

The declaration part, consists of properties and its values, each property defines a specific style that makes special touches to an element.

Example:

p

{

/* Declaration Part */

color: black;

font-size: 13px;

text-align: justify;

}

Notes:

  • The above lines of code, makes a rule for styling paragraphs in any HTML/XHTML document.
  • This rule displays paragraphs in font color black and size of 13px, and justifies it to its parent borders.
  • The p is an HTML element that refers to define paragraphs, and it is the selector in this rule.
  • Properties are defined in the declaration block.
  • Declaration block begins with an open curly bracket, and finishes with a close curly bracket.
  • Comments in CSS are enclosed within /* and */.
  • Each property definition ends with a semi-colon.
  • In this example I’m just showing the syntax of CSS, next lessons we’ll talk in deep details about properties and its values.

How to apply?

This example shows how to apply the above rule in an XHTML document.

  • Firstly, save the above rule in a file for example style.css, it is important that the extension of the file be .css.
  • In each page you need to apply your style, just link the style sheet to your page.
  • Look at this example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>

    <head>

    <!—Use the link tag to link to your style sheet –>

    <link rel="stylesheet" type="text/css" href="style.css" />

    <title>Welcome</title>

    </head>

    <body>

    <p> This is a paragraph that has special style defined in the CSS style sheet. </p>

    <p> Another Paragraph has same styles it is amazing idea Smile</p>

    </body>

    </html>

    End of Part I.

    To download this part as PDF file click here: CSS Tutorial – Lesson 1 Part I

    Best Wishes,

    Anas Jaghoub

Comments

Post a Comment

Popular posts from this blog

PHP Tutorial–Guest Book–System Definition and Requirements

In this lesson I’m going to illustrate the system definition and requirements for the Guest Book application. It is an important step in developing any application, since this step gives us an orientation about the system and its functionality, what is expected from the system to do. actually the system definition comes from keywords from customers and end users, usually try to make it clear for what they need in the application, and what they expect the system to do.  As developers it is our role to define the requirements for the system to be developed. In our example the system definition for the Guest Book is: A system that allows visitors of the site to post their comments and feedbacks about the site, with the possibility for managing comments and maintain it easily and user friendly. On the other hand, the system requirements are: a web server, since it is clear that the developed system is going to run on the Internet, so it is a web-based application not windows-based.
Post a Comment
Read more

تعلم تطوير تطبيقات للموبايل باستخدام الأندرويد

مرحبا أصدقائي يسعدني أن أبدأ معكم سلسلة حلقات في تعلم تطوير تطبيقات للموبايل باستخدام الأندرويد ، وسأسعى جاهدا معكم في أن تكون هذه السلسلة من أوائل السلسلات في اللغة العربية لتعليم برمجة تطبيقات الأندرويد من البداية وحتى الاحتراف. وسأحاول قدر المستطاع الشرح بلغة عربية بسيطة ومفهومة. حيث ستكون غدا إن شاء الله الحلقة الأولى من تعلم تطوير تطبيقات الموبايل باستخدام الأندرويد. أنس الجاغوب Twitter: @anasjaghoub Facebook: anasjaghoub
Post a Comment
Read more

Web Development Best Practices (PHP Best Practices)

Websites development is one of the most challenging projects ever to develop, according to the large number of components you deal with, integrate, and manage in your application. For example, most web projects Deal with databases as their data source, and I ntegrate with external services called web services and APIs. As well the application M anages its own objects and components from views to models to controllers to plugins and so on. A skilled web developer should have a great/deep knowledge in most of components used in his system, and as well should ha ve intensive focus on how each component work and how can be used, what can be done, and what cannot. On the other hand, the huge amount of requirements, components to manage, and time frame given to you to accomplish your mission, and number of people in your team, all these factors together requires from you to organize your tasks, and priorities your requirements, do deep analysis and planning in order to have a hi
Post a Comment
Read more