CSS

How to add style instructions

There are 3 ways to insert CSS on a HTML page

Inline CSS

Inline CSS decides the styling rule for a specific HTML tag, by using a style attribute. If you need a quick permanent change, then you can use this, but they are not as flexible and external and internal stylesheets.

<div style="outline: 1px solid red; margin-left: 20px;">...</div>
2.1.1 Example

Internal CSS

You can also place CSS rules in the head section of the HTML file. The rule here only apply to the specific page, where you use CSS classes and IDs or the HTML semantic elements. If you want the headings to be red, than you can change all the heading with one code and. But the headings will only be change if the page has the CSS code inside

<head>
<style type="text/css">
h1, h2{
color: red;
margin-left:20px;
}
</style>
</head>
2.1.2 Example

External CSS

Now you know how to make inline CSS and CSS on a specific page, but what if you want to change the heading color on every site you have? Is there an easy way to do that without using internal stylesheet?
Yes there is!
You can use an external stylesheet which is a standalone CSS file, that are linked from a webpage. By using an external stylesheet the rules can be created once and applied to multiple web pages.
By using a external stylesheet can you save time and effort.
You link to a external CSS stylesheet in the HTML elemenet, head.

<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
2.1.3 Example

How to design HTML elements

CSS selectors are the way to change the design of HTML elements.

header{ 
/* style instruction here applys to all headers */
}
main header{ 
/* style instructions written here apply to all headers that are neasted inside the main element*/
}
body > header{ 
/* style instructions written here apply to all headers that are direct children of the body element*/
}
2.1.4 Example

Universal selector

A universal selector—also known as a wildcard—matches any element.

* { 
color: hotpink;
}
2.1.5 Example

Type selectos

A type selector matches a HTML element directly. It will match all HTML elements with the type selector.

section { 
background-color: #0000;
}
2.1.6 Example

Class attribute

A HTML element can have one or more items defined in their class attribute. It will match all HTML elements with the class.

.className { 
margin: 0 auto;
}
2.1.7 Example

ID selector

An HTML element with an id attribute should be the only element on a page with that ID value

#IDname { 
padding: 100px;
}
2.1.8 Example

Grouping selectors

We can group selectors together, so we do not need to write the same code to many times

strong, em, .my-class, [lang] { 
color: red;
}
2.1.9 Example

More thatn one CSS class

You can give a HTML element more than one CSS class

HTML

<h1 class="center heading">Main heading</h1>

CSS

.heading { 
font-size: 2em;
}
.center {
text-align: center;
}
2.1.10 Example

Descendant combinator (E F)

The descendant selecot targets any elements F that is a desendant (child, grandchild, great grandchild and so on) of an element F.

HTML

<div>
<ul>
<li> Something </li>
</ul>
</div>

CSS

div ul li { 
color:red;
}
2.1.11 Example

Here it would target the li elements that are nested inside the div If you make a li element outside it, will it not be effected.

Child combinator (E > F)

This selector matches any element F that is a direct child of element E

HTML

<div>
<ul>
<li> Something </li>
</ul>
</div>

CSS

ul > li { 
color:blue;
}
2.1.12 Example

Here it only target li elements directly inside the ul element. If you make a ordred list, will it not effected.

Sibling (E + F)

This will match any element F that shares the same parent as E and comes directly after E in the markup

HTML

<div>
<ul>
<li> Something </li>
<li> Something else</li>
</ul>
</div>

CSS

li + li { 
color:green;
}
2.1.13 Example

Here it will target all li elements except the first li in the given container

Pseudo-classes

:hover - can apply any element on the page.
:focus - must be added whereever you include :hover, because not all visitors will use a mouse to navigate yout site.
:active - are relevant to links and form controls.
:disabled - it will disable aby element. It can be used on any form controld.
:checked - can be used on radio buttons or checkbuttons that are selected og ticked.
:target - it singles out the element that is the target of the currently active intrapage anchor.
:read-only - applies to elements whose contents are unable to be altered by the user.

Structural Pseudo-classes

CSS3 can also target elements based on their location in the markup.

:root - the root element, which is the HTML element in our HTML files.
E:first-child - the first child of the element E.
E:last-child - the last child of the element E.
E:only-child - element E if E is the only child of its parent.