Social Icons

Sunday, July 5, 2020

The main properties of a tag selector CSS

1 - Tag selector & general syntax of a CSS code 

 Before we talk about the properties of a selector, let's take a simple example:

Example

to put the title tag h1 in red we use the code:
h1 {color: # FF0000; }
In this example:
  1. h1 : represent the selected tag by the tag selector, 
  2. color : indicates here the property of the selector which it's value in this case is red. 
From this example, we can deduce the general syntax of a CSS code:
Tag selector {property: values;}

2 - Selector properties

The properties of a selector are very numerous, we can cite some of the most used:
  1. background: set the background color or image 
  2. border: define the properties linked to the border. 
  3. color: defines the color of the selector 
  4. content: used with the :: before and :: after pseudo-elements in order to generate the content of an element. 
  5. font: property allowing to use a system font for the font of an element thanks to certain specific keywords 
  6. height: defines the height of a content box element 
  7. margin: defines the size of the margins on the four sides of the element 
  8. mask: allows to hide an element partially or completely 
  9. padding: allows to define the different filling gaps on the four sides of an element 
  10. scale: allows scaling 
  11. text: acts on the selector text 
  12. width: allows to define the width of the box of the content of an element 

Note 

We will see in detail on examples, each of these properties in the next tutorials 3 - Example of CSS tag selectors
Example: If for example we want the title tags to be in red with the size 22px, and the subtitle tags to be in blue for the size 18px, we use the CSS code:
h1 {color: red;
  }
  h2 {color: blue;
  }
Here is the full code for the web page:
<html>
<head>
<style>
h1 {color: red;
  }
  h2
{color: blue;
}
</style>
<title> Tag selector </title>
</head>
<body>
<h1> Here is the title in red! </h1>
<h2> Here is the subtitle in blue! </h2>
</body>
</html>
And here is the overview of the page:




Younes Derfoufi
my-courses.net

No comments:

Post a Comment

Category Of Mobile Courses

Actualités (644) Adsense (1) Affiliation (1) Algebraic Topology (1) Algorithmic (1) all-news (30) Android (5) Android App (8) Android app without code (4) Android Apps (167) Android Development (4) Android download (2) Android OS (3) AngularJS (1) Automata theory and formal language (5) C programming (5) Category and Functor (8) CMS (3) Computer Glossary (18) Create Mobile App With Ionic Framework (2) CSS (2) CSS-Cascading-Style-Sheets (4) Developpement Java (13) Differential Geometry (1) Django-Python-Framework (8) dropshiping (26) Earn Money by Internet (4) Emplois (23) Framework php (2) Fraud (2) HTML (7) Java For Beginners (10) Javascript (12) Kotlin Programming Language (8) Kotlin For Mobile Android (1) Linux Download (2) Marketing (5) Mobile (3) Mobile Courses (4) Mobile Marketing (4) MoneyGram (1) News (721) Node.js (5) Open Source (1) Photoshop (1) Protect Computer (1) Python (32) Python BeautifulSoup (1) Python For Data Science (2) Python-Books (6) Python-DVD-Training (1) Python-Exercises (138) Python-Framework (1) Python-IDE (1) Python-Modules (1) Python-pdf (2) Python-pyQt (1) Référencement (2) Script PHP (2) Security (6) SEO (1) Snipping Tool: Faq (1) Social Networks (1) Source Code (1) Statistics With SPSS (2) Surveillance Software (1) Travail à domicile (6) Tutoriels php en vidéos (2) Tutoriels-MySql (6) tutoriels-php (19) Utilitaires (1) VPS (1) Web Hosting (1) Webcam (1) Webmarketing (11) Western Union (1) Windows 10 (1) Windows 7 (4) Windows 7 Faq (2) Windows 8 (1) Windows Accessories (1) Windows Download (8) Windows Drivers (1) Windows Fonts (1) Windows Power Shell (2) Windows Registry (2) Windows Security (18) Windows Software (2) Windows Spyware (2) Windows utilities (3) Windows Virus (2) Windows Vista (3) Windows Wireless (1) Windows xp (1) Wordpress (1)
 

Sample text

Sample Text

 
Blogger Templates