Dittofi
Search…
Intro to HTML & CSS
An overview of what HTML & CSS are & how they are used website & web app development
HTML makes up the structure & content of every page on the web. CSS is used to give the HTML style. Dittofi automatically generates this code while you build your website or web app.
In this tutorial we will cover the following topics.
  1. 1.
    How does the browser render the HTML & CSS code.
  2. 2.
    How to inspect the browsers code
  3. 3.
    What are HTML & CSS?
  4. 4.
    How to design & style a page inside Dittofi

How does the browser render HTML & CSS

When you visit a website, what you see on the screen is a result of your browser transforming code into something visual. The code that every website uses to do this is called HTML & CSS. A screenshot of a website & its code is below.

Visualizing the code for any browser

If you want to see the underlying code for a website, it is possible on most modern browsers. If you're working inside Google Chrome (which we would highly recommend), you can see this code by either:
  1. 1.
    Pressing Control + Shift + I if you're on a windows machine OR
  2. 2.
    Pressing Control + Option + I if you're on a Mac.
You can also right click & press "Inspect".
Once you have opened up the HTML, it is then possible to make temporary changes to this code. To do this:
  1. 1.
    Find a section of the HTML that you'd like to change, for example, text to edit.
  2. 2.
    Double click on the section that you'd like to edit & make your change
  3. 3.
    Press the Enter button on your keyboard.
For example:
Any changes that you make are temporary, this means that when you refresh the page they are gone. The changes are also what is known as local only, so no one else can see them.

What are HTML & CSS?

HTML gives your website structure & content, whereas CSS is responsible for styling your website.
Here is an example of a simple page structure & its corresponding HTML.
The HTML for the simple webpage is shown below. Notice that is includes "tags" for Body, DivBlock, Image, Heading & Paragraph.
1
<Body>
2
<DivBlock>
3
<Image src="https://dittofipublicfiles.s3.us-west-2.amazonaws.com/432/513-logo_white_purple_background.png"/>
4
<Heading>
5
About Us
6
</Heading>
7
<Paragraph>
8
We are a team of developers on a mission to take visual programing to the next level. Our goal is to build a system that empowers you to build scalable, full stack web apps & to generate real computer code that you can be proud of.
9
</Paragraph>
10
</DivBlock>
11
</Body>
Copied!
Inside the paragraph tag, you can see the text that is displayed on our webpage & in the heading tag, you can see the text "About Us" that is displayed in the heading.
It is possible to style the HTML directly, using something called "inline styling". Inline styling allows us to write little bits of code directly in the HTML, that set things like text color, background colors & so on. For example, below, we show what the HTML might look like if we style the heading, paragraph & body all inline.
1
2
<Body style={{ backgroundColor: '#edebe9' }}>
3
<DivBlock style={{ backgroundColor: '#ffffff', borderBottomLeftRadius: '25px', borderBottomRightRadius: '25px', borderRadius: '25px', borderTopLeftRadius: '25px', borderTopRightRadius: '25px', marginBottom: '42px', marginLeft: '42px', marginRight: '42px', marginTop: '42px', paddingBottom: '43px', paddingLeft: '43px', paddingRight: '43px', paddingTop: '43px' }}>
4
<Image src="https://dittofipublicfiles.s3.us-west-2.amazonaws.com/432/513-logo_white_purple_background.png" style={{ height: '100px', maxWidth: '100%' }}/>
5
<Heading type="h1">
6
About Us
7
</Heading>
8
<Paragraph>
9
We are a team of developers on a mission to take visual programing to the next level. Our goal is to build a system that empowers you to build scalable, full stack web apps & to generate real computer code that you can be proud of.
10
</Paragraph>
11
</DivBlock>
12
</Body>
Copied!

CSS (Cascading Style Sheets)

CSS are Cascading Style Sheets that can be used to style the elements inside your HTML, but without cluttering up the HTML.
HTML inline styles on the left can be put into a separate CSS file on the right
By separating out the CSS from the HTML, this means that your code is cleaner. Each style inside your CSS file has a name. For example, "paragraph-styles". This means that you can re-use the paragraph style that you like throughout your HTML.

How to design & style a page inside Dittofi

Dittofi has built a design studio that allows you to build websites & web apps entirely visually. Once built we automatically generate clean, re-usable HTML & CSS that you can publish to live in a click. The Dittofi websites & web apps are all extremely high performance. To achieve the high performance we also turn your designs into the React & Redux frameworks. These frameworks were originally developed by Facebook. We will cover the nuances behind the React & Redux frameworks in a later lesson.
The Dittofi Design Studio
Last modified 6mo ago