DES 250 Digital Media Design II
DES 250 Digital Media Design II

CSS Basics

Cascading Style Sheets are linked with HTML elements

CSS allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level one headings should be in a blue, italic, Times typeface.

Simple, styled example web page

CSS allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level one headings should be in a blue, italic, Times typeface.

result in browser:

HTML code:
<!doctype html><br /> <html><br /> <body><br /> <br /> <h1>HTML and CSS</h1><br /> <h2>HTML:</h2><br /> <p>HTML is a markup language for <em>describing</em> web pages.</p><br /> <h2>CSS:</h2><br /> <p>CSS code describes how HTML <span class="red">elements</span> are to be <em>displayed</em>.</p><br /> <br /> </body><br /> </html>
CSS code:
body {<br />   background-color: #B0B0B0;<br />   font-family: Helvetica;<br />   padding: 20px;<br /> }<br /><br /> h1 {<br />   font-size: 60px; <br />   color: white;<br /> }<br /><br /> h2 {<br />   font-size: 30px;<br />   border-top: 1px solid #000;<br /> }<br /><br /> p { margin-bottom: 40px; }<br /><br /> .red { color: #FB0050; }<br />
result in browser:

The CSS Box Model

The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element.

CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented.

HTML code:
<!doctype html><br /> <html><br /> <body><br /> <br /> <h1>HTML and CSS</h1><br /> <h2>HTML:</h2><br /> <p>HTML is a markup language for <em>describing</em> web pages.</p><br /> <h2>CSS:</h2><br /> <p>CSS code describes how HTML <span class="red">elements</span> are to be <em>displayed</em>.</p><br /> <br /> </body><br /> </html>
CSS code:
body, h1, h2, p, em, .red {<br />   border: 3px solid black;<br />   padding: 10px;<br />   margin: 10px;<br /> } <br />
result in browser:

You differenciate between so called Block elements and Inline elements. Block elements in this case are "h1", "h2", "p" and they take up the whole width of the browser. Inline elements flow within the text and are as wide as their content (text) is. Inline elements here are "em" and "span".

Margin is the space between each box. Padding defines the space between text and the edge of each box.

How to connect/link HTML and CSS

Option 1: Internal. CSS exists inside the HTML document.

HTML code:
<!doctype html><br /> <html><br /> <br /> <head><br /> <br /> <span class="pink"> <strong><style></strong><br /> body { <br /> background-color: #B0B0B0; <br /> font-family: Helvetica; <br /> padding: 20px;<br /> }<br /> h1 { <br /> font-size: 60px; <br /> color: white; <br /> }<br /> h2 {<br /> font-size: 30px;<br /> border-top: 1px solid #000; <br /> }<br /> p { margin-bottom: 40px; }<br /> .red { color: #FB0050; }<br /> <strong></style></strong></span><br /> <br /> </head><br /> <br /> <body><br /> <br /> <h1>HTML and CSS</h1><br /> <h2>HTML:</h2><br /> <p>HTML is a markup language for <em>describing</em> web pages.</p><br /> <h2>CSS:</h2><br /> <p>CSS code describes how HTML <span class="red">elements</span> are to be <em>displayed</em>.</p><br /> <br /> </body><br /> <br /> </html><br />


Option 2: External. CSS and HTML are separate documents. CSS is linked. Advantage is that one CSS file and style hundreds of HTML pages simultaneously. Keeping the code clear and organized is another reason for separating HTML and CSS since both will have lots of code. This will always be our method for the assignments.

HTML code:
<!doctype html><br /> <html><br /> <br /> <head><br /> <span class="pink"> <strong><link rel="stylesheet" href="styles.css"></strong><br /></span> </head><br /> <br /> <body><br /> <br /> <h1>HTML and CSS</h1><br /> <h2>HTML:</h2><br /> <p>HTML is a markup language for <em>describing</em> web pages.</p><br /> <h2>CSS:</h2><br /> <p>CSS code describes how HTML <span class="red">elements</span> are to be <em>displayed</em>.</p><br /> <br /> </body><br /> <br /> </html><br />