-2

I'm a second-year IT student and I currently need to make a website. I made a simple website and first started with an external CSS, then I converted it into an embedded type. The next step would be to convert it into inline CSS. I first did it manually but it gave the same results as with an online converter I found on the internet. Here is my HTML code with inline and media queries.

<html>
<head>
<title>Hi</title>
<style>
@media only screen and (max-device-width: 600px) {
    div.size {
        font-size:1000px;
    }
}
</style>
</head>

<body>

<p class="size" style="font-size:100px";>Hello</p>


</body>
</html>

Here are some links to screenshots: https://drive.google.com/drive/folders/1A67dCcEOksZdoPdXkChvYCJTmLcy1TxA?usp=sharing

Johannes
  • 64,305
  • 18
  • 73
  • 130
Neubee
  • 1
  • 4
  • What are you doing? Typically you start with inline styles and externalize them when they get out of hand. Personally I only use inline styles when there is no other way (== almost never). I don't think inline styles support media queries at all but I might be wrong here. – lupz Mar 18 '21 at 09:19
  • @lupz is correct, you can not use media queries within ``, if that is what you meant. – CBroe Mar 18 '21 at 09:56
  • Generally don't use inline style, this is bad practice. – Deitsch Mar 18 '21 at 09:57
  • Hi @lupz, Ive pasted the code here but I had to remove one link that was too long so there'll be one image that wont appear. We were instructed to create 3 websites implementing the three CSS types. I first started with an external because I thought it'd be easier to then convert it into internal CSS. Then next was inline, where all the problems happened. I need to make it responsive so I used media query. I researched a bit and found out both inline and internal could work. Thanks! P.S. it says characters instead of line of codes. – Neubee Mar 18 '21 at 09:57
  • You wanna learn the basics of web development, https://www.w3schools.com/ is a good place to start. – rx2347 Mar 18 '21 at 09:58
  • i basically learned more from w3schools.com rather than from my professor. @CBroe i know that I cannot make media queries this way – Neubee Mar 18 '21 at 10:01
  • 1
    Well when people say “inline styles”, then that usually means using the `style` attribute. What exactly is not working as intended here then? Please _explain_ that, instead of sending us to an external site to look at screenshots. Also, please reduce the complexity of your example - “media query working, or not” should be demonstrable with way less code, than you have currently thrown at us, see [mre]. – CBroe Mar 18 '21 at 10:04
  • @CBroe Im sorry. What isn't working is when I go to developer mode in Chrome to see if it's responsive in phone screen sized. That's where I created my media query for. Before when it was still internal css (inside ) it was working. Now that I implemented inline ( tag didn't overwrite the classes or id's I still left after converting it to inline CSS. – Neubee Mar 18 '21 at 10:10
  • 1
    Inline styles have higher _specificity_, than styles applied via rules. They _can_ be overwritten, https://stackoverflow.com/questions/16813220/ … but scattering !important all over the place, is not very maintainable, and will very likely lead to additional problems. Still unclear _why_ you’d want to partially convert stuff to inline styles here in the first place. – CBroe Mar 18 '21 at 10:15
  • When your assignment is to demonstrate that you understand how to use inline, embedded and external styles I would pick a simple example. – lupz Mar 18 '21 at 10:17
  • @CBroe So, ive shortened the code and still the same problem occurred. Our professor wanted us to implement the three different CSS styles in 3 htmls. – Neubee Mar 18 '21 at 10:17
  • 1
    Inline CSS here takes priority over your media CSS. Never mix it. Move your style to single style sheet and then check if it's working – Justinas Mar 18 '21 at 10:19
  • @lupz Sorry. Besides that, we also need to make it a page dedicated to three of our friends. Hence the profile thing I first sent. – Neubee Mar 18 '21 at 10:19
  • @Justinas I transferred the media query to an external CSS and it still won't work. – Neubee Mar 18 '21 at 10:22
  • I apologize if I sent the long code first, my program specializes in design so I had to make it at least presentable when I hand it over to my professors. – Neubee Mar 18 '21 at 10:25
  • 1
    Does this answer your question? [How can I override inline styles with external CSS?](https://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css) – mickmackusa Mar 18 '21 at 11:59

2 Answers2

1

Your CSS rule is this:

div.size {
    font-size:1000px;
}

But in your HTML code you are using the .size class on a p tag, not on a div tag, so that rule won't apply to your p tag.

Either remove the div from the class selector (making it just .size { ... }) or change the selector to p.size { ... }

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thank you, so I tried it with my original code (I removed the divs and ids I used even though I put them in div tags and transferred the embedded CSS to an external one, just to see if it's possible) but it still won't work. Mainly, the boxes for my texts didn't work, then the alignment that I put work into when I added the media query. Oh and Im sorry for the wrong example I put. The text align did work but the font size didn't. – Neubee Mar 18 '21 at 10:40
  • You need to read something about "css selector's specificity". BUT elements styles added via `style` attribute are more powerful then any css selector. Except the case with @important declarations. e.g. `.size { font-size:1000px !important; }` – Alex Mar 18 '21 at 11:55
  • So, this is a typo question that should be closed instead of answered, right? @Joha – mickmackusa Mar 18 '21 at 11:56
  • @mickmackusa "typo" means misspelling or hitting a wrong key on the keyboard by accident. This here is about understanding the relationship between classes and (different) tags. – Johannes Mar 18 '21 at 12:21
  • My interpretation (and I don't have a problem with your interpretation) is that if the OP already possesses the knowledge of the difference between a `

    ` and a `

    `, but just failed to type the correct tag into the selector, then I call this a typo -- because there is nothing to teach them; they already know how to do it, they simply didn't in the snippet. If nothing else, I am confident that Unclear is a reasonable close reason too.
     – mickmackusa Mar 18 '21 at 12:34
0

Inline styles have a higher priority then internal or external styles. This makes sense, when you are trying to overwrite general style properties of a specific element:

div {
  color: red;
}
<div>
  I am red because the general styles (internal or external) say so.
</div>

<div style="color: blue;">
  I am blue because of my inline styles. They overwrite the general styles.
</div>

It makes no difference whether you use media queries or not. Inline styles will overwrite the general styles... Unless you use the !important keyword like this:

div {
  color: red !important;
}
<div>
  I am red because the general styles (internal or external) say so.
</div>

<div style="color: blue;">
  I have inline styles but I am still red because of the !important
</div>

However using !important can lead to more problems then it actually solves but it might be sufficient for your assignment. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for some rationales.

You can't specify media queries with inline styles. Hence, you would have to mark every single css property in the media queries with !important.

I recommend to simplify your assignment project and not use media queries here. I just doesn't work with inline styles.

lupz
  • 3,620
  • 2
  • 27
  • 43
  • Surely SO already has pages which explain these basic techniques, right? I mean SO has been answering the world's programming problems for over 10 years now. https://stackoverflow.com/q/9808233/2943403 – mickmackusa Mar 18 '21 at 12:38
  • Thank you so much everyone! I'm sorry if I didn't explain my problem clearly. I guess I really shouldn't mix the two styles, so is inline CSS not really for responsive websites? Anyhow, thank you for taking the time to educate me. – Neubee Mar 18 '21 at 12:41