CSS Declarations & Visual Rules

HTML, CSS and Javascript are the heavenly trios of frontend programming. When it comes to websites, though performance is the essential quality, the visual appearance of the site plays a vital role in captivating users to click and browse the website.

CSS, or Cascading Style Sheets, is a style sheet language used to style the front. CSS adds assets to a website, such as unique icons, gorgeous fonts, and compelling layouts.

Since the role of CSS is to provide styles, and each style has other properties, there are specific rules you must keep in mind while adding the elements. And these rules are known as visual rules.

Let’s look at the visual guidelines you must adhere to present your site with exquisite design and other CSS declarations that can make it visually appealing and intriguing.

Visual Rules

Visual rules are guidelines that show you how to style elements and incorporate other features to achieve the styles you desire.

CSS Declarations

The first rule is on how to declare CSS elements. CSS declaration refers to key-value pairs used to set style properties for a component or a group of elements.

The rule is that a colon should separate the property name and its value, and the whole statement should end with a semicolon.

Syntax:

property_name: property_value;

Example:

p {
  color: red;
  text-align: centre;
}

Font Size

The font-size CSS property is used to set the font size in terms of pixels.

Example:

font-size: 30px;

Background Color

The background-color CSS property is used to define the background colour of the website. You can use colour names, RGB, and hexadecimal values to specify colours.

Example:

body {background-color: coral;}

Or,

body {background-color: #FF0000;}

Or,

body {background-color: rgb(255,0,255);}

!important Rule

The !important Rule overrides the previous styling properties for the specific property. 

Example:

#myid {
  background-color: blue;
}

.myclass {
  background-color: grey;
}

p {
  background-color: red !important;
}

Opacity

The opacity property is used to adjust the transparency of the element. The value of this property ranges from 0 (transparent) to 1 (opaque).

Example:

img {
  opacity: 0.5;
}

Text Align

The text-align CSS property defines the alignment in which the inline contents should appear on the web page.

The values can be left, right and centre.

Example:

text-align: right;

CSS Rule Sets

The CSS rule sets refer to the different number of style properties defined for one element. 

Example:

In the code below, we define the elements’ colour and their alignment using two different declarations.

h1 {
  color: blue;
  text-align: centre;
}

This is how most elements are styled in CSS.

Resource URLs

The url() function includes the URLs, which will later be displayed on the web page.

Example:

In the below code, we are using the url() function to wrap the resource URL of the image for the background image. The image will then be displayed on the page.

background-image: url("paper.gif");

CSS Font Declaration

Using CSS, you can use different types of stylish and iconic fonts on your webpage. To do so, first, you need to get to know about the other font properties,

Font Color

The color property is used to define the color in which the font should appear. In CSS, you can mention the color used. 

• The color name
• Hexadecimal values
• RGB values

Example:

In the below code, the h1 font will appear in red, h2 will appear in purple, and the texts in the paragraph element will appear in green.

body {  
    font-size: 100%;  
}  
h1 { color: red; }  
h2 { color: #9000A1; }   
p { color:rgb(0, 220, 98); }   
}

Font Family

The font-family property defines the format in which you would like the font to appear.

Example:

body {  
font-size: 100%;  
}  
h1 { font-family: arial; }  
h2 { font-family: times new roman; }   
p { font-family: calibri; }   
}

Font Style

Using the font-style property, you can specify the font style, such as italic, bold, and normal.

Example:

body {  
font-size: 100%;  
}  
h2 { font-style: italic; }  
h3 { font-style: oblique; }  
h4 { font-style: bold; }   
}

Font Weight

The font-weight property is used to specify how bolder or lighter the text needs to be displayed. You can use terms like lighter, bolder or numbers.

Example:

p.normal {
  font-weight: normal;
}

p.bold {
  font-weight: bold;
}

p.bolder {
  font-weight: 900;
}

Font Variant

The font-variant is used to specify the font-variant like small caps, normal etc.

Example:

<style>  
p { font-variant: small-caps; }  
h3 { font-variant: normal; }  
</style>

CSS Class Declaration

In CSS, the .class selector is used to select all the elements which belong to a particular class attribute. The style properties which will be mentioned in the .class block will apply to all the elements in the class.

Syntax:

.class {
    // CSS property
}

Here,

The class refers to the class name.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.initial {
  background-color: purple;
  font-style: italic;
  text-align: centre;
  font-family: times new roman;
}
</style>
</head>
<body>

<h1>.class selector</h1>

<div class="initial">
  <p>Class Selector in CSS</p>
  <p>.class</p>
</div>

<p>Classes in CSS</p>

<p class="initial">Classes in CSS</p>

</body>
</html>

The Bottom Line

CSS, like HTML, is a relatively easy language to learn and grasp quickly. However, it uses a lot of rules to make the styling process easier and neat. With the visual rules defined, try them out and create new styles for web pages.

Where can I learn CSS?

There are many resources available that can teach you CSS. Code Institute teaches it as part of our Full-Stack Development programme. If you want to learn some of the basics for free, then try our free 5 Day Coding Challenge. After just one hour a day for five days, you will have built your first-ever web page. Register today through the form below and take your first steps in becoming a coder.