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.
CSS is written in the following format.
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.CSS
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.CSS
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.CSS
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.CSS
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. CSS
<p class="info">sample text</p>
You can use your own id and class names. Just remember to make sure that the class or id name you use in the HTML matches what you've written in the CSS.
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-familyspecifies the font to be used
font-family: arial;times new roman, georgia, arial, etcfont-sizespecifies the size of the text
font-size: 12px;insert a valuefont-stylestyles text as italic or normal
font-style: italic;normal, italicfont-weightstyles text as bold or normal
font-weight: bold;normal, boldcolorsets the text colour
color: #000000;insert a hex valueletter-spacinginserts space between letters
letter-spacing: 2px;insert a valuetext-alignaligns text
text-align: right;left, right, center, justifytext-decorationstrikes out or underlines text
text-decoration: none;none, underline, line-throughtext-transformsets text to uppercase or lowercase letters
text-transform: uppercase;uppercase, lowercase
Designbackground-colorsets the background colour
background-color: #ffffff;hex value, transparentbackground-imagesets a background image
background-image: url(http://website.com/bg.png);insert your image URL.background-repeatrepeats background image / used with background-image property
background-repeat: repeat-x;repeat, repeat-x, repeat-y, no-repeatbordercreates a border around an element
border: 1px solid #4f4f4f;solid, dotted, dashedborder-radiuscreates rounded border corners / used with border property
border-radius: 5px;insert a value
Layoutmargincreates space around the outside of an element
margin: 10px auto 10px auto;insert a value for each side (top-right-bottom-left)paddingcreates space inside an element
padding: 10px auto 10px auto;insert a value for each side (top-right-bottom-left)floatfloats an element left or right
float: left;left, rightpositionspecifies the type of positioning used for an element
position: absolute;absolute, relativewidthsets the width of an element
width: 50px;insert a valueheightsets the height of an element
height: 50px;insert a valuedisplayspecifies what type of box to use for an element
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.
are used to define layout and styles. Tag names are enclosed in angle brackets and usually come in pairs consisting of an opening tag and closing tag. The closing tag includes a forward slash before the tag name.
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.
Helpful LinksdeviantART Customisation FAQA list of the most frequently asked questions regarding customising your deviantART account. Answers include information and instructions.Basic HTML Formatting GuideA quick guide to formatting content with HTML.w3schoolsA comprehensive information resource covering all aspects of HTML.Hex and RGB values Get hex and rgb numbers for any colourGoogle FontsA collection of Open Source fonts you can use on your pages for free.