Click image to return to Mythodreas

Coding 101

HTML Guide
CSS Guide
More Effects

Backgrounds | Links | Visibility and Opacity | Boxes and Containers | Styling CSS

CSS


Unlike HTML which is strict when it comes to graphics and custom edits, CSS (Cascading Style Sheets) can add some extra pizzaz to your webpage (in this case your profile).Like with HTML where you end code with < and >, in CSS you end code with { and }. If you do not then your desired graphic will not show and, in some cases, your code will become a mess. This article will give you the basic code and description.
Backgrounds
The following is a basic background code . . . body{ background-color:BLACK; background-image: url("https://i.ytimg.com/vi/mQ9jyr4xZwg/maxresdefault.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; border: 10px solid black; padding: 35px; height: 100%; width: 100%; } Properties (Border and Padding are not always used for a full background image)


Color: Look at color examples and description in the HTML Guide. You can make a background a solid color instead of using an image. It's good practice to always include a background color... as the color loads first before a background image on profiles.

Image: Any image with a picture format extension (i.e. .jpg or .gif) that can be found on the internet can be used as a background (URL is the link of the picture).

Repeat: If you want the image to repeat on your profile then do "repeat," if you do not want the image to repeat then do "no-repeat." This would be used if your background image is a texture or illustration.

Attachment: How the image is when a user scrolls through your profile. There are five attachment properties.
Scroll: background scrolls along with the user. The image will not move.
Fixed: background is fixed and will follow the user when they scroll.
Local: background scrolls along with the profile's contents (not always used).
Initial: sets the background property to its default value, meaning that the image will be its normal size (not recommended/not always used).
Inherit: inherits the property from its parent (not recommended/not always used).

Position: Is either where the image is placed on the background of a webpage or what you want to be seen (depending on how it is used). You can do this with values/numbers or with words such as Center, Bottom Left, Top Right, Left, and etc.

Height and Width: Can be set to force the image to be a certain size. Having it be 100 will force it to be full size. This is not always recommended.

Border: This depends on if you have a border or table. The first value is the width/thickness of the border and this can be in pixels, em, or % size. The next property of borders is the color which can be with a color name, rgb, or hexadecimal.

Padding: Is the thickness inside the border, how much whitespace it takes up. This is not necessary, but adds a nice touch.


Now, why did we just put the background in a segment of code and name it "body?" Well, the body is the majority of your text or content on the webpage. Body can contain font color, background images, and other properties and effects. You can add font color in body if desired. See HTML Guide for more information about font colors.

Links a:link, a:visited { color: RED; font-size: 10; text-decoration: line-through; } a:hover, a:active { color: PURPLE; font-size: 8; text-decoration: line-through; }          
Link Properties
a:linka:visited a:hover a:active
This is for a link as it is seen. You can force a link to appear in a certain color, you can also have it where it is crossed out, bold, italicized, or underlined. You can even adjust the font type or size. See HTML Guide for text decoration information. If a link has been visitd or was visited before. If a cursor is hovering over a link, then you can add an effect. Active link is when the user is already at that page.

You can combine anything such as links with CSS, like the example above. This makes it easier and your code shorter. It also cuts down on uncessary steps. Remember, some sites will not allow certain link effects (you can have the code for it, but the site may not always show it because it is either blocked or the links are called something else so that you cannot change their color and othe features).

It is possible to make content invisible or have a lower opacity. Opacity can be a value between 0 and 1, 0 being invisible and 1 being visible (0.5 being neutral).

container{ color:#2C3539; font-family:GEORGIA; font-size:13; opacity: 0.5; font-variant: small-caps; }
This forces the navigation, top layout bar, and the profile bock to all be a certain color, font type, font size, and effect. See HTML Guide for more information about font. You can make items invisible, but it is against site conduct.
select,option,.emestar,.topbar,table,td,.navbar,.tablebg{ border:0 ; background:transparent }
The above example will make the profile blocks and comment wall invisible (comments and choice to do a status update will still be visible, but the white spaces will not show). This code cannot be applied to your profile; however, it is possible to make the layout on your homepage invisible. This is not suggested.


Now, let's talk about <div></div> It is used to group block elements in CSS, but is also used in HTML to define a division or section. For example, the following can either be considered CSS or HTML... and it it is an example of a scrollbox. It is a scrollbox that is 150x150 pixels in size, has a text size of 3, has a scrollbar, an invisible border, a background color, text color, and visible border. Overflow can be "auto" as well which will create scrollbars if the content in the box is too big for the set size.
Because we just put text as the content, if we used auto then there would be no scrollbars, but let's continue to use scroll. Keep in mind that you can put images in the scrollbox instead of text.
     
Boxes
HTML Result
<div style="width:150px;height:150px;line-height:3em; overflow:scroll;padding:5px; background-color:#FCFADD;color:#714D03; border:4px double #DEBB07;">text</div>
text



We're almost done. Next, to use CSS it is always a good practice and is suggested to be placed at the beginning of your HTML. Also, for CSS to work you must surround your CSS code with the style tags <style> and </style>. An example is the following:
<style> select,option,.emestar,.topbar,table,td,.navbar,.tablebg{border:0 ;background:transparent} body{ background-color:BLACK; background-image: url("https://i.ytimg.com/vi/mQ9jyr4xZwg/maxresdefault.jpg"); background-repeat: no-repeat; background-attachment: fixed; height: 100%; width: 100%; } a:link, a:visited { color: RED; font-size: 10; text-decoration: line-through; } </style>



If you forget these tags then your CSS will not work.