# data[].attributes.attachment_link.readable_text
CSS (Cascading Style Sheets) is the code that styles web content. CSS basics walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout? How do I decorate my webpage with background images and colors?

Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements. For example, this CSS selects paragraph text, setting the color to red:

Let's try it out! Using a text editor, paste the three lines of CSS (above) into a new file. Save the file as style.css in a directory named styles.

To make the code work, we still need to apply this CSS (above) to your HTML document. Otherwise, the styling won't change the appearance of the HTML. (If you haven't been following our project, pause here to read Dealing with files and HTML basics.)

1. Open your index.html file. Paste the following line in the head (between the <head> and </head> tags):

2. Save index.html and load it in your browser. You should see something like this:

If your paragraph text is red, congratulations! Your CSS is working.

Let's dissect the CSS code for red paragraph text to understand how it works:

The whole structure is called a ruleset. (The term ruleset is often referred to as just rule.) Note the names of the individual parts:

Selector

This is the HTML element name at the start of the ruleset. It defines the element(s) to be styled (in this example, <p> elements). To style a different element, change the selector.

Declaration

This is a single rule like color: red;. It specifies which of the element's properties you want to style.

Properties

These are ways in which you can style an HTML element. (In this example, color is a property of the <p> elements.) In CSS, you choose which properties you want to affect in the rule.

Property value

To the right of the property-after the colon-there is the property value. This chooses one out of many possible appearances for a given property. (For example, there are many color values in addition to red.)

Note the other important parts of the syntax:

Apart from the selector, each ruleset must be wrapped in curly braces. ({})

Within each declaration, you must use a colon (:) to separate the property from its value or values.

Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one.

To modify multiple property values in one ruleset, write them separated by semicolons, like this:

p { color : red; width : 500px; border : 1px solid black; }

You can also select multiple elements and apply a single ruleset to all of them. Separate multiple selectors by commas. For example:

p, li, h1 { color : red; }

There are many different types of selectors. The examples above use element selectors, which select all elements of a given type. But we can make more specific selections as well. Here are some of the more common types of selectors:

Selector name

What does it select

Example

Element selector (sometimes called a tag or type selector)

All HTML elements of the specified type.

p
selects <p>

ID selector

The element on the page with the specified ID. On a given HTML page, each id value should be unique.

#my-id
selects <p id="my-id"> or<a id="my-id">

Class selector

The element(s) on the page with the specified class. Multiple instances of the same class can appear on a page.

.my-class
selects<p class="my-class"> and<a class="my-class">

Attribute selector

The element(s) on the page with the specified attribute.

img[src]
selects<img src="myimage.png"> but not<img>

Pseudo-class selector

The specified element(s), but only when in the specified state. (For example, when a cursor hovers over a link.)

a:hover
selects <a>, but only when the mouse pointer is hovering over the link.

There are many more selectors to discover. To learn more, see the MDN Selectors guide.

Now that we've explored some CSS fundamentals, let's improve the appearance of the example by adding more rules and information to the style.css file.

1. First, find the output from Google Fonts that you previously saved from What will your website look like?. Add the <link> element somewhere inside your index.html's head (anywhere between the <head> and </head> tags). It looks something like this:

<link href = "https://fonts.googleapis.com/css?family=Open+Sans" rel = "stylesheet" />

This code links your page to a style sheet that loads the Open Sans font family with your webpage.

2. Next, delete the existing rule you have in your style.css file. It was a good test, but let's not continue with lots of red text.

3. Add the following lines (shown below), replacing the font-family assignment with your font-family selection from What will your website look like?. The property font-family refers to the font(s) you want to use for text. This rule defines a global base font and font size for the whole page. Since <html> is the parent element of the whole page, all elements inside it inherit the same font-size and font-family.

html { font-size : 10px; font-family : "Open Sans" , sans-serif; }

Note: Anything in CSS between /* and */ is a CSS comment. The browser ignores comments as it renders the code. CSS comments are a way for you to write helpful notes about your code or logic.

4. Now let's set font sizes for elements that will have text inside the HTML body (h1, <li>, and <p>). We'll also center the heading. Finally, let's expand the second ruleset (below) with settings for line height and letter spacing to make body content more readable.

h1 { font-size : 60px; text-align : center; } p, li { font-size : 16px; line-height : 2; letter-spacing : 1px; }

Adjust the px values as you like. Your work-in-progress should look similar to this:

Something you'll notice about writing CSS: a lot of it is about boxes. This includes setting size, color, and position. Most HTML elements on your page can be thought of as boxes sitting on top of other boxes.

Photo from https://www.geograph.org.uk/photo/3418115 Copyright © Jim Barton cc-by-sa/2.0

CSS layout is mostly based on the box model. Each box taking up space on your page has properties like:

padding, the space around the content. In the example below, it is the space around the paragraph text.

border, the solid line that is just outside the padding.

margin, the space around the outside of the border.

In this section we also use:

width (of an element).

background-color, the color behind an element's content and padding.

