CSS Selectors, Property and Values - Web Development Turtorial for Beginners
In this turtorial, we will look at a basic CSS, Selectors, Property and Values, which are the core fundamentals of CSS and hence most important topics beginners to understand clearly.
In the picture above, the yellow highlited text shows an example of how a CSS selector "h1" is used to selected a heading and applied a style with a property of "color" with a value "red".
What are CSS Selectors?
CSS Selectors are the key identifiers of the HTML element selected for styling, they basically represent the item selected in the style sheet. There are different ways you can use to select an element, hence CSS can select element by Tag Name, Class Name or Identifier - known as id.
Selection by Tag Name
Tag Name widely used as selectors and most beginners prefer using Tag Names to select an element in page, but using a Tag Name always may arise with a when there are multiple tags with the same name in the page. By using Tag Name you are actually telling the style sheet to select all elements with the tag name and give them the defined style.
Selection by Class Name
Single or multiple elements can be selected using classnames - an attribute "class" embedded in the HTML Tag. Class Names are used to represent group of elements which are intended to style the same or single element which will be style different. To select an element with a class name ".[classname]" is used, where the square bracket and its contents should be replaced with the classname.
Selection by Identifier, "id"
Identifiers are used to uniquely represent an element in the page, which in plain english means only one single element must have the identifier name in a complete page. Selection with identifiers starts with pound sign "#", followed by the identifier name, e.g. "#[identifier_name]".
Selecting Multiple Elements by Tag Name
Multiple elements can be selected by using their tag names and seperating them with comma. The styles defined in the code block will be applied to all the elements selected.
CSS Properties and Values
CSS property refers to the feature you want to change in the selected item such as color, background, height, width or border while refers to the setting you want to use for the mentioned property of the element.
In general aspect, the property may have different values which may be figure, percentage, keywoard or even phrases. Lets take the color again for example, the color property may be green in keyword, or rgb(0,165,0) in RGB pellete.
You can refer to W3 School to check all the CSS properties available with their values.
Thanks for reading, have a nice day, make sure you checked our other posts.