Friday, August 13, 2021
The most commonly used selectors in CSS are the class and ID selectors. A class in CSS is defined with a . in front of it. For example you can have class call .rainbow and an ID for a div call rainbow those are two different things.
To apply a style to a class you define the class in the stylesheet as
.rainbow { color: pink; font-weight: bold; font-size:24px;}
Then you would use the class as such in the HTML markup
<p class="rainbow">What color am I?</p>
But if you want to apply style to an id that's used in HTML markup you have to do the opposite.
To reference an id in HTML you have to prefix your CSS style with the # character so in the CSS style you would have the following declaration
#rainbow { color: green; font-weight: bold; font-size:24px;}
<p id="rainbow">I am an ID</p>
You can combine class and HTML element like so
p.error {color:red; font-weight: bold;}
The above style applies the color red to the error class that only applies to the paragraph tag.
This is how you would you would call it on your HTML markup <p class="error">There's an error!</p>
You can also combine classes like so
p.error {color:red; font-weight: bold;}
p.bigError{font-size: 50px;}
Then you can apply both styles at the same time using one p tag by specifying both classes using one p tag
<p class="error bigError">There's a big error!</p>
Here is the full markup
Previous: Target Specific Media Environments With CSS Media And Feature Queries
To apply a style to a class you define the class in the stylesheet as
.rainbow { color: pink; font-weight: bold; font-size:24px;}
Then you would use the class as such in the HTML markup
<p class="rainbow">What color am I?</p>
But if you want to apply style to an id that's used in HTML markup you have to do the opposite.
To reference an id in HTML you have to prefix your CSS style with the # character so in the CSS style you would have the following declaration
#rainbow { color: green; font-weight: bold; font-size:24px;}
<p id="rainbow">I am an ID</p>
You can combine class and HTML element like so
p.error {color:red; font-weight: bold;}
The above style applies the color red to the error class that only applies to the paragraph tag.
This is how you would you would call it on your HTML markup <p class="error">There's an error!</p>
You can also combine classes like so
p.error {color:red; font-weight: bold;}
p.bigError{font-size: 50px;}
Then you can apply both styles at the same time using one p tag by specifying both classes using one p tag
<p class="error bigError">There's a big error!</p>
Here is the full markup
<html> <head> <style> .rainbow { color: pink; font-weight: bold; font-size:24px;} #rainbow { color: green; font-weight: bold; font-size:24px;} p.error {color:red; font-weight: bold;} p.bigError{font-size: 50px;} </style> </head> <body> <p class="rainbow">What color am I?</p> <p id="rainbow">I am an ID</p> <p class="error">There's an error!</p> <p class="error bigError">There's a big error!</p> </body> </html>
Previous: Target Specific Media Environments With CSS Media And Feature Queries
Subscribe to:
Post Comments (Atom)
Search This Blog
Tags
Web Development
Linux
Javascript
DATA
CentOS
ASPNET
SQL Server
Cloud Computing
ASP.NET Core
ASP.NET MVC
SQL
Virtualization
AWS
Database
ADO.NET
AngularJS
C#
CSS
EC2
Iaas
System Administrator
Azure
Computer Programming
JQuery
Coding
ASP.NET MVC 5
Entity Framework Core
Web Design
Infrastructure
Networking
Visual Studio
Errors
T-SQL
Ubuntu
Stored Procedures
ACME Bank
Bootstrap
Computer Networking
Entity Framework
Load Balancer
MongoDB
NoSQL
Node.js
Oracle
VirtualBox
Container
Docker
Fedora
Java
Source Control
git
ExpressJS
MySQL
NuGet
Blogger
Blogging
Bower.js
Data Science
JSON
JavaEE
Web Api
DBMS
DevOps
HTML5
MVC
SPA
Storage
github
AJAX
Big Data
Design Pattern
Eclipse IDE
Elastic IP
GIMP
Graphics Design
Heroku
Linux Mint
Postman
R
SSL
Security
Visual Studio Code
ASP.NET MVC 4
CLI
Linux Commands
Powershell
Python
Server
Software Development
Subnets
Telerik
VPC
Windows Server 2016
angular-seed
font-awesome
log4net
servlets
tomcat
AWS CloudWatch
Active Directory
Angular
Blockchain
Collections
Compatibility
Cryptocurrency
DIgital Life
DNS
Downloads
Google Blogger
Google Chrome
Google Fonts
Hadoop
IAM
KnockoutJS
LINQ
Linux Performance
Logging
Mobile-First
Open Source
Prototype
R Programming
Responsive
Route 53
S3
SELinux
Software
Unix
View
Web Forms
WildFly
XML
cshtml
githu
Best Party Light Hire Adelaide, Australia
ReplyDelete