Code Anatomy
-
Cascading Style Sheets (CSS) is the language used to make style declarations about a web page using Hyper Text Markup Language (HTML). Basically, HTML dictates the structure and CSS dictates the look. This is oversimplified, but a good way to remember the difference.
Javascript is a programming language. Think of Javascript as an way to tell the computer to do automatic or interactive things.
For example, I want to make a slideshow with a red, green, and blue box. I use HTML to say that there are three boxes and how these boxes should show up on the webpage. CSS describes the size and shape of those boxes. Javascript makes the slideshow move. Without HTML, the basic box shapes wouldn’t exist, without CSS the boxes wouldn’t have any styling (size, color…), and without Javascript the boxes wouldn’t “move” to create the slideshow.
Most of the code for this Squarespace website entered by Headwaters staff does not require Javascript.
-
Below is example code for a simple red box with text inside.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
.box1{
background-color: red;
width: 50px;
}
.boxtext{
font: Times;
color: purple;
}
</style>
<div class="box1">
<p class=”boxtext1”>
I am a pretty red box.
</p>
</div>
</body>
</html>
< >: Notation used to start or end a section or tag.
<html>: Tells the computer that this is an HTML document.
<head>: Tells the computer that this is the top part (head) of the document, which includes information for creating the document and is not visible to the person viewing the website.
<meta…>: Tells the computer information about how to load or interpret or display the code. This specific tag tells the computer how to display the website on different devices with varying widths so the website is easily and accurately viewed on mobile.
</head>: Closing tag to mark the end of a section.
<body>: Starts the part of the code that describes how the webpage will look.
<style>: Starts the CSS styling section of code.
.XXXX{item: XXXX;}: CSS notation for a selector (the thing you are creating to style) and its attributes (the properties).
</style>: Ends the style (CSS) section.
<XXX class=””>: This is a section/divider in the HTML portion of the code. You might see p for paragraph (a text section) or div for division that is used to create containers.
Think of div containers like real life containers. A cardboard box can have shape, size, and color. It contains other things, maybe stuff or maybe more boxes. Div tags are good for creating order and a place for your website items to live.
Class is where you put the name of that thing you made in CSS.
plain text: P is for paragraph and says text should live here.
</body>: ends the body section of the code.
</html>: marks the end of the html document.
-
The information listed above is an overly simplified summary. Please seek out additional information to further clarification and examples.
W3 schools is a good place to start. Go to https://www.w3schools.com/ and click on HTML, CSS, or Javascript to get start. W3 also has information on notation and usage.
https://stackoverflow.com/ is another good resource, but be careful because this is a community forum. Not all information is accurate or safe. People post questions and others respond with their best guesses, insight, and opinions. Sometimes you can find really helpful and clever solutions.
https://openai.com/gpt-4 is also a good resource, but you need to make an account to use it. This is artificial intelligence/computer help. It can provide good suggestions and troubleshoot or review your code, but be aware that it absolutely makes mistakes.
