Last Updated on March 31, 2018 by WebsiteDesigner.sg
If you’re just starting out in the world of programming, coding and other things that often seem like computer magic, you’re not alone. Every day, more people are discovering the value of obtaining at least a basic understanding of these “languages.” Read on for the basics of CSS.
What and Why
In the simplest terms, CSS is the presentation of an HTML website. Think of it this way – if HTML is a store full of goods and merchandise, CSS is the way that merchandise is set up on racks, bins and other types of displays. CSS stands for Cascading Styles Sheets. Without CSS, websites wouldn’t look very nice – they’d just be row after row of raw data.
Where HTML is formatted within <brackets>, CSS follow this format: property : value.
How CSS Affects HTML
There are three ways CSS can be applied to HTML. The first is called Inline, and these directions are directly inserted within an HTML tag or attribute bracket. These only affect the tag or attribute they are inserted into. For example, an inline application to a line of text could turn that line purple instead of standard black.
Internal applications are much the same as Inline, but work on an entire page. Following the same example, you could turn an entire page of text purple.
Most freelance web designer singapore prefer keeping CSS and HTML separate. This is why, while Inline and Internal CSS exist, External is most commonly used. This type of CSS command is written separately from the HTML content of a page and is then applied to that page. It allows for more and simpler modification.
Building Blocks of CSS
HTML functions through tags and attributes. CSS, on the other hand, uses a different type of language. The three main components are Selectors, Properties and Values.
Selectors are are the names of HTML tags in the world of CSS, such as “head” or “body.” Objects and directives within these selectors are called properties. Properties may include font size or color. Values, following this example, are the actual font size and color.
In a CSS command, the HTML tag (selector) is surrounded by {braces}, also known as curly tags. Each property within the selector is followed by a colon (:). If multiple directives are given, they are separated from the next by a semi-colon (;).
On a page where you want the head font size to be sixteen and the text color to be purple, the command would look like this:
head {
font-size: 16px;
color: purple;
}
Other visual aspects which can be altered through CSS include borders, padding, margins and various applications of color. In external CSS, these would be written separately, then applied to a document when finished.
In short, CSS is the way a website looks, as opposed to what it says. While this is a very basic way to look at things, it will help you put a site together properly in your mind, as well as visualize which language would apply to each portion of a site.