Last Updated on April 1, 2018 by WebsiteDesigner.sg
CSS is the abbreviation of Cascading Style Sheets. CSS is a style sheet language. Style sheet languages are used to describe or create a presentation of a context written in a Markup Language. CSS allows you to create and implement instructions for the enhancement in visual style of your webpage content. Suppose that you build a tree house, that tree house is your HTML structure. Now when you paint your tree house or add decorations to it that is the CSS for your tree house. You want to make your page background blue in colour and want the text to have a Times new roman type face and should be written in italics. In general, all kinds of visual styles are done through CSS. So basically, what CSS does is creates rules/Instructions for the visual presentation of the context of the webpage.
So, as you have read that CSS works by creating rules for the HTML elements. This rule specifies that what kind of changes should be displayed on the computer screen as output. I CSS rule has 2 parts, one of which is called a “Selector” and the second one is called “Declaration”.
As the name indicates, a selector selects or indicates the HTML element, to which the CSS rule is addressed to. Declarations in a CSS rules contain the specific characteristics that are applied to that rule.
For example.
p {font-family: Arial;}
The letters in colour blue, are selectors and the ones in the light green are declarations for a CSS rule. Declarations are specified by the use of curly brackets. Now each declaration has 2 parts, a “Property” and a “Value”. The Property specifies the aspects of the elements that you want to change, for example Colour, Font family, Size these are the aspects of the elements in which the elements will be displayed on your web page. The Value is the exact numeric or verbal setting of these aspects. In other words, Colour is an aspect of something let’s say a car but colour also has a specific value that may be white, blue or red. The Property and Value are separated by using a colon. You can include multiple properties in a declaration, by using a semi colon after each property.
In order to apply the rules and attach a CSS file to a HTML document “<link>” tag is used. A <link> tag is an empty tag which means that it does not need a closing tag to function properly. Using one style sheet for an HTML document results in faster loading and processing of the site. If you want to change something you will only have to change it in one edit and it will take effect everywhere it is used. This is useful for clients of a freelance web designer singapore that requires visual and aesthetic changes of the website.
<title>Using External CSS</title>
<link href=”css/styles.css” type=”text/css”
rel=”stylesheet” />
This is also known as using CSS externally and this Is usually done in the head of the HTML document. This helps to apply a basic set of CSS files to all the HTML page context so you don’t have to specify the rules for each and every heading. The “href” specifies the path of the CSS file. The “type” attribute specifies the type of the document it is being linked to and “rel” tells us about the relationship between the html page and the CSS file.
<title>Using Internal CSS</title>
<style type=”text/css”>
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
The above context is an example of how you use CSS internally within the HTML document. This is also done in the head of the HTML document. “<Style>” element is used instead of the <link> element because you are not applying these attributes to all of your web page.