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.