Ways to style a div identifier within a div group

<div class="content">
    <div class ="imgs">
      <a href="#"><img src="images" alt="some_text" width="250" height="210"></a>
</div>
<div class = "compu">
    <div id="titulo">text</br></div>
    <div id="subtitle">text </div>              
    </div>
</div>

Can someone help me with formatting the text in titulo and subtitle??

This is the CSS I have for compu:

.compu
{
    position: relative; 
    width: 250px;
    font-family: Helvetica, sans-serif; 
    color: #1B57A0;
    letter-spacing:2px;
    line-height:120%;
    font-size: 12px;
    font-weight: normal;
    text-align: justify;
}

I am new to HTML and CSS, and this is my first project. Any guidance would be appreciated. Thank you.

Answer №1

To add CSS styling to the title and subtitle, follow these steps:

    .compu #titulo
    {
         /*Add your custom style code here*/
    }

    .compu #subtitle
    {
         /*Add your custom style code here*/
    }

Answer №2

To style the div with the class name compu and then the nested divs with an id, follow these steps:

CSS:

.compu #titulo { /* Style for the titulo div */ }
.compu #subtitle { /* Style for the subtitle div */ }

You can customize both divs with these CSS rules.

See a live DEMO here.

The CSS code used in the demo is as follows:

.compu #titulo { color: red; font-size: 20px; }
.compu #subtitle { color: green; font-size: 14px; }

Answer №3

.technology #header
{
}
.technology #subheading
{

}

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

Clicking outside of Bootstrap Modal inputs causes them to lose focus

Currently, I am tackling a challenge involving 2 bootstrap modals located on the same page with Bootstrap version 2.3.2. A frustrating issue that has arisen is that whenever either modal appears, the first time you click on any of the inputs within the mo ...

Displaying Bootstrap Quotes in a vertical orientation on the screen

https://i.sstatic.net/90qYG.pngI'm struggling to make a long quote display wider horizontally and haven't been able to figure it out. Below are the current HTML and CSS scripts I have. I simply want the text to be shown wider than it currently is ...

Error alert: $.simpleWeather function not found

Currently, I am attempting to incorporate simpleWeather.js from the website simpleweatherjs.com into my own website. However, upon inserting the html code onto my website, an error message pops up: Uncaught TypeError: $.simpleWeather is not a function ...

template not being loaded with form

My Django form is not showing up when I try to implement it. Even after checking the browser's inspector, there is no sign of it being loaded at all. If more information is required, please let me know. Here is the project structure: /beerad url ...

The AngularJS $HTTP loop counter fails to update

When working with an HTTP service and binding JSON data to HTML, I implemented the following code: This function uses a 2-second timer to automatically fetch data whenever there is a change in the backend. function sampleDevices ...

Is there a way to place two input fields from different forms side by side on the same line?

Here are two forms extracted from an html page: <form method="get" action="search/s" id="number"> <div style="text-align: center;"> <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or ...

I am struggling with aligning the list items side by side

I am currently facing an issue with my list items that have anchor tags. They are currently set to display block with background images, but I want them to display inline. However, they are stacking on top of each other instead. The ul is being generated b ...

Verification of data using PHP, MySQL, and jQuery

I'm currently working on a process to extract data from an Excel file and then pass it on to a PHP file for validation against a database. If the data doesn't exist in the database, a message will be displayed to notify the user of incorrect data ...

Why isn't the background of the container div at the top when using multiple CSS sheets?

I am revitalizing a dull website and seeking feedback on my template design here: Check out the ideal look It's quite lovely! However, as I attempt to incorporate my background, menu, and footer elements, I seem to be experiencing issues with my con ...

Show the final row of an HTML table that includes an option to edit

I have a dynamic HTML table displaying results using a while loop. In the final row of the table, I want to include an edit button. The basic structure of my code is as follows: echo '<table>'; while($row = mysqli_fetch_assoc($result)) { ...

Even though my form allows submission of invalid data, my validation process remains effective and accurate

Here is the code I have written: <!doctype html> <html lang="en"> <head> <title>Testing form input</title> <style type="text/css></style> <script type="text/javascript" src="validation.js"></script> &l ...

Tips on how to link images in an HTML file when it is being accessed locally on a host server

I am working on creating an HTML file that displays an image. My plan is to package the project into a zip folder and share it with someone who will run it on their local machine. Assuming I have an index.html file that includes an image called infographi ...

InvalidSelectorError: The specified selector is not valid //button[contains(., 'buttonText')] while running JavaScript code

Here's an example of HTML code that I am working with: <button id="toolbar-item-17-update-id" type="submit" name="action" value="update" class="button-action-update btn btn-secondary"> Ed ...

What is the best way to integrate a Vue component into the HTML of another Vue component?

Currently, I am dealing with a large HTML string that is being loaded into a div within my Vue component. This HTML string comes from a WYSIWYG editor and was previously handled using v-html, which worked well. However, I now have scenarios where I need t ...

Customizing the parent class of an input in Blazor/Scss: A step-by-step guide

My current set up involves using <label> elements with an <input type=radio> as a child. This enables the label to be clickable and trigger the selection of the corresponding radio input. <div id="content"> <label class="optio ...

Converting HTML code into executable PHP code

I'm having trouble embedding PHP into an HTML file. I modified my .htaccess to recognize HTML files as PHP, but when I attempt to open the .html file in my browser, it gets downloaded instead of being processed and shown. UPDATE: Here is what's ...

What is the process for changing text to red when hovering over it in a nested list?

a { color:black; } a:hover { color:red; } <ol> <a href="#"><li>Main1</li></a> <a href="#"><li>Main2</li> <a href="#"><li>Main3 <ol> ...

Why is it that the default theme of Material UI lacks any stylization at all?

After experimenting with both Carbon Design for React (@carbon/react) and Material UI (@mui/material) in conjunction with Next.js, I encountered styling issues with the components. While they functioned correctly to some extent, there were noticeable discr ...

Utilizing Bootstrap classes alongside custom CSS within Next.JS

Recently, I've been diving into the world of Next.JS and attempting to integrate it with Bootstrap. However, I've encountered a roadblock - the inability to combine Bootstrap classes with my own custom CSS classes within the className attribute. ...

Python web scraping: Extracting data from HTML tag names

Seeking help with extracting user data from a website by retrieving User IDs directly from tag names. I am utilizing python selenium and beautiful soup to extract the UID specifically from the div tag. For instance: <"div id="UID_**60CE07D6DF5C02A987E ...