In this example we are going to have a look at multiple classes \nthat you can apply on an element of html.<\/p>\n
It has become more and more useful declaring some standard classes in CSS (actually referring to them, even though they do not exist) and using these classes whenever we need in our elements. <\/p>\n
It basically is the inverse process of giving an element a class on html and then referring to that element in css to give attributes. In this case, you predefine some classes (that is, give them attributes) and then include them in your elements. \n \n \n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n
1. Predefine Classes & Attributes in CSS<\/h2>\n
In this step, let’s create different kind of classes and give attributes to them to set up a group of classes that we can later use in html. So, first create a basic html file<\/strong> with a style<\/code> tag in it where we can add the css, like below:<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>Multiple Classes on Elements<\/title>\r\n<\/head>\r\n<body>\r\n\r\n\t<!-- STYLE SECTION -->\r\n\r\n\t<style type="text\/css">\r\n\r\n \t<\/style>\r\n\r\n\t<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
1.1 Alignment Classes<\/h3>\n
Creating alignment classes will enable us to easy align elements on the web page. Let’s name two alignment classes:<\/p>\n
.pull-left<\/code> – this will align an element to the left \n.pull-right<\/code> – this will align an element to the right<\/p>\n
The respective CSS code for these classes would be:<\/p>\n
\r\n<style type="text\/css">\r\n\r\n body{\r\n font-family: "Arial", "sans-serif"; } \/* just added custom font *\/\r\n\r\n \/* ALIGNMENT CLASSES *\/\r\n\r\n .pull-left { \/* pull-left class referred and given attributes *\/\r\n float: left !important;\r\n }\r\n\r\n .pull-right { \/* pull-right class referred and given attributes *\/\r\n float: right !important;\r\n }\r\n\r\n<\/style>\r\n<\/pre>\n
1.2 Color Classes<\/h3>\n
Creating color classes will let us color elements\/backgrounds on the web page easier.<\/p>\n
Let’s name four color classes and three background color classes:<\/p>\n
.red<\/code> – this will give a text element or the border of a shape the red color. \n.green<\/code> – this will give a text element or the border of a shape the green color. \n.blue<\/code> – this will give a text element or the border of a shape the blue color. \n.white<\/code> – this will give a text element or the border of a shape the white color.<\/p>\n
.bg-red<\/code> – this will give an element a red background color. \n.bg-green<\/code> – this will give an element a green background color. \n.bg-blue<\/code> – this will give an element a blue background color.<\/p>\n
The respective CSS code for these classes would be:<\/p>\n
\r\n \/* COLOR CLASSES *\/\r\n\r\n .red, .red li, .red a { \/* red class referred and given color attribute *\/\r\n color: #e85139;\r\n }\r\n\r\n .green, .green li, .green a { \/* green class referred and given color attribute *\/\r\n color: #4ca640;\r\n }\r\n\r\n .blue, .blue li, .blue a { \/* green class referred and given color attribute *\/\r\n color: #319cd6;\r\n }\r\n\r\n .white, .white li, .white a { \/* green class referred and given color attribute *\/\r\n color: white;\r\n }\r\n\r\n .bg-red { \/* bg-red class referred and given backgrounf color attr *\/\r\n background-color: #e85139;\r\n }\r\n\r\n .bg-green { \/* bg-green class referred and given background color attr *\/\r\n background-color: #4ca640;\r\n }\r\n\r\n .bg-blue { \/* bg-blue class referred and given background color attr *\/\r\n background-color: #319cd6;\r\n }\r\n\r\n<\/pre>\n
Note that we also added the color attributes for li<\/code> or a<\/code> tags on the html.<\/p>\n
That is so we can access li’s or a’s directly with these classes.<\/p>\n
1.3 Size Classes<\/h3>\n
Creating size classes will let you control the elements sizes on the web page. Let\u2019s name three size classes:<\/p>\n
.small<\/code> \u2013 this will make an element look small on the screen. \n.normal<\/code> \u2013 this will make an element look medium on the screen. \n.large<\/code> \u2013 this will make an element look large on the screen.<\/p>\n
The respective CSS code for these classes would be:<\/p>\n
\r\n \/* SIZE CLASSES *\/\r\n\r\n .small { \/* small class referred and given sizing attributes *\/\r\n font-size: 1em;\r\n padding: 0.2em;\r\n width: 50%;\r\n height: 50%;\r\n }\r\n\r\n .normal { \/* normal class referred and given sizing attributes *\/\r\n font-size: 1.5em;\r\n padding: 0.4em;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .large { \/* large class referred and given sizing attributes *\/\r\n font-size: 2em;\r\n padding: 0.6em;\r\n width: 150%;\r\n height: 150%;\r\n }\r\n<\/pre>\n
1.4 Text Classes<\/h3>\n
Creating text classes will make it easier to control text appearance. Let’s name four text classes:<\/p>\n
.decor1<\/code> – this will make the text underline<\/code> and uppercase<\/code>. \n.decor2<\/code> – this will make the text overline<\/code> and lowercase<\/code>. \n.decor3<\/code> – this will make the text line-through<\/code> and capitallize<\/code>. \n.center<\/code> – this will make the text align center.<\/p>\n
The respective CSS code for these classes would be:<\/p>\n
\r\n \/* TEXT CLASSES *\/\r\n\r\n .decor1 { \/* decor1 class referred and given text attributes *\/\r\n text-decoration: underline;\r\n text-transform: uppercase;\r\n font-weight: bold;\r\n }\r\n\r\n .decor2 { \/* decor2 class referred and given text attributes *\/\r\n text-decoration: overline;\r\n text-transform: lowercase;\r\n font-weight: bold;\r\n }\r\n\r\n .decor3 { \/* decor3 class referred and given text attributes *\/\r\n text-decoration: line-through;\r\n text-transform: capitalize;\r\n font-weight: bold;\r\n }\r\n\r\n .center { \/* center class referred and given attributes *\/\r\n position: relative;\r\n bottom: 0px;\r\n text-align: center;\r\n }\r\n<\/pre>\n
1.5 Elements Classes<\/h3>\n
It is time to create some specific elements classes, which will represent the initial attributes of the elements we are going to give several classes. Here is what we will create:<\/p>\n
.button<\/code> – a very popular element which will be used to demonstrate. \n.menu<\/code> – a four links menu with very little prestyled attributes. \n.rectangular<\/code> – a prestyled fixed width and height element as example.<\/p>\n
The respective CSS code for these classes would be:<\/p>\n
\r\n \/* ELEMENTS CLASSES *\/\r\n\r\n .button { \/* refers to a button class, given several attributes *\/\r\n border: 0.1em solid;\r\n border-radius: 0.3em;\r\n width: 5em;\r\n height: 2em;\r\n line-height: 2em;\r\n margin-top: 5em;\r\n margin-bottom: 2em;\r\n }\r\n\r\n .menu li { \/* refers to a menu class, given several attributes *\/\r\n display: inline;\r\n padding-right: 1em;\r\n text-decoration: none;\r\n }\r\n\r\n .menu {\r\n margin-bottom: 2em; \/* just a margin for better view of the elements *\/\r\n }\r\n\r\n .rectangular { \/* refers to a rectangular class, given several attributes *\/\r\n border: 0.1em solid;\r\n width: 10em;\r\n height: 5em;\r\n line-height: 5em;\r\n margin-bottom: 2em;\r\n }\r\n<\/pre>\n
2. Application of Multiple Classes in HTML<\/h2>\n
Here is where the magic happens, we will first create the basic elements structure in html <\/p>\n
and then continue adding appropriate classes to each elements to see the results of what we;ve done so far!<\/p>\n
2.1 Set up the HTML<\/h3>\n
Under your tag<\/code> start the html<\/code> code. Add four elements: a button, a menu, a rectangular and an image like so:<\/p>\n
(Do not give these elements classes, we will do that next)<\/p>\n
\r\n <!-- HTML SECTION -->\r\n\r\n <!-- button element -->\r\n <div class=""><a href="#">Button<\/a><\/div> \r\n\r\n <!-- menu element -->\r\n <div class="">\r\n <ul>\r\n <li class=""><a href="#">Home<\/a><\/li>\r\n <li class=""><a href="#">About<\/a><\/li>\r\n <li class=""><a href="#">Help<\/a><\/li>\r\n <li class=""><a href="#">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- rectangular element -->\r\n <div class="">I'm a rectangular<\/div>\r\n\r\n <!-- image element -->\r\n <img src="images\/image.png">\r\n<\/pre>\n
![\"Initial](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/classes1.jpg\")
<\/a>![\"Basic](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/classes9.jpg\")
<\/a>![\"Button](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/classes31.jpg\")
<\/a>![\"Menu](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/classes6.jpg\")
<\/a>![\"Rectangular](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/classes7.jpg\")
<\/a>![\"Image](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/classes8.jpg\")
<\/a>