First page Back Continue Last page Graphics
The "default.css" file
- SIMRacingApps tags can be styled just like any other HTML tag by simply naming them either in-line styles or the CSS file.
- sra-data { width: 50%; font-size: 200%; color: blue; }
- If an "id" or "class" is assigned to an element, they can be used in the css as selectors as well.
- .SIMRacingApps-App-MyApp-leader-lap { width: 50%; font-size: 200%; color: blue; }
- When sizing your element or font, it is recommended that you always use percentages so your app can scale to the size of the user's device or browser window. It is rare you need to specify the height because the "data-sra-resize" directive calculates that for you to preserved the aspect ratio of your element relative to the app's ratio.
- SIMRacingApps provides a global CSS file, SIMRacingApps.css, and CSS files for all of its' own widgets. You can override those styles in your style sheet as long as you import the widget's CSS file first. This is because the widget's CSS files are loaded on demand and there's no guarantee of the load order. (NOTE: All selectors in SIMRacingApps follows a strict naming convention to prevent conflicts).
- @import "/SIMRacingApps/widgets/CarNumber/CarNumber.css"
- .SIMRacingApps-Widget-CarNumber { font-family: 'Times Roman'; }