This document discusses different CSS selectors including element, class, and ID selectors. It provides examples of how to apply styles using declaration blocks for HTML tags, inline styles, class attributes, and ID attributes. Declaration blocks allow applying the same styles to multiple tags. Class selectors define common styles for elements that share the class attribute. ID selectors are used to uniquely style a single element using its ID. The document recommends using class and ID selectors over inline styles for maintainable and reusable CSS code.

1. CSS Selectors: element,
class, id
Danilo D’Auria

2. What is CSS?
CSS stand for Cascading Style Sheets, it is a style sheet language used to help
design web pages. Through HTML we take care of the page’s structure while with
CSS we focus on make content looks right.
HTML does this With CSS it becomes this

3. CSS Syntax
Source: http://www.w3schools.com/css/css_syntax.asp
In CSS we can add style to HTML tags. It can be done by:
• Using a declarati0n block for that tag. It will be applied everywhere in your page;
• Using inline style
• Using class attribute
• Using id attribute
In each case the CSS Syntax will be like the one show below, where we can have many
declarations (property and value) for the same block

4. Declaration Block on HTML tag
When we want to apply the same set of declaration to specific tags, we can use the
following structure.
e.g.
Declaration Block Description
h2 {color:black;} It applies to all h2 headings the text
color black
h1,h2,h3,h4,h5,h6 {color:white; font-
weight:bold;}
It applies to all headings from h1 to h6
the text white and bold
img {border:0px;margin:0px} It removes borders and margins to all
the images
p {font-family: Arial;} It applies to all the paragraph the Arial
font.

5. Inline style 1/2
Inline style it’s useful when you want to apply a specific style to only one element.
In which case you could consider to apply the style directly in the tag element.
Please note that it’s best
practice to keep CSS style
in a separate stylesheet.
<h2 style=“font-size:24px; color: red;”>Heading 2<h2>
Using the attribute style, we are applying a bigger font-
size to the h2 and assign the text color red . So in the page
it would look like this:
Heading 2

6. Inline style 2/2
Example
Write the text Hello World in a div with width 200px and height 200px .
The div will have background red and the text in the div must be yellow.
<div style=“width: 200px; height: 200px; background: red; color: yellow;”>
Hello World
</div>
Output

7. Class attribute
Using the class attribute we can define a common style that we want to give to all the tags having that attribute.
Example
let’s say that we want to assign text c0lor blue to all the <li> tags in a specific list. So what we need to do is:
<style>
.list-item{color:blue;}
</style>
…
<ul>
<li class=“list-item”>bag</li>
<li class=“list-item”>better</li>
<li class=“list-item”>bird</li>
<li class=“list-item”>boat</li>
<li class=“list-item”>butter</li>
</ul>

8. Id attribute
We can use the id attribute when we want to give assign a specific style to an item
in the page. Each specific id can be used only once in each page. If you need to use
the same style to multiple items in a page then use the class attribute.
Example
Apply font weight bold, white text, and border brown to a div containing the text:
“I like CSS”
<style>
#myDiv {
font-weight:bold;
color:#ffffff;
border: 2px solid brown;
}
</style>
<div id=“myDiv”>
I live CSS
</div>

9. Conclusion
There are many ways that we can use CSS and apply it to our code. However the
best way to do it is by using the id and class attributes. Remember to use class
when you want to apply the same style to multiple items in your code, otherwise
for specific/custom style to an item use the id attribute