color, the color of an element's content (usually text).

text-shadow sets a drop shadow on the text inside an element.

display sets the display mode of an element. (keep reading to learn more)

To continue, let's add more CSS. Keep adding these new rules at the bottom of style.css. Experiment with changing values to see what happens.

html { background-color : #00539f; }

This rule sets a background color for the entire page. Change the color code to the color you chose in What will my website look like?.

body { width : 600px; margin : 0 auto; background-color : #ff9500; padding : 0 20px 20px 20px; border : 5px solid black; }

There are several declarations for the <body> element. Let's go through these line-by-line:

width: 600px; This forces the body to always be 600 pixels wide.

margin: 0 auto; When you set two values on a property like margin or padding, the first value affects the element's top and bottom side (setting it to 0 in this case); the second value affects the left and right side. (Here, auto is a special value that divides the available horizontal space evenly between left and right). You can also use one, two, three, or four values, as documented in Margin Syntax.

background-color: #FF9500; This sets the element's background color. This project uses a reddish orange for the body background color, as opposed to dark blue for the <html> element. (Feel free to experiment.)

padding: 0 20px 20px 20px; This sets four values for padding. The goal is to put some space around the content. In this example, there is no padding on the top of the body, and 20 pixels on the right, bottom and left. The values set top, right, bottom, left, in that order. As with margin, you can use one, two, three, or four values, as documented in Padding Syntax.

border: 5px solid black; This sets values for the width, style and color of the border. In this case, it's a five-pixel-wide, solid black border, on all sides of the body.

h1 { margin : 0; padding : 20px 0; color : #00539f; text-shadow : 3px 3px 1px black; }

You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply default styling to the h1 element (among others). That might seem like a bad idea, but the intent is to provide basic readability for unstyled pages. To eliminate the gap, we overwrite the browser's default styling with the setting margin: 0;.

Next, we set the heading's top and bottom padding to 20 pixels.

Following that, we set the heading text to be the same color as the HTML background color.

Finally, text-shadow applies a shadow to the text content of the element. Its four values are:

The first pixel value sets the horizontal offset of the shadow from the text: how far it moves across.

The second pixel value sets the vertical offset of the shadow from the text: how far it moves down.

The third pixel value sets the blur radius of the shadow. A larger value produces a more fuzzy-looking shadow.

The fourth value sets the base color of the shadow.

Try experimenting with different values to see how it changes the appearance.

img { display : block; margin : 0 auto; }

Next, we center the image to make it look better. We could use the margin: 0 auto trick again as we did for the body. But there are differences that require an additional setting to make the CSS work.

The <body> is a block element, meaning it takes up space on the page. The margin applied to a block element will be respected by other elements on the page. In contrast, images are inline elements, for the auto margin trick to work on this image, we must give it block-level behavior using display: block;.

Note: The instructions above assume that you're using an image smaller than the width set on the body. (600 pixels) If your image is larger, it will overflow the body, spilling into the rest of the page. To fix this, you can either: 1) reduce the image width using a graphics editor, or 2) use CSS to size the image by setting the width property on the <img> element with a smaller value.

Note: Don't be too concerned if you don't completely understand display: block; or the differences between a block element and an inline element. It will make more sense as you continue your study of CSS. You can find more information about different display values on MDN's display reference page.

If you followed all the instructions in this article, you should have a page that looks similar to this one:

(You can view our version here.) If you get stuck, you can always compare your work with our finished example code on GitHub.

In this exercise, we have just scratched the surface of CSS. To go further, see Learning to style HTML using CSS.

# data[].attributes.attachment_link.title
CSS basics - Learn web development | MDN

# data[].attributes.attachment_link.description
CSS (Cascading Style Sheets) is the code that styles web content. CSS basics walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout?

# data[].attributes.attachment_link.readable_text
Il CSS è un linguaggio utilizzato per la formattazione dei siti web e, più in generale, dei documenti HTML, dei documenti XHTML e XML. L'acronimo CSS significa Cascading Style Sheets ossia fogli di stile. Si tratta di un linguaggio di formattazione dei testi che integra il linguaggio HTML.

A cosa serve il CSS?

Il CSS onsente di realizzare effetti altrimenti non possibili con i tag del linguaggio HTML. Col passare del tempo si è sostituito anche ad alcuni tag del linguaggio HTML ( es. font ), in particolar modo a tutti quelli che associano al testo una dimensione e un colore.

Per inserire la formattazione in un documento HTML siamo costretti a inserire numerose volte i tag di formattazione dei caratteri. Ad esempio, nel linguaggio HTML per scrivere con il colore rosso alcune parole in grasseto di un testo, dobbiamo utilizzare il tag FONT ogni volta che ci serve.

questa parola è <b><font color=#FF0000>rossa</font></b>,
anche questa parola è <b><font color=#FF0000>rossa</font></b>

Il precedente codice sorgente viene visualizzato dal browser mettendo in grassetto ( tag B ) le due parole e colorandole di rosso ( tag FONT ). Il risultato è il seguente:

Lo stesso risultato grafico può essere ottenuto definendo un particolare stile del carattere tramite il tag STYLE nella sezione HEAD del documento HTML, detto foglio di stile ( CSS ).

In questo modo possiamo eliminare le ridondanze dei tag HTML e, all'occorrenza, possiamo anche modificare lo stile dei caratteri su tutte le pagine del sito web con una sola operazione.

Un esempio pratico

Nel seguente esempio CSS associamo il colore rosso ( #FF0000 ) su tutte le parole in grassetto ( tag <b> ) del documento HTTML.

In pratica, con questa semplice regola di stile diciamo al browser di adottare automaticamente il colore rosso ( #FF0000 ) ogni volta che incontra una parola in grassetto, ossia ogni volta che incontra una parola compresa tra i tag <b>

In questo modo evitiamo di dover definire manualmente il colore rosso con il linguaggio HTML ( tag <font> ) su ogni parola in grassetto del documento HTML. In questo modo possiamo omettere di scrivere nel codice sorgente il tag <font>.

<b>questa parola è in<font color=#FF0000>grassetto</font></b>

Quando si utilizza il CSS è sufficiente scrivere il tag <b>. La regola del foglio di stile visualizza automaticamente la parola in grassetto con il colore rosso.

questa parola è <b>rossa</b>,
anche questa parola è <b>rossa</b>

Grazie allo stile CSS otteniamo a video il medesimo risultato di prima, utilizzando però una minore quantità di codice sorgente. Il vantaggio è tanto maggiore, quante più parole rosse ci sono nel testo.

E' soltanto un semplice esempio per comprendere la funzionalità del linguaggio. Il CSS è un linguaggio di formattazione molto potente che ci consente di eliminare quasi del tutto l'uso dei tag html. Il CSS è una pratica di buona programmazione che non sostituisce il documento HTML ma lo affianca.

Nel documento HTML sono presenti i contenuti testuali veri e propri mentre nel foglio di stile sono concentrate le regole di formattazione grafica ossia come si dovranno vedere i testi sullo schermo dell'utente.

Quando viene utilizzato per la prima volta il CSS?

Il primo CSS venne introdotto nel 1996 ( CSS 1 ) come tentativo di adottare uno standard di formattazione tra i diversi browser, ognuno dei quali seguiva delle proprie regole di interpretazione del linguaggio HTML. Il CSS riscosse immediatamente un gran successo e nel 1998 vennero coniate dal W3C le specifiche del CSS 2, a cui seguirono nel 2004 quelle del CSS 2.1.

Il foglio di stile interno o esterno?

Il foglio di stile CSS può essere integrato direttamente nel codice sorgente del documento HTML all'interno del tag STYLE, come nell'esempio precedente, oppure può essere scritto su un file esterno con estensione .css che viene richiamato dal documento HTML.

<link rel="stylesheet" href="/file-esterno.css" type="text/css">

Un esempio di codice CSS che consente di personalizzare il tipo di carattere di un documento, il colore, lo sfondo della pagina ( tag BODY ) e la formattazione dei principali tag header del documento ( H1, H2, H3 ) è il seguente:

L'uso di un file esterno per definire il foglio di stile CSS è generalmente la strada migliore perché permette di ridurre il peso del documento HTML e, indirettamente, di aumentare la velocità di scaricamento e di visualizzazione della pagina sul web.

Quando il foglio di stile è un file esterno, quest'ultimo resta nella memoria cache del browser e non viene scaricato ogni volta che l'utente cambia la pagina di lettura sullo stesso sito web. In pratica, viene scaricato soltanto con la prima pagina che l'utente legge su un sito web ma non anche nella seconda, terza, quarta pagina e così via. Un bel vantaggio...

# data[].attributes.attachment_link.description
Il CSS è un linguaggio utilizzato per la formattazione dei siti web e, più in generale, dei documenti HTML, dei documenti XHTML e XML. L'acronimo CSS significa Cascading Style Sheets ossia fogli di stile. Si tratta di un linguaggio di formattazione dei testi che integra il linguaggio HTML.

# data[].attributes.attachment_link.title
TUTORIAL HTML E CSS ITA - Impararlo SUBITO! Corso RAPIDO per principianti in ITALIANO [2020]

# data[].attributes.attachment_link.title
Corso completo CSS da PRINCIPIANTE ad ESPERTO in 7 ore con ESERCIZI

# data[].attributes.attachment_link.title
spazio libero didattico MATERIALI DI LABORATORIO INFORMATICA E TECNOLOGIE INFORMATICHE

# data[].attributes.attachment_link.description
Progettazione del Software Corso di Laurea in Ingegneria Ingegneria dell'Informazione -- Sede di Latina Corso di Laurea in Ingegneria Ingegneria dell'Informazione -- Consirzio Nettuno A.A.

# data[].attributes.attachment_link.description
Il portale per una scuola sempre più collaborativa, digitale e inclusiva.