Web Design/CSS Classes
< Web DesignWhat are Classes in CSS?
- Let's say you want to give an HTML element multiple looks with CSS.
- Say for example, sometimes you want the font to be small and white with a black background, while other times you would prefer the font to be big and blue with a light blue background. CSS allows you to do this with the use of classes.
- The name of the actual class can be called whatever you wish!
To make a class, in between <style> & </style> type the name of the class following the tag name.
<style>
p.first { color: blue; }
</style>
Then in the HTML tag add the class
<p class="first">This is some text</p>
The last code will set the text color to blue for all of the 'p' elements with a class value of 'first'. It's also possible to apply the desired style to all of the elements with an specific class value no matter which element the class attribute is at. To do that, the '*' character is used.
<style>
*.first { color: blue; }
</style>
Example 1
The code below should make the:
- Paragraph with the first class, appear as blue color.
- Paragraph with the Second class, appear as red color.
- Paragraph with the no class, appear as normal.
Type the code below into your code editor and save the file as cssclass.html
<html>
<head>
<style type = "text/css">
p.first{ color: blue; }
p.second{ color: red; }
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
Example 2
The code below should make the:
- Heading2 appear red with font size of 20px.
- Paragraph with the firstpara class, appear as gray color.
- Paragraph with the Secondpara class, appear as red color.
- Paragraph with the Thirdpara class, appear as white text with purple background.
- Paragraph with the no class, appear as normal.
Type the code below into your code editor and save the file as cssclass2.html
<html>
<head>
<style>
h2 { color: red; font-size: 20px; }
p.firstpara { background-color: gray; }
p.secondpara { background-color: red; }
p.thirdpara {
background: purple;
color: white;
}
</style>
</head>
<body>
<h2>CSS Classes</h2>
<p class="firstpara">This is the p.firstpara paragraph</p>
<p class="secondpara">This is the p.secondpara paragraph</p>
<p class="thirdpara">This is the p.thirdpara paragraph</p>
<p>This has no CSS formatting</p>
</body>
</html>
References
http://www.tizag.com/cssT/class.php
HTML: What is HTML, Advanced HTML Tutorial, HTML Challenges, Lists and Tables, The Structure of HTML, Pen and Paper HTML activities
CSS: Learning Basic HTML and CSS, CSS challenges, Embedded CSS, Basic HTML and CSS Tutorial, Inline CSS, Develop cascading style sheets, CSS3 Animations
PHP: Simple functions in PHP, Dynamic websites, PHP challenges, Dynamic websites with PHP, Generating a receipt with PHP, Responding to HTML forms with PHP,
JavaScript: An Introduction to Programming with JavaScript, JavaScript Challenges, Getting to know JavaScript events, Getting to know the Document Object Model with JavaScript, JavaScript pen-n-paper activities, Web Programming Intro, Produce basic client side script for dynamic web pages
XML: XML challenges
Databases: Creating Database Tables
Projects: A small website project, A step-by-step web design project, Build a basic web page, Build a small website
Challenges: Web design, HTML, AJAX, CSS, JavaScript, PHP, XML, Information Architecture, Algorithms
Activities: Web design group learning activities, Pen and Paper HTML activities, A Web Design Quiz show, Ordering Tasks for a Web Project, Paired Bio Pages, Scoping a Small Project, Emerging Technologies Research Activities
Project management: An introduction to Project Management, Developing a Client Project
Design: Accessibility, Design Principles for Web Design, Design Suggestions
Testing: Testing Website performance, Website Performance Test Plan
Publishing: Getting Your Site On the Web
Certification and standards: Cert IV Website Qualifications in Australia, Australian Qualifications, Web design qualifications
Professional development: Contribute to personal skill development and learning, Useful Applications, Useful Books, Emerging Technologies, Using the Internet as a Learning Tool
Course meta-information: Web Design, About the web design learning project, New Structure, Sample Timetable