css selectors: element, class, id

CSS Selectors: element, class, idDanilo D’Auria

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

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

Declaration Block on HTML tagWhen we want to apply the same set of declaration to specific tags, we can use the following structure.e.g.

Declaration Block Descriptionh2 {color:black;} It applies to all h2 headings the

text color blackh1,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.

Inline style 1/2Inline 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

Inline style 2/2ExampleWrite 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

Class attributeUsing the class attribute we can define a common style that we want to give to all the tags having that attribute.

Examplelet’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>

Id attributeWe 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.ExampleApply 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>

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