no comment Tags : CSS

 

Cascading Style Sheets

CSS is code that changes the appeareance of HTML.

One place you can put CSS in a style tag that's a child of the head tag.

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p {
color:blue;
}
</style>
</head>
<body>

</body>
</html>

 

1. Selector

Tags are selected by creating something called a selector.

<p>I am a description with tag p.</p>

the simplest selector is the type selector, and is a just tag name without <> brackets.

p{
text-decoration:underline;
}

 

1.1 The syntax of a selector

selectors have a very specific syntax that needs to be followed or the CSS not worked.

selector{
property:value;
}

 

1.2 Selecting multiple tags with one selector

Selectors with select all matching tags on the page and apply the properties.

<h3>Members</h3>

<ul>
<li>Rekt - Vocals</li>
<li>Face-like - Vocals</li>
<li>DJ Regex</li>
</ul>

 

li {
font-size: 24px;
}

 

1.3 Selecting only tags that a childreen of another tag

A descent selector can be used to select tags only if they are childreen of another tag.

<h3>Members</h3>

<ul>
<li>Rekt - Vocals</li>
<li>Face-like - Vocals</li>
<li>DJ Regex</li>
</ul>

 

ul li {
font-size: 24px;
}

 

1.4 Selecting tags based on actions and conditions

A pseudo-selectors  is a modifier that can be added to a selector to select a tag only when a certain condition has occured .

a {
text-decoration: none;
}
a:hover {
text-decoration: underline; color:green;
}

 

1.5 Using pseudo-selectors to narrow selection criteria

The :first-child pseudo-selector can be applied to narrow the amount of child tags selected.

<h3>Members</h3>

<ul>
<li>Rekt - Vocals</li>
<li>Face-like - Vocals</li>
<li>DJ Regex</li>
</ul>

 

ul li:first-child {
color: red;
}

 

2. Reset CSS

put this css on the top to reset all css tags value.

html, body, h1, h2, h3, h4, ul, ol, li, p, a {
padding: 0;
border: 0;
margin: 0;
}

 

3. Box Model

The Box Model is the way to describe the borders and spacing it beetwen the boxes of each tag.

There are 4 parts of the box model:

  1. Content area. ( content area containts your actual content (text, images, etc )
  2.  Padding.  ( Padding is added to the top, bottom, left and right of the content area )
  3. Border. ( Border is added around top, bottom, left and top of the padding )
  4. Margin. ( Border is added around top, bottom, left and top of the border)

 

Example 1 box model with border-bottom

use padding to put more space between border and content.

h3 {
margin: 30px 0 30px 30px;
border-bottom: 1px solid #cccccc;
padding-bottom: 1px;
}

 

Example 2 add space page document

add 15px of space between the edge of the window and all of the other content on the page.

body {
padding: 15px;
}

 

 

Example 3 Ordered List

add 15px of space between the edge of the window and all of the other content on the page.

ul {
padding: 0 0 0 30px;
}
li {
margin-bottom: 5px;
}

 

 

 

Leave a Comment:



digital_ocean