Modify the css file in swift or obj c without the need for javascript

Is there a way to modify the font, font color, and font size of an HTML page? I have successfully converted the CSS file into a string by using String(contentsOfFile). Is it possible to use regular expressions or something similar to make changes to the CSS data? Below is an excerpt from the CSS file:

.calibre {

    color: #000;
    display: block;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 1em;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 5pt;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: justify
}

I have also attempted to convert this CSS file string into a dictionary using ESCssParser. However, when I convert that dictionary (after adjusting the font size) back into a string, the formatting is altered. For example, #idSelector would become "# idSelector". I am concerned that these modifications may impact the CSS file. Is my assumption correct?

Are there any alternative methods I can utilize to modify the CSS file? Thank you!

htmlioscssobjective-cswift

Answer №1

To streamline your website's design, it is recommended to modify a class in the HTML rather than making multiple changes in the CSS code. For instance, consider structuring your HTML like this:

<body>
    <div id="wrapper" class="med">
        <p class="calibre">Lorem Ipsum</p>
        <!--rest of html-->
    </div>
</body>

You can adjust the class attribute within the #wrapper element through backend coding and then utilize CSS for styling the page as shown below:

.calibre {
    color: #000;
    display: block;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 1em;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 5pt;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: justify
}
#wrapper.small .calibre{
    font-size: 0.8em;
}
#wrapper.large .calibre{
    font-size: 1.4em;
}

In the given example, if there isn't a specific class for "med," the default properties will be applied (1em). By changing the wrapper class to "small" or "large" instead of "med," the calibre class will maintain its attributes, with only the font-size property adjusting to either 0.8em for small or 1.4em for large.

Alternatively, you can refer to this JSFiddle link for an example using jQuery to replicate the functionality of backend coding.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position the image to the right of the dropdown menu in Bootstrap

While working with Bootstrap to create a top navbar on my webpage, I encountered some issues: Once the navbar dropdown is opened, I need to display an option list alongside an image positioned to the right of the list. The image should be the same height ...

htmlcsstwitter-bootstrap

Trouble displaying AngularJS $scope.data in the HTML code

I'm experiencing an issue where the data received from a POST request is being logged in the console, but is not displaying on the HTML page. Despite having a controller set up, the {{user}} variable is not appearing on the HTML page. While I can se ...

javascripthtmlangularjs

Freshly updated, discover how to create an underlined navbar menu item

I'm trying to underline the currently selected menu item in a navbar, but I'm having trouble getting it to work. Here's my code: .navbar-nav .nav-item:focus .nav-link { text-decoration: underline; background-color: yellow; } It&apo ...

cssbootstrap-5

Establishing the REM value for all CSS properties

My goal is to implement the use of rem units throughout my website. However, relying on the standard rem-to-px conversion rate doesn't feel very intuitive: 10px = 0.625rem 12px = 0.75rem 14px = 0.875rem 16px = 1rem (base) 18px = 1.125rem 20px = 1.25r ...

htmlcss

Create a full-page gradient background using CSS that spans the entire height of the

I need assistance with a website that features a gradient implemented through CSS like this: #grad { background: -webkit-linear-gradient(#87a0b4 80%, #6b88a1); background: -o-linear-gradient(#87a0b4 80%, #6b88a1); background: -moz-linear-gradi ...

htmlcssgradient

Struggling to correct alignment issues with buttons within a container using Bootstrap 5

I'm struggling with a piece of html code where everything looks good except for the placement of the button. It seems to be too far away from the container. Here's the code snippet: <div class="container-fluid mt-1 d-flex align-items-cent ...

htmlbootstrap-5

Is it necessary to set required input if the db column can be NULL?

Is there a way to dynamically add the "required" attribute (HTML5) to an input if the chosen column cannot be null in PHP? Here's an example of what I'm trying to achieve: $result = mysqli_query($db, "SELECT * FROM table"); while($row = mysqli ...

phpmysqlsqlhtml

Experience the potential of HTML5 by playing dual audio MKV/AVI videos

After conducting some research, it seems that Chrome has the necessary codecs to play MKV videos. However, I have yet to come across any information on how to select audio tracks in MKV and AVI files using Javascript/HTML5. Does anyone have any insight in ...

javascripthtmlhtml5-video

How to showcase a solo form field in Django templates?

I am looking to only generate a forms.ChoiceField(choices=CHOICES) field in order to create a basic select HTML element. Instead of creating a new form class, I want a way to render just one form field in Django templates without the need for a form to ...

pythonhtmldjangoformstemplates

Is there a way to identify the source of a div's scrolling behavior?

While working on a complex web page that involves multiple JQuery Dialogs and other widgets, I encountered a frustrating issue. Some of the dialogs contain divs with scrolling abilities (using overflow-y with a fixed height). Whenever I click on one dialog ...

javascripthtml

Customize your webpage's style to reflect your unique identity with user

Is there a way to allow users to customize the style of a webpage? I know I need multiple CSS files, but how can I implement the code that enables this customization based on user preferences? ...

phpjavascriptcssajax

What is the process for sorting non-integer records in MySql?

I need help sorting MySQL records in descending order to retrieve the most recent entry. Here are the records stored as strings: 1/2017 1/2018 2/2017 2/2018 3/2017 I specifically want to retrieve the value 1/2018. The entries correspond to each year an ...

phphtmlmysqlphpmyadmin

Transferring files from an iPhone to a PHP server via POST request

I am currently attempting to transfer an audio file to a PHP server. Below is the Objective-C code snippet: NSData *data = [NSData dataWithContentsOfFile:filePath]; NSLog(@"File Size: %i",[data length]); //set up request NSMutableURLRequest *request= [[ ...

phpiphoneobjective-cxcode

The delete function is not functioning

I need help with implementing a custom Angular directive that includes a delete button to remove itself. When I click the button removeMe, it is not deleting an item from the array. Any suggestions on what might be causing this issue? HTML: <button t ...

javascripthtmlangularjs

Behaviors of size are specified differently in percentage and em/px units

My page consists of a navigation bar wrapped in a header element and a content frame that should be placed below it, both sharing the same width. When I specify the header width using percentages, this is how the page appears: However, when I define the ...

htmlcss

showing information obtained via ajax as a hyperlink

When using AJAX to pass an "id" and "data" to PHP, the following jQuery AJAX code is used: 1.$.ajax({//Make the Ajax Request 2. type: "POST", 3. url: "dbtryout2_2.php", 4. data:datastr, 5. success: ...

phphtmljquery

The <transition> element is not being recognized by VSCode

It seems like my VSCode is highlighting the transition element in red, indicating that it may not be recognizing this element. I'm a bit perplexed by what's happening here. Moreover, the code isn't functioning as expected because there is no ...

javascripthtmlvue.jstransition

Increment three items by a single value within a looping structure

There are three elements (radiobuttons) with individual ids and classes. To clarify, they are numbered 1, 2, 3; however, there are multiple radiobutton groups on a single page. I am looping through them, so the next group should be labeled as 4, 5, 6 and ...

phphtml

Delete auto-generated list using handlebars JS

I have successfully created a dynamic list using Handlebars.js and its template. However, I am now facing confusion on how to remove or delete items from the list using a function or specific code. As I am new to Handlebars, I would appreciate any help. ...

javascriptjqueryhtml

Elements appearing distorted in Firefox and Internet Explorer

I'm completely new to the world of web development and I am attempting to construct a website for my company all by myself. However, I am encountering an issue with a "red info box" on one of my pages. While it displays perfectly on Chrome, it appear ...

htmlcssresponsive-designcross-browsercss-position