Introduction to CSS Commands
CSS stands for Cascading Style Sheets. It is used to describe the presentation of the document which is written in a markup language like HTML. It does the work of separation of presentation and content which includes different layout, colors, and fonts. The separation provides flexibility and also control in the different characteristics which enable multiple web pages to share formatting by specifying relevant CSS. The CSS specifications are maintained by World Web Consortium. In addition to this, it also provides specific rules which help in alternate formatting if the content is being accessed from a mobile device.
Basic CSS Commands
Some of the basic commands are mentioned below:
1. CSS Syntax: There are a set of rules which need to be followed in CSS Command. The CSS rule set consists of a selector and a declaration block. The selector is used to point to the HTML element which user would like to style. The declaration block can contain one or more declarations which can be separated by semicolons. Every declaration should include a property name with its value and these separated by colons.
2. ID Selector: The id selector can use the id of an attribute of HTML element and help in selecting a particular element. It is used to select one unique element and this element should be unique for that page. In order to select an element with a particular id, ‘#’ is used and this is followed by the id of that element.
3. Class Selector: To select a particular class attribute the class selector is used to select the elements from that class. To make use of elements in a specific class a period (.) character is used. It is followed by the name of the class. With this, if the user wants that only specific elements are to be used then only those can be specified by a class.
4. Grouping Selectors: There are times when elements have same style definitions. To have them together grouped and minimize the code is a better option. To the group, the selector’s user can make use of a comma and separate each selector
5. Comments: These CSS commands are advisable to be used when writing code. They give clarity as to what the code is doing and helps you or someone else who is new to the code to work upon it accordingly. Comments are ignored by browsers. A CSS comment starts and ends with /* */.
6. Display: Block – Many HTML elements are set to this mode of display. By default, the block level elements take as much space and they cannot be placed on the same line with any other display mode. It is possible to gain the ability to change the element’s height and width as per your wish.
7. Colors in CSS: In this CSS commands, colors can be specified in RGB formula. Each parameter defines the intensity of these colors and defines a new color. For example, to display black all color parameters should be set to RGB(0,0,0).
8. Background Color: The background-color property defines the color which is to be set for the background of an element. Color can easily be defined by giving a color name, by adding a Hex value or by setting RGB value
9. Background image: The background image can be set to any particular image of your choice. Once the image is set it gets repeated and it covers the entire element.
10. CSS Margins: CSS Command has different margin properties which can help in creating space around different elements and also defines these outside borders. CSS can have properties like margin-top, margin-right, margin-bottom and margin-left.
Intermediate CSS Commands
Some of the intermediate commands are mentioned below:
1. Class and ID selectors: In addition to the HTML tag a user can define own selectors which can be in the form of class or ID. The main use of these being that you can have the same HTML element and present it differently based on the ID or the class which is necessary.
2. Pseudo-class: These classes are used to specify a particular state or relation to a given selector. These classes can also take the form of selector:pseudo_class { property: value; }. This class is defined by simply giving a colon between the selector and pseudo-class.
3. Text Formatting: The texts that are added can be customized and formatted by making use of the formatting properties. The color can be changed by using the keyword ‘color’. So can the alignment of text. By making use of text-decoration decorations can be set and removed. Transformations can be done with respect to cases.
4. CSS Fonts: Fonts in CSS have different families like generic family and font family. The font family is a family of texts. The generic one having a group of families having similar look and font one having a specific font.
5. Icons: By making use of the icon library and adding the name of specified icon class icons can be easily used in CSS.
6. Tables: CSS can also display tables and help in customization with borders, their width, and height. By using keywords like ‘border’, ‘width’ and height user can easily have tables on a web page.
7. Positioning: This property specifies the type of positioning method which can be used for any element. This position can be static, relative, fixed, absolute or sticky.
8. Overflow: This property helps in controlling the content which is too big to fit into an area.
9. Float: The float property lets the element know how it should float. It specifies which elements can float beside the cleared elements.
10. Opacity: This property defines the opacity or transparency of any element.
Advanced CSS Commands
Some of the advanced commands are mentioned below:
1. CSS Rounded Corners: By making use of ‘border-radius’ property an element can be given rounded corners. You can also specify a particular corner out of the four corners and make the changes as per your choice.
2. Border Images: You can set an image as the border around any element. This is possible by making use of a border-image property. It takes the image and slices it into nine sections and then places the corners at corners and middle sections are repeated or stretched.
Tips And Tricks
- Make use of reset.css and reset all fundamental styles.
- Use Shorthand CSS to have a shorter way of writing Command CSS codes.
- Use CSS debugging tools in order to tweak, understand and debug the CSS command styles.
Conclusion
CSS Command helps you to keep the informational content of a document separate and helps in displaying it. It helps in avoiding duplication, maintain the code easily and use the same content with different styles.
Recommended Articles
This has been a guide to CSS Commands. Here we have discussed concept, basic, intermediate as well as advanced CSS Commands along with tips and tricks to use effectively. You may also look at the following article to learn more –
