Margins and Padding

Margins and Padding


For example, if you want a 10px margin all‐around, do this:
    margin: 10px;

If you want only the right and left to be 10px, it’ll look like this:
    margin: 0 10px 0 10px;

Remember that respectively just a little higher? As opposed to using four properties like:
    margin-top: 0px; 
    margin‐bottom: 5px; 
    margin-left: 10px; 
    margin-right: 15px;

You can do this instead, it’ll give the same result:
    margin: 0px 15px 5px 10px;

Always remember that when you use 4 values for the one property, it’s always in this order: top, right, bottom and left. In this example I used the margin property, but this applies to the padding property as well. That’s pretty much all there is on how to use margins and padding.

Read more »

Colours and Background

Colours and Background

• colour: Specifies the foreground (text and border) colour. 
• Possible values: [color]. 
• Example: color: #000000; 
• background: Combines the following properties into just one. I only use it to make the background transparent. 
• Possible values: transparent. 
• Example: background: transparent; 
• background-image: Adds and image, though url, and sets it as background to the div. 
• Possible values: url(). 
• Example: background-image: url(“http://www.url.com/image.jpg”); 
• background-repeat: Specifies how to repeat the background image within its containing element. 
• Possible values: no-repeat, repeat-x (repeat horizontally), repeat-y (repeat vertically) and repeat-xy (repeat horizontally and vertically). 
• Example: background-repeat: repeat-x; 
• background‐position: Specifies the position of a background image within its containing element. Made up of two values. 
• Possible values: Top, center, bottom & left, center, right. 
• Example: background‐position: top center; 

Read more »

Text and Fonts

Text and Fonts

• font family: Specifies the font name of a box. This can be a comma-separated list, of which the browser will use the first font it recognizes. Font names that are made up of more than one word must be placed within quotation marks. 
• Possible values: [font name] 
• Example: font-family: “Times New Roman”, Helvetica, Arial; 
• font-size: Specifies the size of a font. 
• Possible values: [size in em or pt]. 
• Example: font-size : 12pt; or font-size: 1.0em; 
• font-weight: Specifies the boldness of a font. 
• Possible values: lighter, bold, and bolder. 
• Example: font-weight: bold; 
• font-style: Specifies whether the text is italic or not. 
• Possible values: italic. 
• Example: font-style: italic; 
• text-align: Specifies the alignment of text inside a div. 
• Possible values: left, right, center and justify. 
• Example: text-align: center; 
• text-decoration: Specifies whether text is underlined, over‐lined or has a strikethrough. 
• Possible values: none, underline, overline, line-though. 
• Example: text-decoration: none; 

Read more »

CSS

CSS

I'm glad you asked, there's no point me telling you all about CSS unless you know how it works, and how it can benefit your website!

CSS (Cascading Style Sheets), were brought about by the World Wide Web Consortium (W3C), and not by evil programmers with too much time on their hands as originally believed, to develop a standard which could be interpreted by different browsers. This became a necessity as Microsoft and Netscape battled for world domination and kept adding html attributes which were only understood by their browser. Great for them, bad for us.

Now, through the implementation of CSS, we can design ONE website for all browsers instead of multiple websites, one for each browser. What started out as a way of standardizing the way code was displayed through basic things, like font and color tags, has quickly grown into something much more powerful, which makes sense because all of the not so evil programmers could now spend more time working on the one standard which could be understood by all browsers.

CSS can be utilized in your web pages a few different ways, lets have a look at them in the

next section.

Read more »