Re: Styling CSS [Branched from Problems with css-designer Panel]

Hi sheryltoo.

I have branched this to a new discussion because the old one you posted to is from 2013 and no longer relevant.

I want you to go to Site > New Site and create  a new project folder.  For example, C:\MyTestSite\

Next, go to Files > New > Starter Templates. 

Click on Bootstrap Templates and pick any Sample Page you like.  This is mainly for demonstration purposes so it doesn't matter which one you pick.

Hit the CREATE button.

Immediately save your newly created page as index.html

Your Files Panel should look something like this.

Now go to File > New > New Document and under document type, click on CSS.

Hit the CREATE button.

Paste the following CSS code into your  CSS file.  So all total it should look like this:

@charset "utf-8";

/* CSS Document */

body {

margin: 0 auto;

width: 80%;

font-family:  Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;

font-size: calc(16px + 1vw);

line-height: calc(1.1em + 0.5vw);

}

Save your new CSS file to your css folder as custom.css.  Close custom.css

In index.html,  place your cursor underneath  the link to Bootstrap CSS.  

Go to Tools > CSS > Attach style sheet.  See screenshot for settings and hit OK.

Your index page should resemble this.  Hit Ctrl+S to save.

Now scroll down a bit and click on the first <h1> tag and hit Ctrl+E to open the Quick Edit panel.

Hit New Rule and select custom.css  Remember, Bootstrap is a read only file and we never edit Bootstrap.  From now on, every new style rule goes into the custom.css file.

Now let's create a style rule for the <h1> tag.

h1 {color: indianred

}

Hit Ctrl+S to save.

Close the Quick Edit Panel.

Switch to the custom.css tab  to confirm that your new style rule is in your css file.

Switch back to Source Code tab.

If you scroll down the document, all <h1> tags should be indianred.

Repeat this a few more times with other selectors to get a feel for it.

Hit Ctrl+S often to save work in HTML and CSS files.