You are currently viewing Style Rules in CSS – Advanced Guide
  • Post category:CSS

Style Rules in CSS – Advanced Guide

 Style Rules in CSS

  • Rules
  • Element selector
  • Class selector
  • ID selector
  • Property and value

Rules:

They are three types of CSS style rules in element.

Syntax:

selector{
property : value;
}

Selector CSS style rules:

  There are different kinds of selectors, and most important is Element, class and ID. Element selector targets your style based on the element type itself that’s the most basic selector are :

Element selector:

There is by using the element type like <p> tag cool the problem with element selectors is that you might not want to turn all your paragraphs blue. What if you had three paragraphs and you only want one of them to be blue the element type is an identifier, but in this case it’s too general. I want to show on a real world example, take a atom website in it two section one of them has white background the other one is beige. If you inspect it you’ll see they’re using dips for both of them, so clearly the guys have made this couldn’t have select all the dips and change the background to white or beige.

Class selector:

You can select elements based on other kinds of identifier classes and ID’s. Class is the most common and useful one in fact. That’s exactly, what atom is using wrapper class on one and a highlights on another one. If you click on the <div> with the highlight class on it, that the class actually has a style that includes background beige. You have four paragraphs and you want to alternate between dark and light. So, dark light in other words you want to reuse a style for multiple elements in this case you can use class selector. The way you write these in css style rules is you write the name of your class this could be whatever you want just you can’t have spaces and some special character say dark.

You put a dots in front of it why dot well I don’t know what to tell you just syntax and you just have to remember it. This tells the browser hate this is a class selector and then of course you have to add that class to your HTML element as well. This means select all the elements that have a class attribute and the value is dark, so let’s try it ourselves.

I your have two or more paragraphs you’ll added dark, light classes, so you can do the exact same thing that. I have dark class and light class, so the dark class has background color black and color which is the text color you should notice by now white. The light selector or the styles for my light class or the exact opposite background color white and text color black. Added a padding of 20 pixels to all <P> tags.

READ ALSO  Pseudo Selectors in CSS | Explained

ID selector:

  ID attributes are specific to one element only, if you have a style that you want to apply to only one element. For some reason you can add an ID to that element for example: <p id=”my-blue-p”/>. ID selectors are just like selector except you put a (#) hash in front of the name(#my-blue-p) instead of the dot(.my-blue-p). so that become the css style rules selector for the element with that ID. The problem with ID is that it’s limited to only one element remember ID’s can’t be shared between elements. So you can’t reuse ID for multiple element. Those are the three basic selector elements, class and ID. Element to style the element of that type, ID to target only one specific element and class to reuse for multiple element. We’ll be using all of them from

Property and Value CSS style rules:

Now although there’s over 500+ CSS properties we’re only going to look at 200 of them. They’re the 20 most common ones that you can use to get you probably 90 to 95 percent the way done with pretty much any site. So, the 20 css style rules properties are background, border, color, cursor, display, float, font-size, font-style, font-weight, width height, top right bottom left, margin , padding, position, text-align and text-decoration. We won’t be covering them in the exact orders you see here.

But we’ll definitely get to each of them as we go through this article. For applying actual styles we’re going to be using CSS classes. CSS classes is basically an identifier like as dark and then inside our css style rules we’ll be able to see dark again but with this period in front of it. The period is important because the period says look in the HTML attribute class and try to find an identifier called dark.

Example:

.dark{
background : #222222;
color: #fff;
border : #fff 1px solid;
}

  If you find one apply the following styles which brigs us to our very first two properties background and color. I apply a dark gray background as he color, so basically background sets background color and then color sets the text color. The value of background property you actually see is here is called an RGB hex code. The red the second two character is gonna be the green and the last two characters is gonna be the blue. The lowest value would be zero and the highest value would be ff. Going to put in a range of 0 up to 255. If you don’t want to worry much about colors you can actually use color wheel. Which will let you just basically pick the color you want and then it’ll tell you what it is.

READ ALSO  CSS :lang() Pseudo Class Selector | Expalined

The content let’s put a border around the content this is going to be the padding the thing the wraps the padding is point to be the border. That wraps the border is going to be the margin. So, we have the content let’s put a border around the content this is done with border property. The border property is going to expect that you’re going to supply a color the thickness of the border and then what style the border is, So we want white border. we’ll do pound (fff) one pixel solid and then save you can see.

Next thing we’re gonna do is add some padding. Padding is be between the border and the content using the padding attribute. So, if we wanted a 20 pixel padding around every part of the content. You could simply do padding 20px and then then save you can see. You’ll add some margin now margin happens outside of the box and that’s what makes it different from the padding. The padding happens within the element the margin happens outside of the element.

So you’ll do a padding and then you’ll do a margin. Now all three of these properties border, padding and margin all support specific border padding and margins for the left top right and bottom sides. The value is defined a value to any property and it is used for size of the property rules in CSS. If you use a property in css style rules , you must use a value to give it size or style.

Leave a Reply