Skip to main content

CSS Tutorial – Lesson 1 Part II

In the previous lesson we learned how to define a CSS rule, and we had shown that a CSS rule consists of two parts a selector and a declaration.

In the previous lesson we talked that in the selector we might write the html element we want to style. In our lesson today, completing with CSS rules, we’ll see now other types of selectors,

The ID selector:

CSS allows you to specify a style for a single element, regardless to its tag, depending on its id attribute. as you know, in XHTML each element has an id attribute, and this id must be unique.

To define a CSS rule depending on the ID selector below the syntax for it:

Example:

#theID

{

font-size: 14px;

}

Notes:

  • The above CSS rule will be applied for any element whose id = theID,
  • The ID selector must start with #.

The Class Selector:

Unlike the ID selector, the class selector allows us to define a rule for multiple elements regardless to their tag. The class selector enables us to define a common style for common elements, so that each element whose class same as the selector, will be styled according to the rule it follows.

Example:

.Justifiable

{

text-align:justify;

font-size:12px;

color: black;

}

Notes:

  • The class selector must start with a dot.
  • and used with the class attribute for any element.

In some circumstances, we might need to apply some styles for specific elements, for example for some divs we might need their background-color be the same, with font-size 15px for example, CSS allows us to define specific rules for specific elements, here is the syntax:

Example:

div.Pink

{

background-color: pink;

font-size:15px;

}

Notes:

  • The above rule will be applied for all elements whose class is Pink, so we restricted the rule with the element div, and internally, restricted it to divs whose class is Pink, so this rule cannot work with element p for example though its class might be Pink, only with div element and has a class Pink.

End of this part,

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

Best Wishes,

Anas Jaghoub

Comments

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

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

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

AABU GTUG Opening Event

On February 17, 2011 We’ve headed to Al Al Bayt University, to run one of the biggest event established there, for opening the AABU GTUG (Google’s Technologies Users Group). The event focused on introducing the GTUGS (Google’s Technologies Users Groups) and introducing Google’s technologies to students, such as Android and App Engine, to Chrome Extensions and HTML5 demos. Attendees exceeded 250 attendee, in addition to Vice president of Al Al Bayt University Dr. Hashem Al Masaeed, Deanship of College of I.T at Al Al Bayt University Prof. Ismail Ababneh, and a quite number of professors and teachers at the college of I.T at AABU, in addition to Yarmuk fm and Al Ro’aya  tv. AABU GTUG as a Google’s Technologies Users Group interested in Google’s technologies and tries as possible to increase students awareness about Google’s technologies, and introduce it to them. Their was a lot of activities during the event, beginning with the key note from me Anas Jaghoub, that included introducin...