Hi,
You can change externally or internally your css properties as follows:
1) Externally.
You have to create an css file and add this code line on your html page: <link href="css/myFile.css" rel="stylesheet" type="text/css">
myFile.css contains p{ color:red }and this file is within the folder called "css".
2) Internally.
The UI provides you 2 buttons: one managing tags, another managing classes.
a) The button tags.
You change the html tag using the right button. I mean the selector before the c button.
You choose the paragraph tag: p. Then, you open the creationComplete panel and you script: sym.$("p").css("color","red");
b) The button classes.
If you use the c button to declare one class. For instance, you write the word blue.
You will script within the creationComplete panel: sym.$(".blue").css("color","blue");
Now, looking at your html page (your second picture).
I browse this page searching the p tag (<p>...</p>).
When i reached the last tag (</html>), i didn't find any p tag. So, nothing happens.