Is there a way to use sed to modify font-size and font-family properties in a CSS file?

I'm attempting to modify the CSS font-size and font-family properties using the 'sed' command in Ubuntu. Here is a snippet of my CSS code:

stage {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 10pt;
}

Currently, I am trying to use the following command:

sed -i -e "/(stage\s*\{[\w\s:\-;\(\)#]*)(font-size\s*:\s*)([^\}])(|\})/20pt/" theme.css

However, I am encountering an error related to the regex command. Can anyone provide guidance on how I can successfully adjust the font-family and font-size within the "stage" using "sed"?

cssregexlinuxbashsed

Answer №1

Here's a solution you can try:

sed -i.bak '/^stage/,/}$/ s/font-size:.*/font-size: 20pt;/g' theme.css

This command will replace the font size to 20pt between lines starting with 'stage' and ending with '}' in the theme.css file.

I hope this helps! Let me know how it works for you.

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

My contact form validation has hit a snag with a small bug. The email validation seems to be intertwining with the rest of my

I have implemented validation code for a contact form. When the code runs, it will identify any invalid input and display an error label. Although the validation is functioning correctly, the email input is not displaying the error label as expected. See ...

javascriptjqueryhtmlcssvalidation

Static vs Relative Positioning: Understanding the Contrast

Can you explain the distinction between static (default) positioning and relative positioning in CSS? ...

cssstaticpositioningcss-position

What is the best way to vertically center the <li> element within the <ul> tag?

Recently, I've been delving into html and css as a way to create my own navbar. It's been quite challenging for me to properly position elements using html, especially when compared to the relative ease of doing so on Android (after some trial an ...

htmlcss

Is there a detailed HTML page specifically designed for CSS testing?

I am in search of sample code featuring the use of semantic HTML to test stylesheets. The version/doctype is flexible, but HTML5 would be preferable. By "comprehensive," I mean incorporating definition lists, forms, tables, and all other standard element ...

htmlcss

Ways to have a list component smoothly descend when a dropdown menu is activated

I have a situation where I have a list with two buttons, and each button triggers the same dropdown content in a sidebar component. The issue is that when I click on one button to open the dropdown, the second button does not move down to make space for it ...

javascripthtmlcssreactjs

What is the best way to turn my rectangular shape into a diamond in React Native using CSS?

https://i.sstatic.net/S4LPu.png Hi there, I'm facing a challenge with a project where my client wants to implement this orange border in react native. Unfortunately, CSS is not my strong suit. Can anyone please help me figure out how to achieve this ...

javascriptcssreactjsreact-native

html transparent div element

I'm encountering an issue with this specific code snippet: <li class="nav-item dropdown" id="noti_Container" > <div id="noti_Counter" style="opacity: 1; top: -2px;"></div> <a style=" ...

htmlcssopacitytransparent

Using Jquery to Switch Pages

Recently, I've been experimenting with using hashes to create animated transitions between pages. Interestingly, the first page that loads (the home page) fades in and out seamlessly. However, when I attempt to navigate to another page, specifically t ...

javascriptjqueryhtmlcss

Transform HTML content with formatting into a PDF format using Google Apps Script, then bundle it with an email attachment. Generate a PDF blob directly from the

Seeking help with customizing HTML output from a Google Apps Script form to have different styles for email and PDF files. Current code: function doGet(request) { return HtmlService.createTemplateFromFile('index') .evaluate();//not al ...

javascripthtmlcsspdfgoogle-apps-script

Issue arises when CSS selectors do not function properly with absolutely positioned divs

I am experiencing an issue with my CSS code that is functional on CodePen but not on my actual website. I am attempting to target the .appraisals class for manipulating the background color of an opaque screen slider containing information. Despite using a ...

htmlcss

What is the best way to align table headers with their respective content?

Ensuring proper alignment of table columns with their respective headers is crucial. Consider an array of headers: const titles = ['name', 'lastname', 'age'] When displaying the table, the content may be like this: const cont ...

javascripthtmlcssreactjshtml-table

Is anyone experiencing difficulties with IOS 8.3 when trying to assign colors to Font Awesome icons using content?

I'm encountering an issue on IOS 8.3 where I click a checkbox and the arrow color should be green, but it shows up as black instead. Is there a bug fix for this in IOS or is it simply not supported? Here is my SASS/css code: input[type="checkbox"] ...

htmlioscss

Trouble with displaying vertical scroll bar in React app when height is set to 100%

I am developing a React application where I need the content to always occupy at least 100% of the height to style the background accordingly. I have attempted to achieve this by setting the CSS height to 100% at the top level, which works fine. However, t ...

htmlcssreactjsmaterial-ui

Stop cascading styles when using nested rules in LESS to prevent unintended style application

In the process of developing a sophisticated front-end system using plugins, we are exploring different methods for composing CSS rules. Currently, we are considering two main approaches: Including parents in the class name Nesting parents in the selecto ...

htmlcssless

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...

javascriptcssreactjs

Creating a column with image that takes up 100% height using CSS

I have been experimenting with various techniques, but I am encountering a challenge with this particular issue. My goal is to create columns within a section where each column has a height of 100%. The complication arises when one of the columns contains ...

htmlcssheight

CSS transforms fluidly transition between absolute and relative positioning

Can CSS transitions be used to combine "position: relative" and "position: absolute" in a smooth manner? I have developed a compact widget called the Deck, which has both a collapsed and expanded state. Currently, it is working well by using absolute posi ...

css-transitionscss

In React JS, when the navbar button is clicked, the URL is updated but the content does not refresh

Upon clicking the button, the URL changes but the content remains the same. Interestingly, if I use an <a> tag instead of a <Link> tag, the page loads and the content updates as well. However, when using the <Link> tag, the data does not ...

javascripthtmlcssreactjs

The advantages and disadvantages of utilizing various methods to visually enhance HTML elements with JavaScript

After opening one of my web projects in IntelliJ, I noticed some JavaScript hints/errors that Netbeans did not detect. The error message was: > Assigned expression type string is not assignable to type CSSStyleDeclaration This error was related to thi ...

javascripthtmlcss

Obtaining links from a database and showcasing them in a separate section

Considering starting a new website project and have a question to ask! My idea is to create a two-table layout similar to this: |-------------| | | | | | | | | | | | | | | | |-------------| I would like t ...

phphtmlmysqlcssconnection