I fogli di stile Fase di progettazione vengono associati solo durante la creazione di un documento. Quando la pagina viene visualizzata nella finestra di un browser, sono visibili solo gli stili effettivamente associati o incorporati nel documento.

Lavorando sempre con i css richiamati da una variabile trovo molto comoda questa funzione allorché voglio avere subito un’idea dell’effetto generato dal foglio di stile associato alla pagina.

Per utilizzare un foglio di stile Fase di progettazione, procedere nel modo seguente.

Aprire la finestra di dialogo fogli di stile Fase di progettazione: 

•   io faccio click destro nella pagina e poi Stili CSS > Fase di progettazione; oppure
• fare clic con il pulsante destro del mouse sul pannello Stili CSS e selezionare Fase di progettazione nel menu di scelta rapida.
• selezionare Testo > Stili CSS > Fase di progettazione.

Nella finestra di dialogo, impostare le opzioni per mostrare o nascondere un foglio di stile selezionato:
Per visualizzare un foglio di stile CSS in fase di progettazione, fare clic sul pulsante più (+) sopra a Mostra solo in fase di progettazione, quindi nella finestra di dialogo Seleziona un foglio di stile selezionare il foglio di stile CSS da mostrare.

Per nascondere un foglio di stile CSS, fare clic sul pulsante più (+) sopra a Nascondi in fase di progettazione, quindi nella finestra di dialogo Seleziona un foglio di stile selezionare il foglio di stile CSS da nascondere.

Per eliminare un foglio di stile dai due elenchi, fare clic sul foglio di stile da eliminare e fare clic sul pulsante meno (-) corrispondente.

Fare clic su OK per chiudere la finestra di dialogo.

Il pannello Stili CSS viene aggiornato con il nome del foglio di stile selezionato insieme all’indicatore “nascosto” o “progettazione”, in base alla condizione selezionata per il foglio di stile.