SIMPLE SELECTORS IN CSS

CSS INTRODUCTION

Before talking about the post “Simple Selectors in CSS” let’s give the definition of CSS. CSS stands for Cascading Style Sheets, with CSS we describe how we want the elements of our HTML pages to appear, we customize for example fonts, colors, backgrounds etc. Created by the World Wide Web Consortium (W3C) as a “complementary” to HTML.

THE RULE OF CSS

For each selector we have a key-value pair called a declaration. We will talk about selectors in detail later.

HOW TO ADD CSS TO OUR HTML PAGES

There are three ways to insert a style sheet into an HTML page.

EXTERNAL CSS

With an external style sheet, you can change the look of an entire website by changing just one file. Each HTML page must include a reference to the style sheet with the <link> tag inserted within the head section.

INTERNAL CSS

An internal style sheet can be used if a single HTML page has a unique style. The internal style is defined inside the <style> element, of the head section.

INLINE CSS

An inline style can be used to apply a unique style to a single element. To use inline styles, add the style attribute to the relevant element. This attribute can contain any CSS property.

MULTIPLE STYLES

Continuing with the topic “Simple Selectors in CSS” the question arises: what style will be used when more than one style is specified for an HTML element? All styles on a page will be applied “cascading” into a new “virtual” style sheet according to the following rules, where number one has the highest priority:

Inline style (within an HTML element)
External and internal style sheets (in the head section)
Default browser settings

Hence, an inline style has the highest priority and will override the external and internal styles and browser defaults. Let’s check this with the Chrome inspector. In the example code I have defined a tag having the color property overwritten several times. We verify that the inline style prevails.

CHROME INSPECTOR

METHOD

Open the sample HTML page
Right click in any area and select “inspect“
Select the Elements tab
Inside the inspector select the square with the arrow at the top left
Select the <h1> SIMPLE SELECTOR element
You will see in the CSS sheet that the overridden settings are highlighted as crossed out and the color of the inline style prevails.

CSS COMMENTS

Comments are used to explain the code and can be helpful when editing the source code later. Comments are ignored by browsers. A CSS comment begins with /* and ends with */.

CSS SELECTORS

A CSS selector selects the HTML elements you want to style. We can divide CSS selectors into five categories:

Simple selectors (select items based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-class selectors (select elements based on a certain state)
Pseudo-elements selectors (select and model a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

In this first article we will look at Simple selectors.

CSS ELEMENT SELECTOR

The element selector selects HTML elements based on the element name.

CSS ID SELECTOR

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element must be unique within a page; then, the id selector is used to select a unique item! To select an element with a specific id, write a hash (#) character, followed by the element’s id.

CSS CLASS SELECTOR

The class selector selects HTML elements based on a specific class attribute. To select elements with a class attribute, write a period (.) Character, followed by the name of the class.

CSS UNIVERSAL SELECTOR

The universal selector (*) selects all HTML elements on the page.

CSS GROUPING SELECTOR

The grouping selector selects all HTML elements with the same style definitions.

NB: FOR ALL THE VARIOUS SELECTORS I HAVE GIVEN AN EXAMPLE CODE.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>SIMPLE SELECTOR</title>
    <style>
        /*--ESEMPIO DI INTERNAL CSS*/
        h1 {color: brown;text-align: center;} 
    </style>
    
</head>
<body>
    
    <h1 style="color: blue; text-align:center;">SIMPLE SELECTOR</h1>
    <p>Lorem,
    <span class="bold"> ipsum dolor sit amet consectetur adipisicing elit.</span> 
        Tenetur vero illum similique, ullam perferendis veritatis 
        quod commodi odit, dolor alias dolore rem maiores corporis nihil 
        harum quos molestiae recusandae itaque!
    </p>
    <p>Vitae, autem nemo quia eaque libero ea expedita at ipsa, 
        iusto repellat <span class="bold">suscipit molestias maiores esse itaque obcaecati</span>  
        consequuntur illum sint provident! Minus, qui cum? Rem nihil 
        delectus assumenda ullam!
    </p>
    <div>
        <h2 id="intestazionedue">QUESTA INTESTAZIONE E IL PARAGAFO SI TROVANO DENTRO AL DIV</h2>
        <p>Lorem ipsum dolor,<span class="bold">sit amet consectetur adipisicing elit. </span>  
            Reprehenderit quasi deectus vel explicabo recusandae 
            deleniti iure sed simillique, error accusantium quidem officia 
            repellat voluptatem nobis! Rem quibusdam ea consequatur fugit!
        </p>
    </div>
    <div class="myclass">
        <h3>QUESTA INTESTAZIONE STA NEL DIV</h3>
    </div>
    <br>
    <hr>
    <div class="myclass2">
        <h4>INTESTAZIONE 4</h4>
    </div>
    <p class="testobianco grassetto"> Lorem ipsum dolor sit amet consectetur, 
        adipisicing elit. Impedit itaque excepturi omnis quisquam! Quis et iusto, 
        aliquid iure repellat quod laudantium minima maiores eaque incidunt nemo, 
        porro consequuntur asperiores! Ipsum.
    </p>
    
    <p class="bold">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Accusantium laborum optio, ea iusto adipisci itaque, quam 
        recusandae reprehenderit, eaque explicabo quo nemo consequuntur 
        velit cum totam aliquam. Voluptate, atque architecto?</p>
</body>
</html>

Copy to Clipboard

/*--ESEMPIO DI EXTERNAL STYLE*/
/*--In questo foglio di stile h1 è il selettore, mentre color e text-align
    sono due proprietà. La prima imposta il colore del testo mentre con la
    seconda informiamo il browser che il testo deve essere centrato.
    In questo esempio il selettore h1 ha tre impostazioni della
    proprietà color,ma con valori diversi. Quella inline vince su tutte.*/
h1{
    color: blueviolet;
    text-align: center;
}
/*--Il selettore di elementi seleziona gli elementi HTML 
    in base al nome dell'elemento. In questo caso i paragrafi.*/
p{
    color: red;
    text-align:left;
}
/*--Selezione di un elemento h2 in base al suo identificativo(id)
    la proprietà background-color specifica il colore di sfondo
    dell'elemento*/
#intestazionedue{
    color: chocolate;
    text-align: center;
    background-color: aquamarine;
}
/*--Selezione di un elemento div in base alla classe. La proprietà border
    specifica una bordo di 5px solid di colore rosso. Volendo si possono
    impostare le tre proprietà singolarmente.*/
.myclass{
    color: white;
    background-color: brown;
    text-align: center;
    border: 5px solid red;
}
/*--Il selettore di raggruppamento seleziona tutti 
    gli elementi HTML con le stesse definizioni di stile.*/
h1,h2 {
    border:2px solid black
}
/*--In questo esempio applico un font al div*/
.myclass2{
    font-size: large;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    border: 5px solid red;
}
/*--lo stile verrà applicato solo ai tag span che presentino 
     l’attributo class="bold"*/
span.bold{
    background-color: blue;
    border:2px solid green;
    color:white;
    font-weight:bold;
}
/*--Questa regola applicherà gli stili impostati a tutti gli elementi 
    in cui siano presenti (in qualunque ordine) i nomi delle classi 
    definiti nel selettore. Avranno dunque il testo biano e in 
    grassetto questi paragrafi:<p class="testobianco grassetto">...</p>*/
p.testobianco.grassetto {
    color:white; 
    font-weight:bold;
    background-color: blue;
}

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB

CSS INTRODUCTION

THE RULE OF CSS