How to edit css of the headline component in the experience cloud? I want to change the font size of the text in the headline component.

There are a couple of text elements in the headline component, so it depends on which one you want to change. There is the "Headline Title" and the "Headline Banner Text" which are pointed out in the image below.

If you want to change the title, there are two separate lines of CSS you need to update:

.forceCommunityHeadline .headlineTitle {
font-size: 40px !important;
}

This one looks like you'll need to add !important to the CSS or else it won't take effect.

To change the Banner Text you can use this CSS:

.forceCommunityHeadline .headlineInfo {
  font-size: 40px;
}

It doesn't look like you'll need to use !important for that one.