|
3. Internal Cascading Style Sheets
All the same elements and values apply as they did above, we will just list them differently. Instead of being directly “inline” in the html code, we'll place the css in the head of our document, in-between the <head>and</head> tags. We start by placing the following opening and closing css tag in the head of our page
<style type="text/css"> All CSS code will be placed between the two tags. In our Internal Style Sheet and our External Style Sheet, we will now use the following syntax. selector {property: value} The property and value tags are the same as with our inline, like when we set our property “color” to the value “red”. Our “selector” above was the <p> (paragraph). We actually were defining it when we use <p style= The selector is basically our html tag we want the css to affect. Like now, I could leave the individual paragraph tags alone in the html and just add the following between my css open and close tags in the head
<style type="text/css"> Now anywhere I typed, as long as it was a normal paragraph, the text would be red. We can also set multiple values as we did before but since we aren't confined to being “inline” now, we can go ahead and enter after each semi-colon ; to help make things easier to read. Where it was... font-family:serif; font-size: medium; text-decoration: none; It's now
font-family: serif; The only other thing we need to do here is tell it which selector to define and show where the property and value begin and end for the paragraph selector. We do this by first naming our selector, followed the the opening tag, which is { we will then place our code and close with } It doesn't matter if the {} are on the same line as above with our {color:red} or as follows.
<style type="text/css"> Now, let's expand on that and add a background color. Since our background will affect the body of the page, we will want to use the “body” selector. If we were doing this without css, the body tag is where the background properties would be defined. Like this.. <body bgcolor="#000000"> Now, we can define in css like this.
body { I've highlighted the selector in red, the property in green, the value in blue and bolded the opening and closing tags. We can place as many css defines as we want. You've probably seen pages full of these if you've every had a look at a .css file before. You open it up, your jaw hits the desk and you quickly close the page not wanting to disturb the monster. Next time you open one, you can browse on through it and recognize what the selectors are that are being controlled and what properties and values are being assigned to them. Let's look at the two defines we've been working on to see how they look together.
<style type="text/css"> You may have noticed a couple of comments in the code above. Comments can be on their own line or at the end of a line. These are your friends, sometimes your best friends when working with a long style sheet as often they will tell you what part of the web page the section or line of code affects. Above we set the body to use Black as a background for our page. We can actually define many different things with our “body” selector. For the following example, I'm actually going to grab the body define from one of my Wordpress themes.
body { Let's stare this monster down! We can see by looking, quite simply now that we are setting the body of the page to use a background image. Because no path is set for this image, it must be in the same folder as your web pages. We are telling it to use the Lucida Grande font and enclosing the two words in single quotes, (double quotes will confuse it), we are telling it that if the surfers browsers does not have Lucida Grande font installed to try the ones that following in that order and ending with a generic font. Additionally, we want the page to be displayed with no margin and no padding and want to use a size 14px font as the page default. We can override this at anytime by creating a new selector which we will do later. Did you get through that without pulling out any hair? I bet you breezed right through it didn't you? The above was a custom template, I'm using. Let's take a look at the Wordpress default theme. We'll just look at the body selector define again.
body { Here, we are using the font-size 62.5%, remember from earlier when we covered the font-size property, the percentage is based up line height. So the default font size will be 62.5% of whatever the line size is. So if we define different line heights in various places throughout our page and don't add a new define for the font size in those particular place, it will use the default 62.5% Ok, I said earlier that we would go over what “em” is and since it's being used here, I guess this is as good a time as any. When using px to set font sizes, line heights, etc.. you are setting an exact number for that font or line height, etc.. which means that how it is viewed is dependent upon the viewers screen resolution. A 12px font will look differently on a 600x800 screen that it does a 1024x780 screen. The em setting is basically a scalable size and how it is displayed is calculated based on the font-size property of the parent element. What the body selector did above is set the default text size to be about 10px. 1 normal em is about 12px. So with this base established, you can use “em” instead of px to allow for scaling. Which means that your page can look the way you designed it on any resolution screen. Just remember that the “em” calculates from whatever the parent size is. To explain, let's say we've kept our 1 em at 12px because we didn't scale it down by setting the 62.5% like we did in the wordpress css body css above. So if we were to use 1.2em to define our paragraph text size, this would be multiplied by our default 12px for a slightly larger font, however if we had set our paragraph to 62.55% and then were working within a paragraph and set some text to be 1.2em, it would calculate on our already reduced 62.55% for a figure slightly larger than the 10px but less than 12px. There really was no simple way to explain that. I hope you didn't get thrown off there, the main thing to remember is that you can always back your style.css file up and make changes until you get the look you want. They key is to not be afraid of it. The cool thing is that we can also use the em to scale our images, so the whole page is able to expand and contract as needed to fit in the surfers screen, looking exactly as we intended it to look. Back to the default wordpress body CSS we were looking at. Notice this time, there are two values for the background property. As you might have already guessed, the first is a color that will display until the image background loads. background: #d5d6d7 url('images/kubrickbgcolor.jpg'); The color of the font is set to 333 which is almost black. You can use the 3 digit color codes or the full color code or even a color name like “whitesmoke”. To find out which 3 digit color code is what, which can be difficult when going over your Wordpress Style Sheet, you can use this page which has the codes along with a visual of the color to make it easier on you to make the right changes to your style sheets. Three Digit Color Codes You can use this page for color names as well as Hex codes. Color Names and Hex Codes Let's take a look at defining our hyperlink colors. First let me start by saying, the selector for that will start with the letter a If you think about it for a sec, it will make sense. Our hyperlinks start with <a
Like our paragraph tag started with <p
a {
a img {
a:visited {
a:hover { I've commented the links above though I'm sure you already knew what each one was for. Since we have several things behaving the same, there is no reason to place each in it's own css open and close tags. We can define more than one selector per line as long as we want the properties and values to be the same. Let's do this again.
a, a:visited {
a img {
a:hover { We can add as many selectors as we like, just separate each with a comma. When looking through a style.css file, often you will see many selectors on one line like this piece I copied from the Wordpress default theme.
h3 a, h3 a:hover, h3 a:visited { This is defining that we want all h3 heading tags which are linked to be blue, also that the link should be blue when hovered over or visited. What if we wanted the link to turn red when hovered over? We can just peel the h3 a:hover out of that line and place it on it's new line or add it into another line that already had the property and value that we wanted applied. New line with h3 a:hover removed
h3 a, h3 a:visited { New line defining h3 a:hover
h3 a:hover{ Now, any linked heading 3 will turn red when hovered over. This gives you complete control over your properties and values. Just because a line has several selectors doesn't mean they have to stay there. Strip out the ones you want to have different properties and/or values and define them separately. So far, we've been talking about basic html tags that are being defined, such as the paragraph, hyperlinks, headings, etc.. But what happens when we want <H1> headings or <p> paragraphs to appear differently in different sections of our page? That's easy! We use CLASSES!! That's right, we'll sit all of our little css monsters at little desks and line them up in neat rows and stand in front of the chalkboard. No, no, no. Not that kind of class. Let's take a peek at our Wordpress default theme style.css file which you received with this ebook. I'm going to grab some css code from there and paste it below.
h2 {
h2.pagetitle { You see here the h2 selector with the margin set at 30px. Every time there is a <H2> on the page, this will affect it. BUT... if we want our <H2> to appear differently someplace else, we can tell it that this is different than the normal <H2> tag and to apply different properties and values by defining it with a class! In your web pages html you would add this to your <H2> tag. <H2 class="pagetitle"> The same would apply if we want paragraphs to look differently. Also, remember that the style sheets are cascading, meaning the fall together. So if you were wanting to change the text alignment on your <h3> tag, you might find a line like the following in your style sheet...
h3 { ... and add the property and value there, like this...
h3 { If that doesn't make the change on your page, then it is likely that the text-align property has already been defined for the h3 tag somewhere else. The quickest way to see is just user your “find” in what ever text editor you are using and search for h3. You should be able to scan through and see what properties and values are defined and where. Remember, if the selector you want to change is already grouped together on a line with other selectors for the properties you want to alter, just peel it out and create a new entry or add the change to another existing entry. Sometimes, you may want one of your selectors, like the paragraph to do something different like align right instead of left. This is easy to do by assigning a new paragraph selector like..
p.right { It could also look like p.right {text-align: right} Remember, the opening and closing tags can be on the same line, they are just usually broken apart to make reading easier, especially when you have multiple properties and values defined. In your html, for the area you wanted to align right, you would just tell it to use those properties and values by calling the p.right class. <p class="right"> That paragraph will now align to the right instead of whatever your p selector is defined as default. The p. is placed in front of the right because it is still working off of the paragraph <p> in your html. The same would apply to any sub settings you wanted to define for any of your other html elements like..
h1.sample Then just call that call in the associated html element by placing the class= tag and the portion that comes after the period. For our h1.sample, we would change our <h1> tag to this... <H1 class="sample"> Sometimes you may see selectors like this... .storycontent ... that aren't a normal html tag. That is perfectly fine. Using the class=, those properties and values are applied the same as the other was by using a DIV tag. The DIV tag? Stop! Don't panic, thinking you must have scrolled past the section where we discussed DIV tags because you didn't. There, you can relax and take a deep breath! The div tag is used to define a section in your document. Keep in mind that a break <br> will usually be inserted automatically after the closing div tag. These will usually be used where no preset html tags exist such as the <p> or <h1> tags and will allow you even greater control of your page. Going back to my custom Wordpress theme, there are several sections which use the .storycontent selector above. This is the section where the actual blog content is posted for this particular them and there are several properties and values assigned to this. Here is a little copy and paste from that themes style.css Remember, this is just a part of it that we will stare down.
.storycontent,
.storycontent a {
.storycontent a:hover, You are probably able to look at the above styles and understand what properties and values have been assigned to these selectors. If so, congratulations! You should pat yourself on the back for being such a good student! If not, don't be discouraged. We've covered quite a bit and may take reading through a couple of times, actually practicing with this on your own test pages and viewing the style.css file of your blog if you have one before things start to fall into place for you. In my custom themes index.php page, the following tag can be seen. <div class="storycontent"> Everything between the opening <div> and closing </div> will be affected by the selectors starting with .storycontent in the above style. For example, any hyperlinks falling between the opening and closing div tags above will be affected by this storycontent a This section...
.storycontent a:hover, ... tells us that all links hovered over and visited withing those div tags will behave the same. Since css is cascading, and no link color has been defined, it will use the color from the... storycontent a which is color: #333 If we wanted the hover and visited links to have a different color, we would do what? That's right, just define it by adding that property and value to that section like...
.storycontent a:hover, We could go a step further and have the hover and visited different by splitting them up into their own sections. We could then go on to make the hover link expand into all caps and increase size by 140% and change font families and other things by setting those properties and values. In place of div tags, we can also use span tags. This comes in really handy if you just want to alter one character, a word or a line of text quickly without adding a break afterwards like the div tag does. Here is an example of how you would use it. <p>You are writing something here and it is using the default style set for the paragraph but you want to <span style="color:#0000FF;">make a few words blue</span> so you overwrite the paragraph style temporarily with the span style</p> We could also have changed the font size or numerous other things. By now, hopefully some of the fog is lifting and you are able to start seeing your style sheets in a different way. Able to look through and tell what sections are affecting what. Because it would be impossible to go over every possible combination without filling up phone books full of text, which I think there are some CSS books that do exactly that, I want to help put your mind in a place where you are able to look through a web page, find the selectors, class= and then search through your style sheet to find the section that is affecting it. Because so many of us operate weblogs and with Wordpress being as popular as it is, I want to spend a minute going over it with you. When you are editing your Wordpress style.css, the sections are pretty well commented to help you locate the selectors which most directly affect that section of your page. Here are the section comments from the Default Wordpress Theme.
/* Begin Typography & Colors */ When wanting to make changes to your template, first determine what section you are wanting to change. Is it the header, the way images are displayed, the sidebar, or basic colors? You can then scroll through your style.css file a little quicker when you know what section the style is most likely located in. You do have to keep in mind how any changes you make may affect the rest of the page. If you have three columns and you increase the size of your right sidebar by 30px, you may want to decrease the size of your left sidebar or the main, content column by 30px to allow your page to fit on the screen the same. Don't be afraid to experiment! Just save your existing stylesheet under a different file name like style-BACKUP.css and if things get out of hand, you can put everything back to it's original condition quickly. Now, I don't expect everyone that has gotten to this point to rush out and apply for jobs as css designers for the top Fortune 500 and software development companies but I do hope that you have a good concept of how things work and won't be afraid to get in there and get their hands dirty, make a few changes and see how things change what.
1. Introduction to cascading style sheets - 2. Inline cascading style sheets - 3. Internal cascading style sheets - 4. External cascading style sheets Copyrighted |
