CSS is a style language used to define the style and formatting of web pages. It is used in conjunction with HTML.
If we think of HTML as the building blocks of the web then, essentially, CSS is the painter and decorator. Very simply, HTML defines the structure of the page and CSS defines the style.
What I'll be helping you with here is getting to grips with the basics of CSS. I'll be explaining how use CSS as well as providing a number of examples that you can use to style your own web pages and journals. All you need to do is copy/paste the code and replace the sample text with your own content. Along with the quick reference I've also written a brief glossary of terms and provided a list of useful links in case you wish to do some further reading.
A point of note is that while the information and examples I've given here apply to CSS use anywhere on the web, this guide itself is geared towards the use of CSS on deviantART. As such, and given that this has been created as a basic guide and quick reference, you may require further reading to make the most of CSS's capabilities.
As always, if you have any questions or problems just let me know.
The selector selects the element to be styled, the property defines the aspect of that element to be styled and the value defines the way the element will be styled. Let's look at a complete example to see how it works.
In this example we're saying that we want the colour (property) of all h1 (selector) elements to be dark grey (value).
You can specify a number of properties and values for the same element.
In the above example we're saying that we want the colour of all h1 elements to be dark grey and written in uppercase letters.
Now, CSS contains the information for styling elements but it can't act on it's own. HTML elements are needed to create content for those styles to then be applied to. Let's look at an example of how this works.
In the CSS we're saying that the h1 header elements should be dark grey. In the HTML we're declaring the sample text as a h1 element. The CSS will read the HTML <h1> tags and colour the text in-between them dark grey.
CSS on deviantART can be used in journal and gallery skins. For journals, the HTML will be written along with your normal journal text in the Sta.sh editor and the CSS will be written in the journal's Edit Skin area. For galleries, the HTML will be written in the description box and the CSS will be written in the Add CSS area.
Selectors determine the element to be styled. There are a number of different selector types you can use depending on the desired outcome.
Element Selectors target the content of HTML tags based on the element name. The example below says that all paragraph text should be dark grey.
id Selectors target the content of HTML tags based on a specified id. The id should be unique and used for a single element on the page. Id selectors are signified in CSS by a hash tag preceding the id name. The HTML element should include the text id="..." within the opening tag.
The example below says that paragraph text with the 'intro' id should be dark grey.
<p id="intro">sample text</p>
Class Selectors target the content of HTML tags based on a specified class name. Elements using the same class can be used multiple times on the page. Class selectors are signified in CSS by a full stop preceding the class name. The HTML element should include the text class="..." within the opening tag.
The example below says that any element with the 'info' class should be dark grey. In this case any <a> tag, <p> tag or any other tag including the 'info class' will be styled.
<p class="info">sample text</p>
The example below says that any paragraph text with the 'info' class should be dark grey. In this case only <p> tags including the 'info' class will be affected. <a> tags, for example, containing the 'info' class will not be styled.
<p class="info">sample text</p>
The reference list below gives examples of a number of common properties that you can use to style your pages and journals. Simply replace the green text in each example with your own values. If there are limited acceptable values for a property then the options are given underneath the example. Where a numerical or hex value are required you can enter any valid value.
font-family: arial;times new roman, georgia, arial, etc
font-size: 12px;insert a value
font-style: italic;normal, italic
font-weight: bold;normal, bold
color: #000000;insert a hex value
letter-spacing: 2px;insert a value
text-align: right;left, right, center, justify
text-decoration: none;none, underline, line-through
text-transform: uppercase;uppercase, lowercase
background-color: #ffffff;hex value, transparent
background-image: url(http://website.com/bg.png);insert your image URL.
background-repeat: repeat-x;repeat, repeat-x, repeat-y, no-repeat
border: 1px solid #4f4f4f;solid, dotted, dashed
border-radius: 5px;insert a value
margin: 10px auto 10px auto;insert a value for each side (top-right-bottom-left)
padding: 10px auto 10px auto;insert a value for each side (top-right-bottom-left)
float: left;left, right
position: absolute;absolute, relative
width: 50px;insert a value
height: 50px;insert a value
display: none;none, inline, block
CSS (Cascading Style Sheet) is a style language used to define the style and formatting of web pages.
HTML (HyperText Markup Language) is a markup language used to create web pages.
Selectors specify the element to be styled. Below we are selecting all h1 header elements to be styled.
Properties are the different aspects of style that can be defined. Below we are defining the colour of all h1 header elements.
Values define the way elements are styled. Below were are saying we want all h1 header element to be dark grey.
URL (uniform resource locator) refers to the specific location of an item on the internet. It is also refered to as a web address and is used to identify and link to specific pages and content.
Hex codes are a string of six digits and letters preceeded by a hash tag used to define a certain colour.
CURRENTLY FIXING COMMISSION JOURNAL
Pixel Icon Commission | CLOSED STATUS: CLOSED
Thank you guys, that was really quick.
CLOSED ALL WAIT LIST CLOSED. I WILL TRY MY BEST TO FINISH THEM ASAP~!
Hello, thank you everyone for your patience! I've finally had the chance to open a few slots.
Please continue and read everything below! I will have 4 slots open.
2 icons max per slot.
1 slot per commissioner for now.
Fee's are now included in the icon price.
***When sending through PayPal, please DO NOT click the shipping option.***
7 USD per icon
11 USD per icon
+ blinking included
+ 2 USD for extra animation (I may reject extra animation if it isn't within my comfort zone)
(no extra animations