CSS Syntax and Selector
Published: 2021-07-31 13:53:26

---
title: CSS Syntax and Selector
published: true
date: 2021-04-20 01:16:04 UTC
tags: 
canonical_url: https://www.devwares.com/blog//css-syntax-and-selector
series: Devwares Web development Free Course
---

 **CSS Syntax and Selector**

There are some rules that guild writing code for CSS style. These rules help the browser to interpret the code and apply it to the appropriate HTML element. The CSS rule is made of three parts which include

[![Contrast Bootstrap UI Kit](http://github.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)

**Selector:** a selector shows the HTML element you wish to style. This could be any tag like `<p>` or even a class name.

**Property:** this is like a HTML attribute. It simply that all HTML attributes are converted to CSS properties. Example color, border, height, weight etc.

**Value:** these are assigned to the properties example color: blue

**CSS Code:**

```css
p {
  color: blue;
  height: 12px
}

```

The p is the selector in CSS. It is followed by curly braces. In side the curly braces are known as the declaration box which contains CSS property, in this case is the color and height and their values which in this case is blue and 12px.

**CSS Selector**

A CSS selector selects the HTML element(s) you want to style. These selectors are divided into five categories Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selector (select elements based on a certain state) Pseudo-elements selectors (select and style a part of an element) Attribute selector (select elements based on an attribute value)

**Element selector**

These selects elements based on the element name. when an element is selected and a style is given to it all the content of that element takes the style on the webpage.

**CSS Code:**

```css
p {
  background-color: red;
  text-align: center
}

```

**CSS ID Selector**

An id is unique in itself. The id selector is used to select this id within the webpage. No two elements can have the same id. To select a specific id, write the harsh tag character(#), followed by the id of the element.

**CSS Code:**

```css
#wrapper {
  text-align: center:
  color: grey;
}

```

**CSS Class Selector**

The CSS class selector works in the same way as the id selector but with slight difference. An ID is unique to the element whereas a class can be common to multiple elements. To select a element with specific class, write a period character(.), followed by the class name.

**CSS Code:**

```css
.center {
  margin: 0px
  padding:2px;
}

```

**CSS Universal selector**

The universal selector is just as it is called. It selects all the element in the webpage. It has the star sign `(*)` as its symbol

**CSS Code:**

```css
*{
margin: 0px;
padding: 0px;
}

```

**CSS Grouping selector**

It is usually used when the same CSS styling is applied to different elements. It helps to increase efficiency and save time.

**CSS Code:**

```css
p, h3, div {
  color: green;
}

```


###Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking [here](https://cdbootstrap-demo.netlify.app).

![Contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuz057uo4vkmvma7bdom.png)

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about [contrast](https://www.devwares.com/product/bootstrap-contrast-pro).UI components. [Learn more about Contrast Pro]

## Resources 

- [Contrast Design Bootstrap](https://www.devwares.com/docs/contrast/javascript/index/)
- [Accordion](https://www.devwares.com/docs/contrast/javascript/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/javascript/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/javascript/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/javascript/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/javascript/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/javascript/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/javascript/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/javascript/components/buttonGroup/)
- [Button](https://www.devwares.com/docs/contrast/javascript/components/buttons/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/javascript/components/buttonToolbar/)
- [Card](https://www.devwares.com/docs/contrast/javascript/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/javascript/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/javascript/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/javascript/components/collapse/)
- [DataTable](https://www.devwares.com/docs/contrast/javascript/components/datatables/)
- [DatePicker](https://www.devwares.com/docs/contrast/javascript/components/datepicker/)
- [DropDown](https://www.devwares.com/docs/contrast/javascript/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/javascript/components/footer/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/components/forms/)
- [Icon](https://www.devwares.com/docs/contrast/javascript/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/javascript/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/javascript/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/javascript/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/javascript/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/javascript/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/javascript/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/javascript/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/javascript/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/javascript/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/javascript/components/panels/)
- [Pop Over](https://www.devwares.com/docs/contrast/javascript/components/popover/)
- [Progress](https://www.devwares.com/docs/contrast/javascript/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/javascript/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/javascript/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/javascript/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/javascript/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/javascript/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/javascript/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/javascript/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/javascript/components/switch/)
- [Table](https://www.devwares.com/docs/contrast/javascript/components/table/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/javascript/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/javascript/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/javascript/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/javascript/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/javascript/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/javascript/table/datatables/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/javascript/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/javascript/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/javascript/widgets/)