Skip to main content

CSS

 CSS

So far, our webpages have been pretty boring - white background, black text, default fonts, etc.


To make life more interesting, we're going to learn how to use cascading style sheets (CSS) to beautify our pages.


CSS has made this a lot easier, since before it, web coders had to individually tell each element how to look. CSS lets us create default settings & formats and apply them to parts of our page. It's a bit like having formatting subroutines that you can call at any time.


👉 You may have already noticed a style.css file in your left hand file pane, and this line in our boilerplate code:


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


This means that any repl you create automatically comes with it's own styling file that is loaded into the webpage.


This is what the starter style.css page looks like:


html, body {

  height: 100%;

  width: 100%;

}


This CSS code tells the <head> and <body> tags how to look. They have a height & width of 100% (ie they fill the page).


Now let's start creating a webpage and learning about the tags. 

👉 I've created a basic baldy page here (It's already in the index.html file for you.):


<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>replit</title>

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

</head>

<body>

  

  <h1>Baldies Page 2</h1>

  <p>The continuation of the epic website showing the best of the bald bunch.</p>

  <h2>Yul Brynner</h2>

  <img src="yulBrynner.jpg" width ="200px">

  <p>Yul Brynner is another amazing baldie, a famous actor in the 20th Century, he is most remembered for his roles in "The King and I", and the original "Westworld".</p>

  

</body>

</html>


Before you get started...

The curly braces are important - they surround the style for each tag.

Each line should finish with a semi colon - or it won't work.

Font family lets you pick a particular font or general style for your text. It's generally good practice to use general style rather than specify one font, because the one you pick might not be supported by all web browsers. Check out some web safe fonts here.

A cool Replit feature is to give you a color picker when you type the color name. You can click on the colored box to fine tune your color selection.

Heading Style

👉 The first thing I'm going to style is the heading. I do this in the style.css page by creating a new style for the <h1> tag. The settings I create here will be applied to all the <h1> tags in my html file.


html, body {

  height: 100%;

  width: 100%;

}

h1{

  font-family: sans-serif;

  font-size: 24px;

  color: blue;

  background-color: #d3d345;

    

}


Let's see what this code has done to my webpage. Go back to the index.html file and refresh the webview pane:



Paragraph Style
👉 Now, I'm going to style my <p> tags:

html, body {
  height: 100%;
  width: 100%;
}
h1{
  font-family: sans-serif;
  font-size: 24px;
  color: blue;
  background-color: #d3d345;
}
p{
  font-family: sans-serif;
  font-size: 10px;
  color: blue;
 
    
}

This has changed my paragraphs to smaller, blue text.


Background Color
👉 To set the background color for the whole page, add the setting to the html, body style:

html, body {
  height: 100%;
  width: 100%;
  [background-color: red;](background-color: #e4e2e2;)
} 

Alignment
Another cool thing that we can do in css is to align our text.

👉 Let's align the <h1> and <p> tag text. I'm using center, but you can also use left or right.

h1{
  font-family: sans-serif;
  font-size: 24px;
  color: blue;
  background-color: #d3d345;
  text-align:center;
    
}
p{
  font-family: monospace;
  font-size: 10px;
  color: blue;
   text-align:center;
    
}

👉 I also want to apply the <h1> settings to the <h2> tag, but instead of creating a whole new style, I can just add the tag name at the top of the <h1> style:

h1, h2{ 
font-family: sans-serif;
  font-size: 24px;
  color: blue;
  background-color: #d3d345;
  text-align:center;
    
}

However, I do want <h2> to be a bit smaller, so I can define a new style after the 'h1, h2' style and just change the font size: 

html, body {
  height: 100%;
  width: 100%;
  background-color: #e4e2e2;
}

h1, h2{
  font-family: sans-serif;
  font-size: 24px;
  color: blue;
  background-color: #d3d345;
  text-align:center;
    
}

''' THIS IS THE NEW BIT'''
h2{
  font-size: 12px;
  
}

p{
  font-family: monospace;
  font-size: 10px;
  color: blue;
   text-align:center;
    
}

Images
👉 We can also use CSS with our image tags. Centering an image isn't very intuitive, but we can do it like this:

img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  
}

Tags and Classes
It's also possible to directly address a single tag by giving it a class name.

👉 Here's an example of how I've created the blurb class directly in a <p> tag in the index.html page.

<p class = "blurb">Yul Brynner is another amazing baldie, a famous actor in the 20th Century, he is most remembered for his roles in "The King and I", and the original "Westworld".</p>

Now, I can style my blurb class in the style.css file. Notice how I've referred to it using dotblurb -> .blurb 

.blurb{
  font-style: italic;
  font-weight: bold;
}





Comments

Post a Comment

Popular posts from this blog

FOR LOOP , RANGE

  FOR LOOP  A  while  loop is perfect to use when we  don't  know how many times we want the loop to repeat.  If we have an idea of how many times we want the loop to repeat, we can use a  for  loop to loop code in exactly the same way the  while  loop did.  EXAMPLE :  for counter in range(10):   print(counter) RANGE  The  range  function creates a list of numbers in the range you create. If you only give it one number, it will start at  0  and move to a state where the final number is  one less  than the number in the brackets. In this case, the final number would be  9 .  EXAMPLE :  total = 0 for number in range(100) :   total += number   print(total)
Post a Comment
Read more

ALL ABOUT WHILE LOOP

 WHILE LOOP  A  while  loop allows your code to repeat itself based on a condition you set.   EXAMPLE : counter = 0 while counter < 10:   print(counter)   counter +=1 Infinite Loop  You have to be  really  careful that you don't accidentally invoke an infinite loop! This is where the computer will loop code until the end of time. Without a break. Forever.  This is just saying "count to 10 by 1 each time." to make the loop end. Don't forget, if your  condition  is a  >  then you might need to  -= . This will subtract from the variable instead of adding to it.   EXAMPLE : counter = 0 while counter < 10:   print(counter)    counter += 1
Post a Comment
Read more

IF AND ELSE STATEMENT

  If Statements    These statements are a bit like asking a question. You are telling the computer:  if  something is true,  then  do this specific block of code. Double equals ( == ) is asking the computer to compare if these two things are  exactly  the same.  EXAMPLE :  myName = input("What's your name?: ") if myName == "David":  What is else? IF  the condition is  not  met with the  if  statement, then we want the computer to do the  else  part instead. Likewise, if the condition  is  met in the  if  statement, then the  else  bit is ignored by the computer. The  else  statement must be the first thing  unindented  after the  if  statement and in line with it    EXAMPLE :  myName = input("What's your name?: ") if myName == "David":  print("Welcome Dude!")  print("You're just the baldest dude I've ever seen...
Post a Comment
Read more