Menu

  •    
  • Home
  • Digital Accessibility
  • Web Accessibility Testing
    • Testing Principles
    • Automated Testing
  • Accessible Learning Materials
  • Development Principles
  • Inclusion in the learning process
  • HTML
    • HTML Syntax
    • Text Tags
  • CSS
    • CSS Syntax
    • Text Formatting CSS
  • PHP
    • PHP Syntax
    • PHP Functions

Contacts

  • t.todorov@ts.uni-vt.bg
  • 5003 Veliko Tarnovo, Bulgaria, Teodosii Turnovski St. #2

CSS Syntax

Basic rules of CSS syntax

CSS rules define the layout of elements on a web page, i.e. their position and appearance. The syntax of a CSS style rule is: 

selector {property: value;
 property: value;
 …}
The selector specifies the HTML element to which the style applies. The "property: value;" pair specifies how to render the selector. Here, the property is a characteristic of the element (eg color) and the value refers to it (eg red). <!DOCTYPE html> <html> <head> <style> p { color: red; background-color: yellow;} </style> </head> <body> ... </body> </html>
Each style sheet can contain any number of style rules.
For the sake of shorter code, CSS syntax allows multiple selectors to be grouped together, separated by commas, and properties applied to each of the selectors. It is also possible to group more properties using an umbrella property (shorthand property), to which the values ​​of these properties are set at once.
<!DOCTYPE html> <html> <head> <style> h1, h2, p {color: red;} h3 {font: bold 12pt "Arial";} </style> </head> <body> ... </body> </html>
There are three main ways to apply styles:
  • Local - sets a style for a specific HTML element in a web page
  • Internal - Defines styles for elements on a web page
  • External – written to another file and applied to multiple web pages
A local style applies to only one of the elements on the web page - it is unique to it and does not apply to other elements on that page. It is specified through the style attribute (of this element) and its value is a list of style rules.
<!DOCTYPE html> <html> <body> <h1 style="color: blue; margin-left: 30px; background-color: orange;">CSS Tutorial </h1> </body> </html>
Result:

CSS Tutorial


Multiple ways of CSS can be applied simultaneously in the same document - local styles, internal style sheet, and external style sheet. In doing so, local styles take precedence over internal and external styles, i.e. if we set the external style to blue for the letters in a paragraph, and the local style of a paragraph on a web page is set to green, the green color will be applied to that paragraph.