Beginners Guide to CSS (for Expressive)
This is a basic introduction to CSS. I assume, here, that you already know some basics of html, like what a div is and how an image tag looks, because if you don't that's the first thing you need to learn and that's a different guide. This guide deals with what CSS does, the parts of it, and what you're seeing when people give you CSS code to copy and paste.
What Is CSS?
CSS stands for Cascading Style Sheets.
"Style" refers to a set of layout commands that affect how bits of html are displayed, for example whether an image is on the left or right side of the page, or what color the background of a particular area is. In this case, the image is the html element; its position on the page is the layout feature. Likewise, the table or div is an html element, while the background color is a layout feature. CSS is not html, it is something that talks about html. A style statement tells the browser how to display the html elements on a webpage.
To put it another way, CSS cannot change the content of the text that shows up on your page, such as the names of the sidebar sections. The actual text is html, and that can only be changed with the S2 code, which generates html. CSS can change the color of the text, or its size, or position, or what background image shows up behind it.
"Sheet" refers to how the style commands are written. A style sheet is usually a separate document that is linked to the web page, or a set of commands in the header of a web page set inside the < style > tag. You can have a style command inside the tag of an html element, or you can have them in a sheet. At the tag level, the style command only applies to that one element. In a sheet, you can apply style commands to sets of elements--that is, not just one image but every image on a page. When you type CSS code into the Custom CSS box, in the customization page of LJ, it is automatically converted to a style sheet in the header of your journal pages.
Practically speaking, the "Cascading" part refers to the rule of CSS, that the most specific command wins. If a style sheet says that all images sit on the left, and then you write a style statement into the tag of one particular image, telling it to sit on the right, then the tag-level style is the one that takes effect for that image. If you have an external style sheet linked to an html page, and then put another sheet in the header of that page, then anything in the header sheet takes precedence, even if it conflicts with what's in the external sheet. Thus, the "cascade" of style sheets runs from least to most specific, conflicting commands being resolved as it goes.
Generally, people use CSS to mean any style statement. All of the Expressive themes have several external style sheets linked to them: the base style sheets and the theme-specific style sheets.
Syntax
As I said above, CSS talks about html, or, more precisely, applies to it. The parts of a style statement are 1. the html element (eg an image tag) 2. the layout feature (eg the position of the image) and 3. the definition of the layout feature (eg right or left or centered). The layout feature and its definition are separated by a colin : and multiple features that you want to apply to the same html element are separated by a semi-colin ; (for example float:right ; border:thin).
When style statements are put into the tag of a particular html element, then number one doesn't need to be stated, it's already self-evident. The style applies only to that element. That looks something like this:
< img src="filepath.jpg" style="border:1; float:right;" / >
As you can see, a style statement at this level follows html syntax, with the equal sign and the quotation marks. The browser will also interpret numbers as pixels automatically.
When style statements appear in sheets, they look a bit different. For one thing, the html elements need to be defined. For another, sets of layout features are enclosed in curly braces { } . That looks like this:
img { border: 1px; float: right; }
In a sheet, you must always specify what units you are giving numbers in, whether pixels (px) or ems (em) or inches (in), etc. White-space doesn't matter in a style sheet, so you can space your commands out any way you like, as long as you have the right punctuation. One common way to list multiple layout features is with each on its own line, like so:
img {
border: 1px;
float: right;
margin: .25em;
}
If you copy and paste code that's typed out like this, be sure you copy that last curly brace. It's easy to miss, and the code won't work without it.
What Are Classes and Ids?
I said above that a style sheet can apply layout commands to whole sets of html elements. With CSS, though, you are not limited to just the elements like img, div, table, li and so on, that come with the html. You can also make categories of your own. These categories you make are called classes. For example, you could make a class called "righthand" to make elements sit on the right side of the page. That would look like this:
.righthand { float: right; }
The period (.) is how you indicate in a style sheet that something is a class. Now any element you apply that class to will sit on the right side of the page. To apply a class, you put class="righthand" inside the tag of the elements. For example, < img class="righthand" src="filepath.jpg" / > and < div class="righthand" > and < ul class="righthand">. This will produce an image, a box and an unordered list, all sitting on the right of the page.
If you want to make a single part of a class act differently for a specific element, you can specify an html element in relation to a class. For example, you might write:
.red { border: thin solid red;
float: right; }
ul.red { float: left; }
This means that everything with a class of "red" will have a thin red border around it and sit on the right, except for an unordered list. An unordered list with a class of "red" will have the red border, but will sit on the left. The most specific command wins, and an element-plus-class statement is more specific than a class alone. This is the one place where white-space makes a difference. Do not leave any spaces between the html element and the name of the class. Do, however, always remember the period that says "this thing is a class" to the browser.
Another thing you can create yourself is an id. Where a class is a set of things, an id is a singe thing. If you want to have a lot of different elements all displaying in a given way, you make a class. If you want to have one, unique item displaying in a given way, you make an id. Menu links, for example, will often be created as ids, as will divs that are supposed to contain different parts of the page. The statement for an id looks like this:
#maincontent { background: #ffeedd; }
An id is indicated with a hash mark (#). As you may have noted, though, a color code is also indicated with a hash mark; there are only so many marks and some of them have to get reused. A hash outside of the curly braces means an id. One inside of the curly braces means a color. When you apply the id to the html, you do it much like a class and put id="maincontent" into the tag of the element in question.
CSS comes in two parts. Classes and ids are created in a style sheet. You must put the class="classname" or id="idname" statement into the html document before it will work, though. In the case of the Expressive layout, all the classes and ids are already in the html, generated by the S2 code. What even beginners can do is take those classes and ids and write layout commands for them.
In the Expressive layouts, many of the whole-page containers, such as "page" and "content" and "alpha" and "beta" are ids. The entry containers such as "asset" and "asset-body", on the other hand, are classes, because they will be used over and over in a single page. There is no difference in how the layout commands themselves are stated, but you will have to make sure you are using the right mark (either period or hash) when you write style commands for different parts of the page.
Pseudo-classes
One kind of class is both pre-made, and has a different way of being written. These are called "pseudo-classes". You will most often see them applied to a link. A style command for a link is written:
a { color: #550000; }
Psuedo-classes such as "active", "visited" and "hover" define how that link will act when you click on it, or move your mouse over it. A pseudo-class is written:
a:visited { color: #005500; }
Now the link will be red until it's clicked and green after it's clicked. Note that a colin is used to connect the html element (a) and the class (visited), rather than the period used by classes you create. When you use a pseudo-class always remember to use the colin.
Nested Classes and Ids
Now, in a layout like Expressive, there are a whole lot of divs inside of each other, and each one has a class or id. In most cases you can ignore any enclosing divs and just write commands for the classes and ids you want to change. When a single class appears inside of different classes or ids, however, you may need to list out the whole string of class names in order to make a particular bit of html display the way you want. For example, the class "widget-content" appears in each section of the sidebar, but the sections themselves have separate classes. So, if you wanted to center the profile section but not any of the other sections, you could write:
.widget-content { text-align: left; }
.about-me-widget .widget-content { text-align: center; }
This tells the browser that everything inside "widget-content" that is also inside "about-me-widget" should be centered. Remember, the most specific command wins.
Where To Put Your CSS
There are two basic ways provided for you to add your own CSS to the Expressive layout. Both are on the Custom CSS page. To find this, go to your profile page, or the LJ start page, or your My LJ page or somewhere else that shows the site navigation menus. Find the link for customizing your journal. This may be under Journal or Customize and may say Customize or Edit Your Journal. It should take you to a page with a selection of tabs for "Basics", "Look and Feel", "Custom Options" and "Advanced". Click on the tab for "Custom Options".
This will open up another set of menu options below the tab. Click on the one furthest to the right that says "Custom CSS". There are three options on this page. The second and third are where you can add your own CSS. If you have a place to host documents online, you can upload a separate style sheet and then enter the url into the "Custom external style sheet url" box. If not, then you can enter your style sheet, however large or small, into the "Custom style sheet" window.
If you happen to do both, remember that the style commands in the "custom style sheet" window will be written into the page headers, and will therefore be more specific than the commands in your external style sheet.
Important Note
Unless you disable the base style sheet (the first option in the Custom CSS dialogue window) you will have at least three and probably five external style sheets linked to your journal pages. The base style has three sheets, and each theme has at least one more, sometimes two or even three. Any CSS code you add will take precedence over those. However, if the style commands in any of those sheets are more specific than the ones you use, then they will take precedence. So if, for example, you write in:
a { color: #660000; }
while one of the other style sheets contains the code:
a:active, a:visited, a:hover { color: 000000; }
then only your unclicked link text will be red, the way you told it to be. Link text that is clicked, has been clicked, or has a mouse over it will still be black, because element-plus-class is more specific than class alone, even if it is in a style sheet that's "upstream".
If you want to check the style sheets associated with the theme you have chosen, and see what they say so you can make sure you're overriding the right things, see this entry.
Other Resources
W3school's Introduction to CSS. Offers some background for understanding what the whole thing is about and why it looks like this. Tutorials are also available on this site.
W3.org's CSS Tutorial. Walks you through how to write a basic style sheet; this touches on some of the html elements used a lot in the Expressive layout. It also gives some addition links to more in-depth pages at the bottom.
And if you really get bitten by the CSS bug, you can find a list of more in-depth sources at Owen Briggs' CSS Panic Guide.
What Is CSS?
CSS stands for Cascading Style Sheets.
"Style" refers to a set of layout commands that affect how bits of html are displayed, for example whether an image is on the left or right side of the page, or what color the background of a particular area is. In this case, the image is the html element; its position on the page is the layout feature. Likewise, the table or div is an html element, while the background color is a layout feature. CSS is not html, it is something that talks about html. A style statement tells the browser how to display the html elements on a webpage.
To put it another way, CSS cannot change the content of the text that shows up on your page, such as the names of the sidebar sections. The actual text is html, and that can only be changed with the S2 code, which generates html. CSS can change the color of the text, or its size, or position, or what background image shows up behind it.
"Sheet" refers to how the style commands are written. A style sheet is usually a separate document that is linked to the web page, or a set of commands in the header of a web page set inside the < style > tag. You can have a style command inside the tag of an html element, or you can have them in a sheet. At the tag level, the style command only applies to that one element. In a sheet, you can apply style commands to sets of elements--that is, not just one image but every image on a page. When you type CSS code into the Custom CSS box, in the customization page of LJ, it is automatically converted to a style sheet in the header of your journal pages.
Practically speaking, the "Cascading" part refers to the rule of CSS, that the most specific command wins. If a style sheet says that all images sit on the left, and then you write a style statement into the tag of one particular image, telling it to sit on the right, then the tag-level style is the one that takes effect for that image. If you have an external style sheet linked to an html page, and then put another sheet in the header of that page, then anything in the header sheet takes precedence, even if it conflicts with what's in the external sheet. Thus, the "cascade" of style sheets runs from least to most specific, conflicting commands being resolved as it goes.
Generally, people use CSS to mean any style statement. All of the Expressive themes have several external style sheets linked to them: the base style sheets and the theme-specific style sheets.
Syntax
As I said above, CSS talks about html, or, more precisely, applies to it. The parts of a style statement are 1. the html element (eg an image tag) 2. the layout feature (eg the position of the image) and 3. the definition of the layout feature (eg right or left or centered). The layout feature and its definition are separated by a colin : and multiple features that you want to apply to the same html element are separated by a semi-colin ; (for example float:right ; border:thin).
When style statements are put into the tag of a particular html element, then number one doesn't need to be stated, it's already self-evident. The style applies only to that element. That looks something like this:
< img src="filepath.jpg" style="border:1; float:right;" / >
As you can see, a style statement at this level follows html syntax, with the equal sign and the quotation marks. The browser will also interpret numbers as pixels automatically.
When style statements appear in sheets, they look a bit different. For one thing, the html elements need to be defined. For another, sets of layout features are enclosed in curly braces { } . That looks like this:
img { border: 1px; float: right; }
In a sheet, you must always specify what units you are giving numbers in, whether pixels (px) or ems (em) or inches (in), etc. White-space doesn't matter in a style sheet, so you can space your commands out any way you like, as long as you have the right punctuation. One common way to list multiple layout features is with each on its own line, like so:
img {
border: 1px;
float: right;
margin: .25em;
}
If you copy and paste code that's typed out like this, be sure you copy that last curly brace. It's easy to miss, and the code won't work without it.
What Are Classes and Ids?
I said above that a style sheet can apply layout commands to whole sets of html elements. With CSS, though, you are not limited to just the elements like img, div, table, li and so on, that come with the html. You can also make categories of your own. These categories you make are called classes. For example, you could make a class called "righthand" to make elements sit on the right side of the page. That would look like this:
.righthand { float: right; }
The period (.) is how you indicate in a style sheet that something is a class. Now any element you apply that class to will sit on the right side of the page. To apply a class, you put class="righthand" inside the tag of the elements. For example, < img class="righthand" src="filepath.jpg" / > and < div class="righthand" > and < ul class="righthand">. This will produce an image, a box and an unordered list, all sitting on the right of the page.
If you want to make a single part of a class act differently for a specific element, you can specify an html element in relation to a class. For example, you might write:
.red { border: thin solid red;
float: right; }
ul.red { float: left; }
This means that everything with a class of "red" will have a thin red border around it and sit on the right, except for an unordered list. An unordered list with a class of "red" will have the red border, but will sit on the left. The most specific command wins, and an element-plus-class statement is more specific than a class alone. This is the one place where white-space makes a difference. Do not leave any spaces between the html element and the name of the class. Do, however, always remember the period that says "this thing is a class" to the browser.
Another thing you can create yourself is an id. Where a class is a set of things, an id is a singe thing. If you want to have a lot of different elements all displaying in a given way, you make a class. If you want to have one, unique item displaying in a given way, you make an id. Menu links, for example, will often be created as ids, as will divs that are supposed to contain different parts of the page. The statement for an id looks like this:
#maincontent { background: #ffeedd; }
An id is indicated with a hash mark (#). As you may have noted, though, a color code is also indicated with a hash mark; there are only so many marks and some of them have to get reused. A hash outside of the curly braces means an id. One inside of the curly braces means a color. When you apply the id to the html, you do it much like a class and put id="maincontent" into the tag of the element in question.
CSS comes in two parts. Classes and ids are created in a style sheet. You must put the class="classname" or id="idname" statement into the html document before it will work, though. In the case of the Expressive layout, all the classes and ids are already in the html, generated by the S2 code. What even beginners can do is take those classes and ids and write layout commands for them.
In the Expressive layouts, many of the whole-page containers, such as "page" and "content" and "alpha" and "beta" are ids. The entry containers such as "asset" and "asset-body", on the other hand, are classes, because they will be used over and over in a single page. There is no difference in how the layout commands themselves are stated, but you will have to make sure you are using the right mark (either period or hash) when you write style commands for different parts of the page.
Pseudo-classes
One kind of class is both pre-made, and has a different way of being written. These are called "pseudo-classes". You will most often see them applied to a link. A style command for a link is written:
a { color: #550000; }
Psuedo-classes such as "active", "visited" and "hover" define how that link will act when you click on it, or move your mouse over it. A pseudo-class is written:
a:visited { color: #005500; }
Now the link will be red until it's clicked and green after it's clicked. Note that a colin is used to connect the html element (a) and the class (visited), rather than the period used by classes you create. When you use a pseudo-class always remember to use the colin.
Nested Classes and Ids
Now, in a layout like Expressive, there are a whole lot of divs inside of each other, and each one has a class or id. In most cases you can ignore any enclosing divs and just write commands for the classes and ids you want to change. When a single class appears inside of different classes or ids, however, you may need to list out the whole string of class names in order to make a particular bit of html display the way you want. For example, the class "widget-content" appears in each section of the sidebar, but the sections themselves have separate classes. So, if you wanted to center the profile section but not any of the other sections, you could write:
.widget-content { text-align: left; }
.about-me-widget .widget-content { text-align: center; }
This tells the browser that everything inside "widget-content" that is also inside "about-me-widget" should be centered. Remember, the most specific command wins.
Where To Put Your CSS
There are two basic ways provided for you to add your own CSS to the Expressive layout. Both are on the Custom CSS page. To find this, go to your profile page, or the LJ start page, or your My LJ page or somewhere else that shows the site navigation menus. Find the link for customizing your journal. This may be under Journal or Customize and may say Customize or Edit Your Journal. It should take you to a page with a selection of tabs for "Basics", "Look and Feel", "Custom Options" and "Advanced". Click on the tab for "Custom Options".
This will open up another set of menu options below the tab. Click on the one furthest to the right that says "Custom CSS". There are three options on this page. The second and third are where you can add your own CSS. If you have a place to host documents online, you can upload a separate style sheet and then enter the url into the "Custom external style sheet url" box. If not, then you can enter your style sheet, however large or small, into the "Custom style sheet" window.
If you happen to do both, remember that the style commands in the "custom style sheet" window will be written into the page headers, and will therefore be more specific than the commands in your external style sheet.
Important Note
Unless you disable the base style sheet (the first option in the Custom CSS dialogue window) you will have at least three and probably five external style sheets linked to your journal pages. The base style has three sheets, and each theme has at least one more, sometimes two or even three. Any CSS code you add will take precedence over those. However, if the style commands in any of those sheets are more specific than the ones you use, then they will take precedence. So if, for example, you write in:
a { color: #660000; }
while one of the other style sheets contains the code:
a:active, a:visited, a:hover { color: 000000; }
then only your unclicked link text will be red, the way you told it to be. Link text that is clicked, has been clicked, or has a mouse over it will still be black, because element-plus-class is more specific than class alone, even if it is in a style sheet that's "upstream".
If you want to check the style sheets associated with the theme you have chosen, and see what they say so you can make sure you're overriding the right things, see this entry.
Other Resources
W3school's Introduction to CSS. Offers some background for understanding what the whole thing is about and why it looks like this. Tutorials are also available on this site.
W3.org's CSS Tutorial. Walks you through how to write a basic style sheet; this touches on some of the html elements used a lot in the Expressive layout. It also gives some addition links to more in-depth pages at the bottom.
And if you really get bitten by the CSS bug, you can find a list of more in-depth sources at Owen Briggs' CSS Panic Guide.