Circuit
[cd=font-weight: bold; font-style: italic; backgro
- 4,815
- Posts
- 17
- Years
- Berlin
- Seen Jan 6, 2021
Good morning class!
Welcome to your official class on CSS within PC. This is my first time actually really teaching so bear with me! First things first, let's have that register!
Spoiler: Rolecall!
What Actually is CSS?
This box was made using CSS
CSS stands for Cascading Style Sheets and is a simple way to add styles to web documents and pages. On PC, CSS is used to improve the appearance of threads, posts, signatures, profiles, blogs and even usertitles to some extent. CSS instructs your web browser how it should display various elements on your screen. What colours, fonts, positions and images should be displayed and how. For example the box to the right of this text block here was made using CSS telling your browser to display a box with a background color of #EEEEEE and a black border right of this text, with text inside it.
So where should we begin?
Well, the beginning is usually the best. But in this case, what constitutes the beginning? There's no real 'entry point' when it comes to CSS, but there are definitely ways to make your life easier when it comes to learning it. First things first you need to understand the codes you'll be using, before you implement them. I'm going to give you all a few codes to learn and get your heads around. If you don't understand how these work after I've explained, don't hesitate to message me or ask here for more help. CSS is quite a complicated subject.
- 'background-color:' - this sets the colour that will fill the box, behind everything else within the box. Normally colours used will be in Hexadecimal format, which is the format using an octothorpe followed by six digits, from 0-9 and a-f. For example, the colour white would be #FFFFFF. I wont go into the details of hexadecimal colours, since that's a different subject entirely. You can look up colours and their hexadecimal codes very easily mind you, so it's not something you need to know.
- 'width:' and 'height:' - these two values will set how large your box is. The values used can be 'auto' which decides a value based on defaults for the code your browser has, a value in px which tells the browser how many pixels wide and high to display the box or a value in % which takes up that percentage of width/height from your screen's resolution.
- 'border:' - this code controls the border that can surround the box you are creating. This code is used when grouping multiple specifications for the border into one. For example, a border code could look like this: border: 2px solid #000000; which would create a border two pixels thick, that is a solid line and is the colour black. Solid can be changed for dashed, dotted, inset and outset to produce different border styles.
- 'font-size:' - this is used, quite obviously, to control the size of the text inside the box. The sizes can be arranged in px, or in em where 1em = 16px. This is especially handy when dealing with large headers.
- 'background-image:' - this can be swapped with background-color to have an image as your background instead.
- 'color:' - this will colour your text using the hexadecimal colours.
How to begin using these codes
Firstly you should know of the two vBulletin codes that PC uses to signify the use of a CSS code. They are [cd=][/cd] and [div=""][/div]. Both are acceptable, however out of personal preference, I always use [cd=][/cd] due to the convenience of not needing "" to surround the code. After the = you would then place a chain of codes, separated by a semicolon ; indicating the start of the next code. A colon : indicates the start of a value for the current code. Values will relate to the code used, and only certain values will work, while anything else will break the code you used. For the codes I listed earlier, I will now put a list of values to go with them.
- 'background-color:' - #000000 - #FFFFFF
- 'width:' and 'height:' - auto, 0-999999px, 0-100%
- 'border:' - this has three values. 1st: 0-999999px (designating the thickness of the border); 2nd: solid, dashed, dotted, inset, outset (designating the style of the border); 3rd: #000000 - #FFFFFF (designating the colour of the border). Leave a blank space between each value.
- 'font-size:' - 0-999999px. Bear in mind the font size I am using is 14px for regular text.
- 'background-image:' - url('<url>'), none, initial, inherit. Most of the time, you'll be using the url value, and if not then you simply will not use 'background-image:'
- 'color:' - #000000 - #FFFFFF.
For example, to create a black box with an exclamation mark in, we could use this code:
[cd= width:50px;height:50px;background-color:#000000;]![/cd]
which would result in
Of course this can be tweaked around with many more codes to look much better, for example placing the exclamation mark in the center of the box. But we'll come to that in due time. To start off with, pixel widths and heights are easier to learn, because percentage widths sometimes can behave unexpectedly when put with certain other codes. Pixel widths rarely pose any issues. I almost always set heights to 'auto' unless I am using an overflow code, which we will cover later on.
[cd= width:50px;height:50px;background-color:#000000;]![/cd]
which would result in
!
Of course this can be tweaked around with many more codes to look much better, for example placing the exclamation mark in the center of the box. But we'll come to that in due time. To start off with, pixel widths and heights are easier to learn, because percentage widths sometimes can behave unexpectedly when put with certain other codes. Pixel widths rarely pose any issues. I almost always set heights to 'auto' unless I am using an overflow code, which we will cover later on.
Homework!
Because what class would be complete without it? For now, I'd like you to post the code you think would make a box filled with black, with a white 2px border. This box would be 200px x 200px and would contain white text, which says 'homework'. You should not actually post the finished product, just the code.
If you don't know how to do this, type out your code then put [noparse][/noparse] around the entire code. Your code should be your own, and I will correct any mistakes, and build upon them in the next lesson!
If you don't know how to do this, type out your code then put [noparse][/noparse] around the entire code. Your code should be your own, and I will correct any mistakes, and build upon them in the next lesson!
Last edited:
