+
CSS

CSS

Author: Stan Keathly
Description:

Some of the sophistication that is taken for granted when designing content for print is very difficult to implement using web standards. Print publications are exploring better ways of translating their content to an equally rich digital format and this is why we are proud to introduce CSS Regions – a declarative way to express magazine-like layouts with simple CSS.

Some of the sophistication that is taken for granted when designing content for print is very difficult to implement using web standards. Print publications are exploring better ways of translating their content to an equally rich digital format and this is why we are proud to introduce CSS Regions – a declarative way to express magazine-like layouts with simple CSS.

(more)
See More
Try a College Course Free

Sophia’s self-paced online courses are a great way to save time and money as you earn credits eligible for transfer to over 2,000 colleges and universities.*

Begin Free Trial
No credit card required

25 Sophia partners guarantee credit transfer.

221 Institutions have accepted or given pre-approval for credit transfer.

* The American Council on Education's College Credit Recommendation Service (ACE Credit®) has evaluated and recommended college credit for 20 of Sophia’s online courses. More than 2,000 colleges and universities consider ACE CREDIT recommendations in determining the applicability to their course and degree programs.

Tutorial

CSS Regions

If you don’t know what CSS at all, or how it is used but would like to get a basic familiarity with it, this guide is for you.  CSS stands for Cascading Style Sheets.  Simply, it is a way for web designers to easily define how your site will look.

To understand what CSS is, you should first understand why it was developed in the first place.   Before CSS was invented, both the content & text for every website, and it’s style were all included in one document.  This meant that if you wanted to change a color across your entire site you would have to go into every single web page on the site and make the changes to each.

CSS came along to change this, and more specifically to separate your content from the design (style) of your site.    Now, a properly designed website will have only your information, and what each component on the site is (given a name for each) in the HTML file — and in the CSS file it will only contain things like colors, widths, heights, images, spacing, for each of the named components in HTML.

It made the process of maintaining a website much easier.  If you had a site with 1,000 pages, and you wanted to change say the background color, this would have to be done on every single page.   Now with CSS you just had to open up the one CSS file that is linked to all the 1,000 pages, make a single change, and every single page would be updated.

 

Easy Code Example

The below is an example of what HTML code looked like before CSS came along:

<p>
<font face="arial" color="black">This text will be arial font and red.</font>
<font face="arial" color="blue">This text will be arial font and red.</font>
<font face="arial" color="black">This text will be arial font and black.</font>
</p>

The problem with this is you had to define every aspect of every piece of text on the site to get it to be uniform.   Conversely, in CSS you can easily define all the text in section to be of a similar color.   If you’re using CSS, you’d write the HTML something like this:

<p>
This text will be arial font and red.
<span class="blue">This text will be arial font and red.</span>
This text will be arial font and red.
</p>

And the CSS would look like this: p {color:red; font:arial;} .blue {color:blue;}

 

Here we are defining a default style for <p> (which is a paragraph tag), so everything these tags will be red, and Arial font.   That is unless we define other setting inside of these tags,

Cascading Style Sheets

In the example above you saw that we defined a style for both the p tag, and another one we called ‘blue’.  The period to the left defines a class (conversely # is used for IDs, which may only be used once per page).   The C part of CSS stands for cascading, which means that the tags that are inside other tags will inherit the attributes of the one it is inside.   So in the example above, the blue text we defined will be Arial because it is inside of the <p> tag we defined, but it’s color will be blue because we defined that itself.    If we didn’t define that color there, it’s color would be red.