11 //CSS & HTML

What is CSS?

CSS stands for Cascading Style Sheets, and they are used to format the html elements of your webpage. External style sheets are used to format multiple pages (which saves a lot of work!), and are saved as CSS files.

 

Syntax of CSS:

selector(diagram from w3schools)

CSS is has two main parts – the selector, and the declaration. The selector indicates the html element you will format, and the declaration describes how it will be modified. The Declaration contains one or more properties and corresponding values.  The declaration is always contained inside of a pair of curly brackets.

Selectors

Selectors indicate which html element you will modify. You can select based on element, id, class, types, attributes, and more. Check out these examples on selectors.

Style Sheets

External style sheets are used to style multiple pages of html. They are used to provide consistent formatting to several pages, and can save you a lot of time and work. If you’d like to change something, you have only to change it in your css page, and not every single html page.

To use external style sheets, you must create a css document (I suggest storing it either in your root directory, or if you have several pages store them in a css folder inside your root directory). Then, within your html page, you must link to that style sheet to apply the formatting. The <link> tag is placed within the header, like this:

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

Be sure to save your css file with the file extension “.css”

You can also create an internal style sheet, which includes css inside<style> tags inside of the header, most useful for documents with unique formatting.

Inline styles can be used directly inside of html elements, but this can get sloppy and difficult to work with.This method shold be used rarely.

Types of Styling

Check out these examples (and more) for methods of styling your html pages:

To go even further, check out these CSS3 examples:

 

Electronic Sketchbook Assignment 9 //Cascading Style Sheets (CSS)

Restyle your website using an external stylesheet to streamline the formatting for every page on your website. You can choose to have a few styles if you prefer by using multiple stylesheets. Finish uploading your content (images, text, etc.) and double check your image resolutions to make sure you are using web resolutions.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s