CSS stands for Cascading Style Sheets used to define the style of HTML elements in a web page. CSS instructs the browser how markup elements should appear on a web page displayed to the users. The main purpose of CSS is to define the layout and decorate the elements. All specifications of CSS are maintained by World Wide Web Consortium (W3C).
CSS was initially proposed by Håkon Wium Lie along with many other style sheet languages on October 1994. W3C then adopted his recommended standards along with the recommendations from Bert Bos during 1996 and released CSS1.
Syntax of CSS
CSS syntax has three parts – selector, property and a value. It is defined as below:
- Selector is a html tag for which you want to add styles.
- Property is the attribute you want to change.
- Value is the actual value of the property.
The property and value parts together is also called as declaration and a the syntax can have more than one declaration for a single selector. Below is an example of CSS syntax for setting a paragraph element to blue color with the font size of 18px.
Remember, each declaration should be ended with a semi-colon in CSS and the spaces will not have any impact on the result. Also the property and value should be separate with a colon.
In case of external CSS, style definitions are stored in a .CSS file and then linked to a HTML document using <link> tag as below:
<head> <link rel="stylesheet" type="text/css" href="location of CSS file"> </head>
Using Class and ID Selectors
It is not necessary to directly use HTML elements as selector. You can use additional CSS class or use the ID of the HTML element as a selector. In such a case, you should separately define the style for the class or the id. ID selector is used for applying styles only on that element and class selector can be used on multiple elements. Below is the example of using class and ID selector:
.headtext {
text-align: center;
}
#id1 {
color: red;
}
Remember the CSS class should be used with dot in the front and ID selector should have # in the front. HTML element selectors are not required to have any prefixes.
The above class and ID selector can be used in the HTML like below:
/* Start of CSS Class Selector Example */ <h3 class="headtext"> This is a center aligned heading. </h3> /* Start of CSS ID Selector Example */ <p id="id1"> This text will be displayed in red. </p>
The comments in-between /* and */ is not shown in the output but used for structuring and understanding the CSS code by different people other than the developer. Learn more about using comments in CSS.
Different Ways of Using CSS on HTML
Styles can be added to a HTML element using one of the following three ways:
- Inline Styling
- Internal Styling
- External Styling
In addition browsers will have fallback style to be applied to HTML elements by default. Learn more on CSS usage and cascading order.
Advantages of Using CSS
Below are some of the advantages of using CSS:
- CSS saves huge time of defining styles of each element individually.
- Helps people with vision problems by disabling external style sheet and enable their own to view the page content in a suitable manner for them.
- Compatible on multiple devices.
- Separate core HTML from styling elements.
- Provides lot of design flexibilities.
CSS Box Model
Initially HTML table element was used to create the layout of web pages. Later CSS completely replaced the table layouts and responsive designing is the current trend. With CSS every element on the web page is being considered as a rectangle element with border and padding. This concept is referred as CSS box model and indicated as shown in the below picture:
CSS Box Model Element
Learn more about CSS box model.
CSS and Page Speed
Though smaller CSS styles may not affect the page loading speed, using larger style sheets will affect the loading speed. There are two types of issues you can notice in Google PageSpeed Insights tool:
CSS Issues with Google PageSpeed
Eliminate Render-blocking JavaScript and CSS in above-the-fold Content
This indicates that Google could not load above the fold content without the CSS components are loaded. Google recommends to add the smaller CSS codes directly in HTML using inline style to load the above the fold content. The remaining larger portion of the CSS can be deferred loading after the above the fold content is loaded. For a normal user, this may be a tricky task and the only thing you can do is to avoid using too many style sheets on the header.
Minify CSS
The style sheets can be compressed and delivered. You can download the optimized version of the style sheet from Google PageSpeed Tool and replace it on your site. Generally the minified CSS files will have the extension of .min.css.
Leave a Reply
Your email is safe with us.