Log in

I forgot my password

Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

None

Most users ever online was 27 on 15th May 2013, 11:59 am
Top posting users this month

Today’s Show
Powered by The Odyssey Scoop.

Lesson #3: Cascading Style Sheets (CSS)

View previous topic View next topic Go down

20130725

Post 

Lesson #3: Cascading Style Sheets (CSS)




Okay, now that I've finally remembered this project, we're back! Today's lesson is CSS.

CSS is a big topic. Not as big as HTML, but big enough for its own books to be justified. You don't strictly need CSS to use HTML, but without it, you'd go crazy. After all, why reinvent the wheel?

CSS, or Cascading Style Sheets, controls how your HTML document will look in a web browser. It does that by using a common scheme in the computer world... a properties list. Here's an example of some CSS.

Code:
body
{
background-image:url('images/background.jpg');
background-color:#FFFFFF;
color:black;
}

a:link {color:#000099;}      /* unvisited link */
a:visited {color:#660066;}  /* visited link */
a:hover {color:#660066}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

p {

margin-right:85px;
margin-left:85px;
font-family:serif;
text-indent:50px;

}

/*Header*/

div#header
{

height:67px;
text-align:center;
background-color:#000000;
background-image:url('images/panel.png');

}

/*Right Sidebar*/

div#rightbar
{

text-align:center;
position:absolute;
right:8px;
top:94px;

}

/*Stuff with borders*/
.bordered
{

border:3px solid black;

}

hr
{

height:3px;
color:black;
background-color:black;

}

/*The Content Section*/

div#content
{

background-color:white;
height:100%;
width:60%;
margin: 0 auto;

}

/*The Footer*/

#footer
{

text-align:center;
margin-left:100px;
margin-right:100px;
font-family:monospace;
font-size:11px;

}

See how it works? You tell it how your site should look by specifying options in a list. First, you tell the CSS what section of the HTML document you want to style. Let's say you want to style every paragraph, so you'd just put a "p" at the front, for the <p> tag in HTML. Next, you open the list with a curly bracket. Then, you type out your list in the format of "option:answer;", and then close it with another curly bracket. Like this:

Code:
p{color:red;font-size:20px;font-family:serif;}

That CSS code will make text look like this:

Red text, 20px in size, with a Serif font.


Of course, there are more options than just size, color, and font. You can see the complete list here if you want.

If you'd like to put a comment in your CSS, you can use the fairly standard slash and then asterisk, then your comment, then an asterisk and a final slash. Like this:

Code:
/* no comment */

Coincidentally, I have a T-Shirt that says that on it.

The important thing for this lesson is where to put your CSS code. You have three options, each suited for a particular use case. The first is the most simple.

If you want to stylize one individual tag, use the "style" attribute, like this:

Code:
<p style="color:red;font-size:20px;font-family:serif;">Red text, 20px in size, with a Serif font.</p>

That way, the style is confined to the contents of that <p> tag. The only problem is, if you only use this method, you've got a lot of code on your hands, and it would be a pain to change even the simplest things, like color. So, you could put all your CSS code in your HTML <head> tag, like this:

Code:
<head>
<style>
p {color:green;font-family:monospace;}
body {background-color:black;}
p.red {color:red;}
</style>
</head>

The CSS code in the <style> tags will apply to the entire page. Sure saves a lot of time.

Now, notice how you specify which tag has what style. On the first line of CSS code, the attributes of green and monospace are given to the <p> tag, and on the next line we see that the <body> has a black background. On the next line, things are shaken up... CSS classes.

What that .red means is that any <p> tag with the class="red" attribute will use the p.red style instead of the p style. This way, you can have more than one style for one tag type. This is especially helpful with <div> tags, because they don't do much on their own.

Also note that you can use hashes to specify an ID, like this:

Code:
p#blue {color:blue;}

This way, you'd tell a paragraph to be blue like this:

Code:
<p id="blue">I'm blue!</p>

I have no idea why you have both class and ID to choose from. Beyond me.

The last way to insert CSS code is often the best, but not always- putting CSS code in its own file, with a .css extension. This way, you can have the same CSS code apply to multiple HTML pages.

You put all the CSS code in this .css file, perhaps, theme.css. Then you reference that .css file in the HTML document, like this:

Code:

<link rel="stylesheet" type="text/css" href="theme.css"/>

Put that code in the <head> tag of your HTML document, and your web browser will look for a file named theme.css in the same folder on your hard drive as the HTML document. If found, the CSS code will be applied to the page.

So, to recap, CSS uses a properties list to tell web browsers how to display an HTML web page. You specify styles per HTML tag type, and you can use IDs or Classes to narrow down exactly what tags receive what format.

Some CSS attributes you'll use a lot are as follows:

"color" changes text color. Example: color:white;

"background-color" changes anything's background color. Example: background-color:green;

"margins" will allow you to add padding space around something. Example: margins:10px;

"border" will let you add a border around an item. Example: border:5px solid periwinkle;

There are tons of different attributes out there, I can't possibly list them all, but thankfully, that's what the W3C is for. If you understand the syntax, you know everything you have to know to make use of CSS.

Today's challenge is to use CSS and an HTML document to make a generic movie poster.


avatar
Sko
On Vacation
On Vacation

Posts : 1367
Join date : 2012-10-10
Location : About 150 Km from Sol, give or take.

View user profile http://tech.ryanhoots.com/

Back to top Go down

Share this post on: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

Lesson #3: Cascading Style Sheets (CSS) :: Comments

avatar

Post on 25th July 2013, 8:40 pm by Agent 86

Sko wrote:I have no idea why you have both class and ID to choose from. Beyond me.
class is for multiple HTML elements while id is for one

Example:
Code:
<head>
<style>
p.red {color:red;}
</style>
</head>
<body>
<p class="red">I'm red!</p>
<p class="red">I'm red too!</p>
</body>

Preview:

I'm red!
I'm red too!

Back to top Go down

avatar

Post on 13th August 2013, 1:34 pm by Eugene

Well written tutorial, Sko! Great job.

Speaking as a web developer, having both ID and class is very important. Yes, I can see your point and it makes sense, but I'm glad we have the option. Smile

You know what? I think I will join in this challenge. I'll try to share when I'm done.

Back to top Go down

avatar

Post on 13th August 2013, 3:39 pm by Sko

Eugene wrote:Well written tutorial, Sko! Great job.

Speaking as a web developer, having both ID and class is very important. Yes, I can see your point and it makes sense, but I'm glad we have the option. Smile

You know what? I think I will join in this challenge. I'll try to share when I'm done.
Awesome, thanks for joining in. I'm sorry I haven't been able to post these often, time has been scarce, but I'm glad that it's here. Smile

Back to top Go down

avatar

Post on 29th August 2013, 8:24 am by NarniaQA Guy

Nice tutorial, Sko. Very Happy Can you do a tutorial on SASS or SCSS also?

Back to top Go down

avatar

Post on 29th August 2013, 9:37 pm by Sko

NarniaQA Guy wrote:Nice tutorial, Sko. Very Happy Can you do a tutorial on SASS or SCSS also?
I actually don't know a thing about SASS or SCSS, I only use CSS and even then I'm not very good at it, I spend most of my time with the nitty-gritty stuff. If you want to do tutorials on those two formats, go ahead, I'd love to read it. Very Happy

Back to top Go down

Post  by Sponsored content

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum