Introduction to CSS

ITE 10
Introduction
❖CSS stands for Cascading Style Sheet, allows you to create rules that specify how the content of
an element should appear.

❖CSS works by associating rules with HTML elements. These rules govern how the content of
specified elements should be displayed.
 Ways to utilize CSS
1. Inline - styles are defined inside the individual tags. Using style attribute

2. Internal/Embedded - style is written inside a style tag on the HTML

3. External – styles are written on a CSS file. HTML will import the CSS file.
 Selector and Declaration
Aside from inline styling, a CSS rule contains two parts: a selector and a declaration.

A CSS rule indicates how an element is styled..

 Selector and Declaration
Selectors indicate which element the rule applies to. The same rule can apply to more than one element
if you separate the element names with commas.

Declarations indicate how the elements referred to in the selector should be styled.
 Selector and Declaration
CSS declarations sit inside curly brackets and each is made up of two parts:
A property and a value, separated by a colon. You can specify several properties in one declaration, each
separated by a semi-colon.
 Selector and Declaration
Properties indicate the aspects of the element you want to change. For example, color, font, width,
height and border.

Values specify the settings you want to use for the chosen properties. For example, if you want to
specify the background color property then the value is the color you want.
 Commonly Used CSS Selector
1. Universal Selector | * { } - Applies to all elements in the document.
2. Type Selector | h1, h2, h3 {} - Matches element names
3. Class Selector | .myClass { } - Matches an element whose class attribute has a value that matches
the one specified after the period (or full stop) symbol
◦ | p.myclass { } - Targets only <p> elements whose class attribute has a value of note

4. ID Selector | #myID { } - Matches an element whose id attribute has a value that matches the
one specified after the pound or hash symbol.
5. Child Selector | li > a { } - Matches an element that is a direct child of another.
6. Decendent Selector | p a { } - Matches an element that is a descendent of another specified element
(not just a direct child of that element)
 Commonly Used CSS Selector
7. Adjacent Sibling Selector | h1 + p { } - Matches an element that is the next sibling of another
8. General Sibling Selector | p ~ div {} - Matches an element that is a sibling of another, although it
does not have to be the directly preceding element
Thank you